html选择框打勾代码_设置VSCode代码段提高工作效率

        最近做了个新项目，vue单页应用，组件巨多。每新建一个 .vue 文件，就要来一套 template、script、style，虽然没多少代码量，但是这种重复无脑的工作，能不做还是不做嘛。那么有没有办法能简化这些操作偷懒喝杯咖啡提高工作效率呢？当然是有的。

        有的人可能已经发现，当我们在html文件中输入“html”，会出现悬浮的代码提示，我们选中想要的项目回车，一大段代码就自动生成了。

        既然 html 模板能够有代码提示，vue文件应该也是可以的。笔者一番百度，找到了 Snippet 也叫做用户代码片段。

        在vscode中，点击左下角设置按钮，选择 User Snippets，或按快捷键 Ctrl+Shift+P 打开命令输入 snippet。

        在打开的输入框中选择 vue.json 并回车打开，在配置文件 vue.json 中创建的代码段将在vue文件中生效。

        可以看到 JSON 文件中默认已经给出了demo。

"Print to console": { // snippet的名字   "prefix": "log",   // 前缀，用户输入前缀时会展示代码提示悬浮框   "body": [          // 代码段内容，将替换掉用户输入的“前缀”     "console.log('$1');",     "$2"   ],   "description": "Log output to console" // 描述信息，将展示在代码提示悬浮框中},

        body 中出现的 $1、$2 表示光标的位置，代码段生成后光标将默认出现在 $1 处，使用 tab 键可以切换到 $2、$3 。

        看懂了 demo 后，我们就可以依样画葫芦的写出我们自己的 vue 代码段：

"vue template": {  "prefix": "vue",  "body": [    "",    "  

", "

", "", "", ", "", ", "//@import url(); 引入公共css类", ".$1{", "}", "", "" ], "description": "Create a vue template"}

        在我的vue代码段中，包含基础的三大块，在 script 中添加了基本的 data、computed、watch、methods 以及我常用的 mounted 钩子。可以看到 template 的根元素上定义了 class 属性，内容为 $1，而 style 里面同样写了 .$1 { }，这表示代码段生成后，两个 $1 处会同时获得光标，之后填写的 class 名将同步出现在样式表中。

        一个简单的 vue 模板代码段写好了，Ctrl + S 保存后不用重启 VSCode 即可生效，让我们创建一个 vue 文件看一下效果吧。

        一键生成二十行代码，是不是很爽呢？一个文件节约 20 秒，假设一个项目如果有 50 个组件，就省下了 10 分钟，是不是就可以去茶水间泡杯咖啡，跟漂亮的小姐姐聊会天了呢？想想就开心(*^▽^*)

        除了自定义代码段，VSCode 还支持从拓展市场中添加代码段。浏览VSCode拓展市场，选择下载安装你想要的代码段并重启 VSCode，这个代码段就可以用了。