why

  • 每次新建一个新的.vue文件，都是完全空白的页面，需要手动敲模板代码，很没有效率。

配置入口

  1. 菜单 -> 首选项 -> 用户代码片段 或者 command+shift+P唤起全局搜索，搜索”配置用户代码片段”

image.png

image.png

  1. 选择vue.json，或者新建一个”全局代码片段文件”，起个简易的名字，比如”vue”

image.png

  1. 编写打开的json文件为想要的

模板代码

vue

  1. {
  2.     // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
  3.     // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  4.     // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
  5.     // same ids are connected.
  6.     // Example:
  7.     // "Print to console": {
  8.     //     "prefix": "log",
  9.     //     "body": [
  10.     //         "console.log('$1');",
  11.     //         "$2"
  12.     //     ],
  13.     //     "description": "Log output to console"
  14.     // }
  15.     "vue-template": {
  16.         "prefix": "vue",
  17.         "body": [
  18.             "<template>",
  19.             "  <div class=\"$1\">",
  20.             "",
  21.             "  </div>",
  22.             "</template>",
  23.             "",
  24.             "<script>",
  25.             "export default {",
  26.             "  name: '$1',",
  27.             "  data() { ",
  28.             "    return {",
  29.             "",
  30.             "    }",
  31.             "  }",
  32.             " }",
  33.             "</script>",
  34.             "",
  35.             "<style lang=\"scss\" scoped>",
  36.             "  .$1 {",
  37.             "",
  38.             "  }",
  39.             "</style>"
  40.         ],
  41.         "description": "my vue template"
  42.     }
  43. }

默认设置类名与组件的name一样，默认使用scss进行代码编写。

html

  1. {
  2.     "html": {
  3.         "prefix": "html",
  4.         "body": [
  5.             "<!DOCTYPE html>",
  6.             "<html lang=\"en\" style=\"font-size: 50px;\">",
  7.             "<head>",
  8.                 "\t<meta charset=\"UTF-8\">",
  9.                 "\t<meta name=\"viewport\"",
  10.                 "\t\tcontent=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">",
  11.                 "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
  12.                 "\t<meta http-equiv=\"Content-Security-Policy\" content=\"script-src https:\/\/cdn.x.com 'self' 'unsafe-eval' 'unsafe-inline';",
  13.                 "\t\tobject-src 'none';style-src https:\/\/cdn.x.com\/ 'self' 'unsafe-inline';\">",
  14.                 "\t<meta name=\"format-detection\" content=\"telephone=no\">",
  15.                 "\t<title>${1:title}$0<\/title>",
  16.             "<body>",
  17.             "</body>",
  18.             "</html>",
  19.         ],
  20.         "description": "Common X Snipnet"
  21.     }
  22. }

⚠️注意：我司标配安全头，所以会把用到的非本域名设置为例外访问，上文中的cdn.x.com即为打码版的域名。