VScode新建自定义模板快捷方式

骑猪看日落 2021-09-07 06:01 615阅读 0赞

**VS新建vue文件的自定义模板**

在使用`vscode`开发的时候，新建vue文件是不可或缺的，但是`VSCode`并没有`vue`文件的初始化模板，这个需要自定义模板。  
我们可以使用`vscode`的`snippets`在新建`.vue` 文件后轻松获得一套模板。

### 具体步骤 ###

*  打开**VSCode** -> “**文件**（mac机选Code）” -> “**首选项**” -> "**用户代码片段**”，然后会打开一个弹框。
 *  在弹框中选择"**新建代码片段**"新建一个全局代码片段文件，自定义名称保存后，VS编辑器就会打开这个文件。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDUxNDY2NQ_size_16_color_FFFFFF_t_70]
 *  然后复制以下内容覆盖文件内容。

{
       // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
       // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
       // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
       // same ids are connected.
       // Example:
       // "Print to console": {
       //  "prefix": "log",
       //  "body": [
       //      "console.log('$1');",
       //      "$2"
       //  ],
       //  "description": "Log output to console"
       // }
       	"Create vue template": {
       	"prefix": "vue",
       	"body": [
       		"<template>",
       		"  <div></div>",
       		"</template>",
       		"<script>",
       		"export default {",
       		"  name: \"${1:component_name}\",",
       		"  data () {",
       		"   return {}",
       		"  },",
       		"   methods:{}",
       		"}",
       		"</script>",
       		"<style lang=\"${2:scss}\" scoped>",
       		"</style>"
       	],
       	"description": "Create vue template"
       }
    }

**prefix** 表示对应生成代码块的命令（我设置的是`vue`）  
然后将文件保存关闭。

*  然后新建一个`.vue`文件  
    在新建的`.vue`的文件中输入`vue`，**回车**，然后就会生成初始化代码块。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDUxNDY2NQ_size_16_color_FFFFFF_t_70 1]
 *  生成初始化模板如图：  
    具体参数可以根据实际修改，此处我是用的是`scss`预处理语言  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDUxNDY2NQ_size_16_color_FFFFFF_t_70 2]

**注意：**

步骤二还有一个方法（方法二： 在弹框中搜索`vue`，选中`vue.json`，在vue.json中编辑自定义模板）

*  新建全局代码片段的好处就是，在非`vue`文件中输入`vue命令`都能新建出vue初始化代码模板。
 *  如果是`vue.json`文件中定义初始化代码模板的话，就只能在`.vue`文件中vue命令才会有效。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDUxNDY2NQ_size_16_color_FFFFFF_t_70]: /images/20210813/600b8fedaed94075a821394798650ad7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDUxNDY2NQ_size_16_color_FFFFFF_t_70 1]: /images/20210813/5b3e712bf98d4162b22bd8d8ef83c0a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDUxNDY2NQ_size_16_color_FFFFFF_t_70 2]: /images/20210813/1856e2a131364d1fb8fd509e44fbdad6.png