开发日记——配置VSCode中的代码片段

[yoowinsu]

配置VSCode中的代码片段

现在Visual Studio Code（以下简称vscode）在前端已经成为了编辑器的不二之选，vscode之所以受欢迎，也是因为有许多方便程序员开发的功能和插件，生态完善，其中用户代码片段功能是非常不错的功能，能非常便捷的帮助开发者提高工作效率，真香警告。

打开方式

• 设置>>用户代码片段>>新建全局代码片段文件...
• Ctrl+Shift+P>>输入preferences>>新建全局代码片段文件...

这两种方式都可以新建一个全局代码片段文件，输入新建文件名称之后，文件打开默认是配置介绍和示例，如下：

{
    // Place your global 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"
    // }
}

配置

• scope

  使用场景限制。 若不配置此项，则适用于所有语言环境，若配置为"javascript,typescript"，即在javascript、typescript语言环境下才会有代码提示

• prefix

  代码片段的快捷单词。 在相应环境下输入即会有代码提示

• body

  代码主体。 其中， ${1}是指代码片段中的光标，括号里的数字就是按Tab键切换的光标顺序； ${2:this}是指光标处的默认内容是this； \\$是指代码片段中的特殊字符的转义，双斜杠是转义符，最终代码会呈现内容$； \t是指缩进符；

• description

  代码片段描述。 代码提示时出现的代码描述。

完。