木灵鱼儿

木灵鱼儿

阅读:1183

最后更新:2020/10/30/ 17:23:42

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就是提示信息了,自己写。

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

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1183

相关文章

目录树