欢迎访问悦橙教程(wld5.com),关注java教程。悦橙教程  java问答|  每日更新
页面导航 : > > > 文章正文

[VS Code]跟我一起在Visual Studio Code 添加自定义snippet(代码段),附详细配置,studiosnippet

来源: javaer 分享于  点击 91 次 点评:212

[VS Code]跟我一起在Visual Studio Code 添加自定义snippet(代码段),附详细配置,studiosnippet


Add code snippets for CLANG in VS Code

日志


前记:今天试着用了下 Atom,发现 Atom 居然预装了 CLANG 的 snippets,而且远比 VSCode 的已有拓展「C/C++ Snippets」中的丰富!身为 VSCode 的死忠粉,我决定立马把 Atom 的 C snippets 搬到 VSCode 上来。


  • Add code snippets for CLANG in VS Code
    • 1. snippet 简介
    • 2. snippet 配置流程
    • 3. snippet 详细介绍
      • 3.1 引子
      • 3.2 语法结构
      • 3.3 Body - 基本用法
      • 3.4 Body - 高级语法
        • 3.4.1 变量转换
          • 3.4.1.1 语法结构
          • 3.4.1.2 format_string 部分
          • 3.4.1.3 案例分析
        • 3.4.2 占位符转换
          • 3.4.2.1 语法结构
          • 3.4.2.2 案例分析
      • 3.5 语法定义
    • 4. 一些建议
    • 附录

既然你点开了这个页面,那就说明要么你不知道 VSCode 上已有拓展「C/C++ Snippets」,要么你对这个拓展不甚满意。对于后者,本文将为你介绍如何在 VSCode 上设置 snippets,并为你提供一套可以直接用的 C 语言 snippets。

1. snippet 简介

snippet[ˈsnɪpɪt],或者说「code snippet」,也即代码段,指的是能够帮助输入重复代码模式,比如循环或条件语句,的模板。通过 snippet ,我们仅仅输入一小段字符串,就可以在代码段引擎的帮助下,生成预定义的模板代码,接着我们还可以通过在预定义的光标位置之间跳转,来快速补全模板。

当然,看图更易懂。下图将 aja 补全为 JQuery 的 ajax() 方法,并通过光标的跳转,快速补全了待填键值对:

2. snippet 配置流程

  • 进入 snippet 设置文件,这里提供了三种方法:
    • 通过快捷键「Ctrl + Shift + P」打开命令窗口(All Command Window),输入「snippet」,点选「首选项:配置用户代码段片段」;
    • 点击界面最左侧竖栏(也即活动栏)最下方的齿轮按钮,在弹出来的菜单中点选「用户代码片段」;
    • 按下「Alt」键切换菜单栏,通过文件 > 首选项 > 用户代码片段;
  • 填写 snippets

3. snippet 详细介绍

3.1 引子

设置文件头部的一个块注释给出了设置 snippet 的格式,了解过「json」就不会对此感到奇怪。

 // Place your snippets for C 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"
}

上例定义了一个名为「Print to console」的 snippet,其功能为:在输入 log 并确认后,可将原文本替换为console.log('');。效果预览如下:

3.2 语法结构

然而引子中只是最简单的功能,而 VSCode 的代码段引擎所能做的远不止这些。本文将以官方教程1为本,对其进行详实地阐述。

snippet 由三部分组成:

Snippet 的三个部分目前只有主体部分支持丰富的特性。接下来整篇文章都是拿来介绍主体部分的。主体部分的介绍将分为两部分:较为直接的基础用法,及结合正则表达式的高级用法。

3.3 Body - 基本用法

