VSCode 如何操作用户自定义代码片段（模板）

淩亂°似流年 2023-02-20 13:46 8阅读 0赞

### 文章目录 ###

*   *  （1）VSCode 如何操作用户自定义代码片段（快捷键）
     *  （2）vetur的配置
     *  （3）安装了Vetur之后setting.json的配置
     *  （5）2020/11/06 更新（代码片段文件目录 新增片段请修改此文件【vue.json.code-snippets】）
     *   *  全局代码片段

## （1）VSCode 如何操作用户自定义代码片段（快捷键） ##

原文链接：[https://blog.csdn.net/qq\_40191093/article/details/82915028][https_blog.csdn.net_qq_40191093_article_details_82915028]

第一步：文件==>首选项==>用户代码片段  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70]

第二步：选择代码片段文件 html.json  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 1]

第三步：输入要自定义的快捷键 和 模板代码段

{ 
    	"vh": { 
    		"prefix": "vh", // 触发的关键字 输入vh按下tab键
    		"body": [
    			"<!DOCTYPE html>",
    			"<html lang=\"en\">",
    			"",
    			"<head>",
    			" <meta charset=\"UTF-8\">",
    			" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    			" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
    			" <title>Document</title>",
    			" <script src=\"./lib/vue-2.4.0.js\"></script>",
    			"</head>",
    			"",
    			"<body>",
    			" <div id=\"app\"></div>",
    			" <script>",
    			" var vm=new Vue({",
    			" el:'#app',",
    			" data:{},",
    			" methods:{}",
    			" });",
    			" </script>",
    			"</body>",
    			"",
    			"</html>",
    		],
    		"description": "vh components"
    	},
    	"vuec": { 
    		"prefix": "vuec",
    		"body": [
    			"<template>",
    			" <div>",
    			" $0",
    			" </div>",
    			"</template>",
    			"",
    			"<script>",
    			"export default {",
    			"",
    			" data () {",
    			" return {",
    			" }",
    			" },",
    			"",
    			" methods: {},",
    			"",
    			" created () {",
    			" }",
    			"}",
    			"</script>",
    			"",
    			"<style lang='less' scoped>",
    			"",
    			"</style>",
    			""
    		],
    		"description": "Log output to console"
    	}
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 2]

第四步：进入 .html 后缀的文件中 按快捷键 vh 后按 tab 键 即可实现快速输入代码段  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 4]

PS: 设置成功

## （2）vetur的配置 ##

安装vue扩展之后 在设置里的代码片段 搜vue 替换里面的代码片段 就可用vuec+tab快速搭建vue页面结构  
原文链接：https://blog.csdn.net/qq\_43688916/article/details/98728495

{ 
        "Print to console": { 
            "prefix": "vuec",
            "body": [
                "<template>",
                " <div>",
                " $0",
                " </div>",
                "</template>",
                "",
                "<script>",
                "export default {",
                "",
                " data () {",
                " return {",
                " }",
                " },",
                "",
                " methods: {},",
                "",
                " created () {",
    
                " }",
                "}",
                "</script>",
                "",
                "<style lang='less' scoped>",
                "",
                "</style>",
                ""
            ],
            "description": "Log output to console"
        }
    }

## （3）安装了Vetur之后setting.json的配置 ##

原文链接：https://blog.csdn.net/weixin\_37580235/article/details/82021921  
VSCode本身自带了Emmet，能够通过Tab键对HTML5的代码进行快速开发，不过，VSCode中需要修改Emmet配置才能对Vue进行支持。打开文件->首选项->设置，就会进入到 settings.json 文件中，在左侧是VSCode默认的配置，在窗口右侧就可以进行一系列的配置：

右侧写入：

{ 
     // 强制单引号
     "prettier.singleQuote": true,
     // 尽可能控制尾随逗号的打印
     "prettier.trailingComma": "all",
     // 开启 eslint 支持
     "prettier.eslintIntegration": true,
     // 保存时自动fix
     "eslint.autoFixOnSave": true,
     // 添加 vue 支持
     "eslint.validate": [
      "javascript",
      "javascriptreact",
      { 
       "language": "vue",
       "autoFix": true
      }
     ],
     // 使用插件格式化 html
     "vetur.format.defaultFormatter.html": "js-beautify-html",
     // 格式化插件的配置
     "vetur.format.defaultFormatterOptions": { 
      "js-beautify-html": { 
       // 属性强制折行对齐
       "wrap_attributes": "force-aligned"
      }
     },
     "vetur.format.defaultFormatter": { 
         "html": "prettier",
         "css": "prettier",
         "postcss": "prettier",
         "scss": "prettier",
         "less": "prettier",
         "js": "prettier",
         "ts": "prettier",
         "stylus": "stylus-supremacy"
     },
     // html颜色高亮
     "files.associations": { 
         ".eslintrc": "json",
         "*.vue": "html"
     },
     "emmet.syntaxProfiles": { 
         "javascript": "jsx",
         "vue": "html",
         "vue-html": "html"
     }
    }

## （5）2020/11/06 更新（代码片段文件目录 新增片段请修改此文件【vue.json.code-snippets】） ##

C:\Users\huilong.han\AppData\Roaming\Code\User\snippets

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70_pic_center]

### 全局代码片段 ###

{ 
    	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
    	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
    	// is left empty or omitted, the snippet gets applied to all languages. 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": { 
    	// "scope": "javascript,typescript",
    	// "prefix": "log",
    	// "body": [
    	// "console.log('$1');",
    	// "$2"
    	// ],
    	// "description": "Log output to console"
    	// }
    	"vh1": { 
    		"prefix": "vh1", // 触发的关键字 输入vh按下tab键
    		"body": [
    			"<!DOCTYPE html>",
    			"<html lang=\"en\">",
    			"<head>",
    			" <meta charset=\"UTF-8\">",
    			" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    			" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
    			" <title>Document</title>",
    			" <script src=\"vue.min.js\"></script>",
    			"",
    			"<link rel=\"stylesheet\" href=\"base.css\">",
    			"</head>",
    			"<body>",
    			" <div id=\"app\"></div>",
    			" <script>",
    			" var vm=new Vue({",
    			" el:'#app',",
    			" data:{},",
    			" methods:{}",
    			" });",
    			" </script>",
    			"</body>",
    			"</html>",
    		],
    		"description": "vh1 components"
    	},
    	"vuec": { 
    		"prefix": "vuec",
    		"body": [
    			"<template>",
    			" <div>",
    			" $0",
    			" </div>",
    			"</template>",
    			"",
    			"<script>",
    			"export default {",
    			"",
    			" data () {",
    			" return {",
    			" }",
    			" },",
    			"",
    			" methods: {},",
    			"",
    			" created () {",
    			" }",
    			"}",
    			"</script>",
    			"",
    			"<style lang='less' scoped>",
    			"",
    			"</style>",
    			""
    		],
    		"description": "Log output to console"
    	}
    }

[https_blog.csdn.net_qq_40191093_article_details_82915028]: https://blog.csdn.net/qq_40191093/article/details/82915028
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200627184459372.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200627184521475.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200627184547107.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200627184557787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200627184602749.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201106165732468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx,size_16,color_FFFFFF,t_70#pic_center