vscode 自定义代码补全

有时候有些代码总是重复输入，但是没有自动补全，总是重复书写很头疼，特别是路径。

错一个字就error

所以我们可以使用编辑器的自定义代码补全功能，省去了大把时间。

教程

文件 --- 首选项 --- 用户片段 --- 这里我们可以创建全局的，或者基于当前项目的代码提示 --- 我这里选择全局

选择全局后会进入一个json文件，这里就不多解释了，直接上代码

{
  // 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"
  // }
  "set components": {
    "prefix": "$cp",
    "body": [
      "\"@/components/\"$0"
    ],
    "description": "src目录下的components目录"
  },
  "set assets": {
    "prefix": "$as",
    "body": [
      "\"@/assets/\"$0"
    ],
    "description": "src目录下的assets目录"
  },
  "set utils": {
    "prefix": "$ut",
    "body": [
      "\"@/utils/\"$0"
    ],
    "description": "src目录下的utils目录工具"
  },
}

这里我根据常用的路径定制了三个，都是vue cli常用的。

set components这个东西自己随便取名，就是个名称而已

prefix表示你要提示的关键词，比如我输入 $cp 他就会提示补全代码

body为内容，是一个数组，一个值表示一行，两行就两个值：[1,2]

$0表示光标的位置，一般就跟在最后一个值得后面就行，如果你想换行，那就在数组里面单独一个值存放

description就是提示信息了，自己写。

以上就是自定义代码补全了，有兴趣可以自己再深入挖掘