主体部分可以使用特殊语法结构,来控制光标和要插入的文本,其支持的基本结构如下:

  • Tabstops:制表符

    用「Tabstops」可以让编辑器的指针在 snippet 内跳转。使用 $1$2 等指定光标位置。这些数字指定了光标跳转的顺序。特别地,$0表示最终光标位置。相同序号的「Tabstops」被链接在一起,将会同步更新,比如下列用于生成头文件封装的 snippet 被替换到编辑器上时,光标就将同时出现在所有$1位置。

    "#ifndef $1"
    "#define $1"
    "#end // $1"
  • Placeholders:占位符

    「Placeholder」是带有默认值的「Tabstops」,如${1:foo}。「placeholder」文本将被插入「Tabstops」位置,并在跳转时被全选,以方便修改。占位符还可以嵌套,例如${1:another ${2:placeholder}}

    比如,结构体的 snippet 主体可以这样写:

    struct ${1:name_t} {\n\t$2\n};

    作为「Placeholder」的name_t一方面可以提供默认的结构名称,另一方面可以作为输入的提示。

  • Choice:可选项

    「Choice」是提供可选值的「Placeholder」。其语法为一系列用逗号隔开,并最终被两个竖线圈起来的枚举值,比如 ${1|one,two,three|}。当光标跳转到该位置的时候,用户将会被提供多个值(one 或 two 或 three)以供选择。

  • Variables:变量

    使用$name${name:default}可以插入变量的值。当变量未赋值时(如),将插入其缺省值或空字符串。 当varibale未知(即,其名称未定义)时,将插入变量的名称,并将其转换为「Placeholder」。可以使用的「Variable」如下:

    • TM_SELECTED_TEXT:当前选定的文本或空字符串;
      注:选定后通过在命令窗口点选「插入代码片段」插入。
    • TM_CURRENT_LINE:当前行的内容;
    • TM_CURRENT_WORD:光标所处单词或空字符串
      注:所谓光标一般为文本输入处那条闪来闪去的竖线,该项可定制。单词使用 VSCode 选词(Word Wrap)器选择。你最好只用它选择英文单词,因为这个选择器明显没有针对宽字符优化过,它甚至无法识别宽字符的标点符号。
    • TM_LINE_INDEX:行号(从零开始);
    • TM_LINE_NUMBER:行号(从一开始);
    • TM_FILENAME:当前文档的文件名;
    • TM_FILENAME_BASE:当前文档的文件名(不含后缀名);
    • TM_DIRECTORY:当前文档所在目录;
    • TM_FILEPATH:当前文档的完整文件路径;
    • CLIPBOARD:当前剪贴板中内容。

    此外,还有一些用于插入当前时间的变量,这里单独列出:

    • CURRENT_YEAR: 当前年份;
    • CURRENT_YEAR_SHORT: 当前年份的后两位;
    • CURRENT_MONTH: 格式化为两位数字的当前月份,如 02;
    • CURRENT_MONTH_NAME: 当前月份的全称,如 July;
    • CURRENT_MONTH_NAME_SHORT: 当前月份的简称,如 Jul;
    • CURRENT_DATE: 当天月份第几天;
    • CURRENT_DAY_NAME: 当天周几,如 Monday;
    • CURRENT_DAY_NAME_SHORT: 当天周几的简称,如 Mon;
    • CURRENT_HOUR: 当前小时(24 小时制);
    • CURRENT_MINUTE: 当前分钟;
    • CURRENT_SECOND: 当前秒数。

    注:这些都是变量名,不是宏,在实际使用的时要加上 $ 符。

3.4 Body - 高级语法

3.4.1 变量转换

变量转换可将变量的值格式化处理后插入预定的位置。

3.4.1.1 语法结构

我们可以通过 ${var_name/regular_expression/format_string/options} 插入格式化后的代码段。显然,「variable transformations」由 4 部分构成:

其中正则表达式的写法和匹配选项部分不在本篇博文的讲解范围之内,具体内容请分别参考 javascript 有关 RegExp(pattern [, flags]) 构造函数中的 patternflags 参数项的说明2。

本文只对 format_string 部分进行详细介绍。

3.4.1.2 format_string 部分

根据其 EBNF 范式,我们可以知道 format_string 其实是 formattext线性组合

  • text:也即没有任何作用的普通文本,你甚至可以使用汉字;
  • format:格式串,分为 7 种:
    • $sn:表示插入匹配项;
    • ${sn}:同 $sn
    • ${sn:/upcase}${sn:/downcase}${sn:/capitalize}:表示将匹配项变更为「所有字母均大写/所有字母均小写/首字母大写其余小写」后,插入;
    • ${sn:+if}:表示当匹配成功时,并且捕捉括号捕捉特定序号的捕捉项成功时,在捕捉项位置插入「if」所述语句;
    • ${sn:?if:else}:表示当匹配成功,并且捕捉括号捕捉特定序号的捕捉项成功时,在捕捉项位置插入「if」所述语句;否则当匹配成功,但当捕捉括号捕捉特定序号的捕捉项失败时,在捕捉项位置插入「else」所述语句;
    • ${sn:-else}:表示当匹配成功,但当捕捉括号捕捉特定序号的捕捉项失败时,在捕捉项位置插入「else」所述语句;
    • ${sn:else}:同 ${sn:-else}

