vscode内关于vue的代码片段分享

闲言碎语不要讲，咱们直接上干货

配置vscode代码片段

vue.json

打开vue.json文件后，将原代码替换为以下代码

{
  // 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"
  // },
  "Vue Javascript Template": {
    "prefix": "vueJavascriptTemplate",
    "body": [
      "<template>\n\t<div>\n\n\t</div>\n</template>\n",
      "<script>\nexport default {\n\tname: '$0',\n\tcomponents: {\n\n\t},\n\tdata() {\n\t\treturn {\n\n\t\t};\n\t},\n\tmethods: {\n\n\t}\n};\n</script>\n",
      "<style lang=\"stylus\" scoped>\n\n</style>"
    ],
    "description": "生成vue初始化文件"
  },
  "Vue Typescript Template": {
    "prefix": "vueTypescriptTemplate",
    "body": [
      "<template>\n\t<div></div>\n</template>\n",
      "<script lang=\"ts\">\nimport { Component, Vue } from 'vue-property-decorator';\n\n@Component\nexport default class ${1:ClassName} extends Vue {$0}\n</script>\n",
      "<style lang=\"stylus\" scoped></style>\n"
    ],
    "description": "生成vue初始化基于Typescript的文件"
  }
}

使用

生成普通 vue 文件

随便找个或者创建一个vue文件，在其中输入 vueJ 即可

按键盘上、下箭头键，使 vueJavascriptTemplage 处于选中状态，然后回车即可。

生成基于 typescript 的 vue 文件

随便找个或者创建一个vue文件，在其中输入 vueT 即可

按键盘上、下箭头键，使 vueTypescriptTemplage 处于选中状态，然后回车即可。

工作区配置

{
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,

        "node_modules": true,
        ".gitignore": true,
        "babel.config.js": true,
        "cypress.json": true,
        "package-lock.json": true,
        "tsconfig.json": true,
        "**/shims*": true,
        "**/register**": true,

        "public": true,
        "tests": true,
    }
}