VsCode常用设置（新手必备！）

￡神魔★判官ぃ 2022-12-06 01:08 194阅读 0赞

很多同学会有疑问，为什么我看到很多大牛的视频里面敲代码的时候，输入一个template，就会出现一大块代码。

为什么我输入一个`template`，只有这一个单词，啥也没出来

![5b864e8c5200da4180aef7c42949d919.png][]

别墨迹，快解决

闲话不多说，我们就来聊一聊如何--懒省事（在VsCode里面设置自定义的模板）

首先：我们要找到这个模板设置的入口

在文件 - > 首选项 - > 用户代码片段

![1c53b2e53429ccf8b3af2c462b0e6e18.png][]

选中以后，会出现下面这个输入框，假如你想设置`.vue`文件的模板，可以新建一个vue.json全局代码片段文件，输入`vue.json`然后回车。

![6779bfa44dd719b208dbd1f57b3906fd.png][]

好了，接下来你可以把那些没必要的注释删掉，只需要在这个json文件里面输入以下内容

![c7a1c2e263181bb00e4796fff7262dfc.png][]

![b0435b79dedb99876ab2b81d8ee79084.png][]

好吧，解释一下

这里的`prefix`是你在编辑器里输入的内容，就好像创建html文件的时候，输入的英文感叹号

`body`就是你回车以后出现的内容

注意，这里的`body`是一个数组，每一行的内容都是数组里的每一项，并且需要用引号引起来。

是不是跟着敲好了？

接下来，保存之后，就可以回到我们的`.vue文件`里面尝试一下

![f081aa164f96e4df11167fe42cc4a634.png][]

![a3e286fc900af57051fa39b947b133b9.png][]

![3397a1f2c06c967d8b678e42333ed381.png][]

当然如果你觉得这还不够，我们依旧可以在那个json文件里面继续输入

![ef7ac489d33a0e0f7a8eeee6533d9cbf.png][]

接下来你就可以输入”js”，就能出现下面body里面的代码。

![68f00e8fd7e31c8ba0ced3a948619cea.png][]

太棒了，我们已经知道了如何创建一个小的片段

那么我们为何不一步到位，直接创建一个完整的vue文件模板呢？

接下来好心的我吧代码贴出来，直接拿去用吧！！！

![cc63c0fd67cfbc3b7d06adb450372ddb.png][]

{
    	"vue-template": {
    		"prefix": "vue",
    		"body": [
    			"<template>",
    			"   <div></div>",
    			"</template>",
    			"",
    			"<script>",
    			"export default {",
    			"	data() {",
    			"		return {};",
    			"	},",
    			"",
    			"	components: {},",
    			"",
    			"	computed:{},",
    			"",
    			"	mounted () {},",
    			"",
    			"	methods: {},",
    			"}",
    			"</script>",
    			"",
    			"<style scoped lang='scss'>",
    			"",
    			"</style>",
    		]
    	}
    }

最后输入”vue”，就能直接出现这个代码模板了

![077e0649b685d28c0f79bf7664bd2cbf.png][]

这个功能不只是可以设置模板，我们还能把偷懒发挥到极致——

比方说：你在写标签的时候，一些新增的语义化标签的代码提示并不完整，嘿嘿嘿......推到

比方说：[<figcaption>][figcaption] 记不住，可以去html的模板里给他设置成”**fi**”，嘿嘿嘿.....继续推到

比方说：我们常用的方法`console.log()` ，就改成\`log\`吧，嘿嘿嘿......统统推到

代码谁能比我写的快？还有谁？？？

[5b864e8c5200da4180aef7c42949d919.png]: /images/20221123/a7c5a3dbe23e4a00a8c2e6cc88e018c7.png
[1c53b2e53429ccf8b3af2c462b0e6e18.png]: /images/20221123/d5b698c380884a9188a4ebd4f13378ea.png
[6779bfa44dd719b208dbd1f57b3906fd.png]: /images/20221123/74d19854e25a47df8f66c8e810bcdfed.png
[c7a1c2e263181bb00e4796fff7262dfc.png]: /images/20221123/e6e5e2d85e7d44ed8409177fa7f37104.png
[b0435b79dedb99876ab2b81d8ee79084.png]: /images/20221123/c3bdac82b87347b29e0190f3552ed1b6.png
[f081aa164f96e4df11167fe42cc4a634.png]: /images/20221123/95d7030b58a048f89a1d5984a514626c.png
[a3e286fc900af57051fa39b947b133b9.png]: /images/20221123/976ecd64fc0e484584e5515336a3b9a3.png
[3397a1f2c06c967d8b678e42333ed381.png]: /images/20221123/edd71fcdd1d044c5a427c6f4b4ee6493.png
[ef7ac489d33a0e0f7a8eeee6533d9cbf.png]: /images/20221123/8f84833d9cca4ae38116b9b970211b07.png
[68f00e8fd7e31c8ba0ced3a948619cea.png]: /images/20221123/e044103b19ec43af8523bec373dcaf80.png
[cc63c0fd67cfbc3b7d06adb450372ddb.png]: /images/20221123/a829e4b5d5a748f6ba70cd9696521c5d.png
[077e0649b685d28c0f79bf7664bd2cbf.png]: /images/20221123/bbebb6d306594cfe8ec9af317f2974cf.png
[figcaption]: https://link.zhihu.com/?target=https%3A//www.w3school.com.cn/tags/tag_figcaption.asp