format 的后三条理解起来可能比较困难。这里我们以倒数第三条为例进行说明。假设我们有一个「make.c」文件,我们有这么一条 snippet: "body": "${TM_FILENAME/make.c(pp|\+\+)?/${1:?c++:clang}/}"。整个模式串匹配成功,但是捕捉括号捕捉后缀名中的 pp 或 ++ 失败,因此判断条件在捕捉括号的位置插入捕捉失败时应插入的字符串,也即「clang」。

  • 其中 sn 表示捕捉项的序号
  • 其中 if 表示捕捉项捕捉成功时替换的文本
  • 其中 else 表示捕捉项捕失败时替换的文本
3.4.1.3 案例分析

下面笔者再介绍一个简单的例子,帮助大家理解「variable transformations」。

假设有一个名为「make.c」的文件中,并且我们已经定义如下 snippet。

"#ifndef HEADER … #define … #endif":{
"prefix": "defheader",
"body": "#ifndef ${1:${TM_FILENAME/(.*)\\.C$/${1:/upcase}_H/i}} \n#define $1 \n${2:header content}\n#endif\t// $1"
}

这段 snippet 将生成下图所示代码:

其中最复杂的模式为:${1:${TM_FILENAME/(.*)\\.C$/${1:/upcase}_H/i}},我们将之拆解为如下五部分:
1. ${1:...}:嵌套的 placeholder
1. ${TM_FILENAM/.../.../.}:「variable transformations」中的「var_name」,表示带后缀的文件名;
1. ${.../(.*)\\.C$/.../.}:「variable transformations」中的「regular_expression」,表示匹配任意以「.C」为后缀的字符串;
1. ${.../.../${1:/upcase}_H/.}}:「variable transformations」中的「options」,表示将第一个捕捉项替换为大写的,并添加「_H」的后缀;
1. ${.../.../.../i}:「variable transformations」中的「options」,表示无视大小写。

3.4.2 占位符转换

3.4.2.1 语法结构

我们可以通过 ${int/regular_expression/format_string/options} 插入格式化后的代码段。显然,与变量转换,「placeholder transformations」也由 4 部分构成:

上述全部内容我们都在前文介绍过了,因此此处不做赘述。我们唯一需要关注的是转换触发的时机:占位符转换将在进行占位符跳转(假设 1→2)的时候自动适用到当前占位符(1)。

3.4.2.2 案例分析

假设我们已经这样的 Snippet:

"HelloWorld": {
  "prefix": "say_hello",
  "body": "${1} ${2} -> ${1/Hello/Hallo/} ${2/World/Welt/}"
}

那么我们在两个制表位同时键入 Hello 并跳转的时候,第一个制表位依然保持 Hello 不变,而第二个制表位(占位符)被替换为 Hallo。键入 Welt 亦然。效果图:

3.5 语法定义

官网给出了 snippet 的 EBNF 范式的正则文法,注意,作普通字符使用时,$ , }\ 可使用 \(反斜杠)转义。

any         ::= tabstop | placeholder | choice | variable | text
tabstop     ::= '$' int
                | '${' int '}'
                | '${' int  transform '}'
placeholder ::= '${' int ':' any '}'
choice      ::= '${' int '|' text (',' text)* '|}'
variable    ::= '$' var | '${' var '}'
                | '${' var ':' any '}'
                | '${' var transform '}'
transform   ::= '/' regex '/' (format | text)+ '/' options
format      ::= '$' int | '${' int '}'
                | '${' int ':' '/upcase' | '/downcase' | '/capitalize' '}'
                | '${' int ':+' if '}'
                | '${' int ':?' if ':' else '}'
                | '${' int ':-' else '}' | '${' int ':' else '}'
regex       ::= JavaScript Regular Expression value (ctor-string)
options     ::= JavaScript Regular Expression option (ctor-options)
var         ::= [_a-zA-Z] [_a-zA-Z0-9]*
int         ::= [0-9]+
text        ::= .*

4. 一些建议

默认情况下 snippet 在 IntelliSense 中的显示优先级并不高,而且在 IntelliSense 中选择相应 snippet 需要按「enter」键,这对于手指短的人来说并不是什么很好的体验。

所幸,VSCode 意识到了这一点,并为我们提供了改进的方式。我们可以在 VSCode 的用户设置(「Ctrl+P」在输入框中写「user settings」后点选)中,检索代码段,然后根据提示修改代码段的相关设置。

我们可以设置在 IntelliSense 中优先显示代码段,并可以通过「TAB」补全。

修改后设置文件中会多出这两行:

"editor.snippetSuggestions": "top",
"editor.tabCompletion": true

附录

说好的附录。

另,我对 Atom 的 C snippet3 作了部分修改,使之更适合我的习惯,若有兴致你可自行修改,反正也不难。

{
/*
     // Place your snippets for C 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"
    }
*/
  "#ifndef … #define … #endif":{
    "prefix": "def",
    "body": "#ifndef ${1:SYMBOL}\n#define $1 ${2:value}\n#endif\t// ${1:SYMBOL}"
  },
  "#include <>":{
    "prefix": "Inc",
    "body": "#include <${1:.h}>"
  },
  "#include \"\"":{
    "prefix": "inc",
    "body": "#include \"${1:.h}\""
  },
  "#pragma mark":{
    "prefix": "mark",
    "body": "#if 0\n${1:#pragma mark -\n}#pragma mark $2\n#endif\n\n$0"
  },
  "main()":{
    "prefix": "main",
    "body": "int main(int argc, char const *argv[]) {\n\t$1\n\treturn 0;\n}"
  },
  "For Loop":{
    "prefix": "for",
    "body": "for (${1:i} = 0; ${1:i} < ${2:count}; ${1:i}${3:++}) {\n\t$4\n}"
  },
  "Define and For Loop":{
    "prefix": "dfor",
    "body": "size_t ${1:i};\nfor (${1:i} = ${2:0}; ${1:i} < ${3:count}; ${1:i}${4:++}) {\n\t$5\n}"
  },

  "Header Include-Guard":{
    "prefix": "once",
    "body": "#ifndef ${1:SYMBOL}\n#define $1\n\n${2}\n\n#endif /* end of include guard: $1 */\n"
  },
  "Typedef":{
    "prefix": "td",
    "body": "typedef ${1:int} ${2:MyCustomType};"
  },
  "Typedef Struct":{
    "prefix": "tst",
    "body": "typedef struct ${1:StructName} {\n\t$2\n}${3:MyCustomType};"
  },
  "Do While Loop":{
    "prefix": "do",
    "body": "do {\n\t$0\n} while($1);"
  },
  "While Loop":{
    "prefix": "while",
    "body": "while ($1) {\n\t$2\n}"
  },
  "fprintf":{
    "prefix": "fprintf",
    "body": "fprintf(${1:stderr}, \"${2:%s}\\\\n\", $3);$4"
  },
  "If Condition":{
    "prefix": "if",
    "body": "if ($1) {\n\t$2\n}"
  },
  "If Else":{
    "prefix": "ife",
    "body": "if ($1) {\n\t$2\n} else {\n\t$3\n}"
  },
  "If ElseIf":{
    "prefix": "iff",
    "body": "if ($1) {\n\t$2\n} else if ($3) {\n\t$4\n}"
  },
  "If ElseIf Else":{
    "prefix": "iffe",
    "body": "if ($1) {\n\t$2\n} else if ($3) {\n\t$4\n} else {\n\t$5\n}"
  },
  "Switch Statement":{
    "prefix": "sw",
    "body": "switch ($1) {\n$2default:\n\t${3:break;}\n}$0"
  },
  "case break":{
    "prefix": "cs",
    "body": "case $1:\n\t$2\n\tbreak;\n$0"
  },
  "printf":{
    "prefix": "printf",
    "body": "printf(\"${1:%s }\\n\", $2);$3"
  },
  "scanf":{
    "prefix": "scanf",
    "body": "scanf(\"${1:%s}\\n\", $2);$3"
  },
  "Struct":{
    "prefix": "st",
    "body": "struct ${1:name_t} {\n\t$2\n};"
  },
  "void":{
    "prefix": "void",
    "body": "void ${1:name}($2) {\n\t$3\n}"
  },
  "any function":{
    "prefix": "func",
    "body": "${1:int} ${2:name}($3) {\n\t$5\n\treturn ${4:0};\n}"
  },
  "write file":{
    "prefix": "wf",
    "body": "FILE *${1:fp};\n${1:fp} = fopen (\"${2:filename.txt}\",\"w\");\nif (${1:fp}!=NULL)\n{\n\tfprintf(${1:fp},\"${3:Some String\\\\n}\");\n\tfclose (${1:fp});\n}"
  },
  "read file":{
    "prefix": "rf",
    "body": "FILE *${1:fp};\n${1:fp} = fopen (\"${2:filename.txt}\",\"r\");\nif (${1:fp}!=NULL)\n{\n\tfscanf(${1:fp},\"${3:Some String\\\\n}\", ${3:&var});\n\tfclose (${1:fp});\n}",
    "description": "read file opeartion including fopen, fscanf and fclose."
  }
}

相关文章

    暂无相关文章

用户点评