语言配置

通过contributes.languages发布内容配置，你可以配置以下声明式语言特性：

  • 启用/关闭注释
  • 定义括号
  • 自动闭合符号
  • 自动环绕符号
  • 代码折叠
  • 单词匹配
  • 缩进规则

语言配置示例中配置JavaScript文件中的编辑功能。本篇指南会详细解释language-configuration.json中的内容：

!> 注意：如果你的语言配置文件以language-configuration.json结尾，那么VS Code会帮你添加代码补全和校验功能。

  1. {
  2.     "comments": {
  3.         "lineComment": "//",
  4.         "blockComment": ["/*", "*/"]
  5.     },
  6.     "brackets": [["{", "}"], ["[", "]"], ["(", ")"]],
  7.     "autoClosingPairs": [
  8.         { "open": "{", "close": "}" },
  9.         { "open": "[", "close": "]" },
  10.         { "open": "(", "close": ")" },
  11.         { "open": "'", "close": "'", "notIn": ["string", "comment"] },
  12.         { "open": "\"", "close": "\"", "notIn": ["string"] },
  13.         { "open": "`", "close": "`", "notIn": ["string", "comment"] },
  14.         { "open": "/**", "close": " */", "notIn": ["string"] }
  15.     ],
  16.     "autoCloseBefore": ";:.,=}])>` \n\t",
  17.     "surroundingPairs": [
  18.         ["{", "}"],
  19.         ["[", "]"],
  20.         ["(", ")"],
  21.         ["'", "'"],
  22.         ["\"", "\""],
  23.         ["`", "`"]
  24.     ],
  25.     "folding": {
  26.         "markers": {
  27.             "start": "^\\s*//\\s*#?region\\b",
  28.             "end": "^\\s*//\\s*#?endregion\\b"
  29.         }
  30.     },
  31.     "wordPattern": "(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\#\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\'\\\"\\,\\.\\<\\>\\/\\?\\s]+)",
  32.     "indentationRules": {
  33.         "increaseIndentPattern": "^((?!\\/\\/).)*(\\{[^}\"'`]*|\\([^)\"'`]*|\\[[^\\]\"'`]*)$",
  34.         "decreaseIndentPattern": "^((?!.*?\\/\\*).*\\*/)?\\s*[\\}\\]].*$"
  35.     }
  36. }

启用/关闭注释

VS Code提供了切换注释开关的命令：

  • Toggle Line Comment
  • Toggle Block Comment

分别来配置comments.lineComment控制块注释和comments.blockComment控制行注释。

  1. {
  2.     "comments": {
  3.         "lineComment": "//",
  4.         "blockComment": ["/*", "*/"]
  5.     }
  6. }

定义括号

你在VS Code中将鼠标移动到一个括号边上时，VS Code会自动高亮对应的括号。

  1. {
  2.     "brackets": [["{", "}"], ["[", "]"], ["(", ")"]]
  3. }

另外，当你运行Go to Bracket或Select to Bracket时，VS Code会自动使用你的定义找到最近、最匹配的括号。

自动闭合符号

当你输入'时，VS Code会自动帮你补全另一个单引号然后将光标放在引号中间，我们来看看是怎么做的：

  1. {
  2.     "autoClosingPairs": [
  3.         { "open": "{", "close": "}" },
  4.         { "open": "[", "close": "]" },
  5.         { "open": "(", "close": ")" },
  6.         { "open": "'", "close": "'", "notIn": ["string", "comment"] },
  7.         { "open": "\"", "close": "\"", "notIn": ["string"] },
  8.         { "open": "`", "close": "`", "notIn": ["string", "comment"] },
  9.         { "open": "/**", "close": " */", "notIn": ["string"] }
  10.     ]
  11. }

配置notIn键（key）可以在你需要的时候关闭这个功能。比如你在写下面的代码：

  1. // ES6's Template String
  2. `ES6's Template String`;

此时单引号就不会闭合。

用户可以使用editor.autoClosingQuotes和editor.autoClosingBrackets设置自动闭合符号的行为。

在XXX前闭合符号

如果符号的右边有空白，那么VS Code默认会启用符号闭合，所以当你在JSX代码中输入{时，符号并不会闭合：

  1. const Component = () =>
  2.   <div className={>
  3.                   ^ VS Code默认不会闭合此处的括号
  4.   </div>

但是你可以用下面的定义覆盖默认行为：

  1. {
  2.     "autoCloseBefore": ";:.,=}])>` \n\t"
  3. }

现在如果你在>前面输入{，VS Code会自动补全}。

自动环绕符号

当你选择了一堆文本然后输入左括号时，VS Code会对选中内容外围加上对应的括号。这个功能叫做自动环绕符号，你可以参考下面的代码指定这项功能：

  1. {
  2.     "surroundingPairs": [
  3.         ["{", "}"],
  4.         ["[", "]"],
  5.         ["(", ")"],
  6.         ["'", "'"],
  7.         ["\"", "\""],
  8.         ["`", "`"]
  9.     ]
  10. }

注意用户可以通过editor.autoSurround设置自动环绕符号的行为。

代码折叠

在VS Code中有三种代码折叠类型：

  • 缩进折叠：这是VS Code中默认的缩进行为，当两行内容有着相同的缩进级别时，你就可以看到折叠标记了。
  • 语言配置折叠：当VS Code发现folding.markers同时定义了start和end时，对应区域内就会出现折叠标记。下述配置会对//#region和//#endregionJSON区域创建代码折叠标记：
  1. {
  2.     "folding": {
  3.         "markers": {
  4.             "start": "^\\s*//\\s*#?region\\b",
  5.             "end": "^\\s*//\\s*#?endregion\\b"
  6.         }
  7.     }
  8. }
  • 语言服务器折叠：语言服务器获取到textDocument/foldingRange请求中的代码折叠列表数据，VS Code之后根据这份列表创建折叠标记。通过语言服务器协议学习更多关于程序性语言特性。

单词匹配

wordPattern定义了程序语言中单词单位。因此当你使用词语相关的命令，如：Move cursor to word start（Ctrl+Left）或者Move cursor to word end（Ctrl+Right）时，编辑器会根据正则寻找单词边界。

  1. {
  2.     "wordPattern": "(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\#\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\'\\\"\\,\\.\\<\\>\\/\\?\\s]+)"
  3. }

缩进规则

indentationRules定义了编辑器应该如何调整当前行或你粘贴、输入、移动的下一行缩进。

  1. {
  2.     "indentationRules": {
  3.         "increaseIndentPattern": "^((?!\\/\\/).)*(\\{[^}\"'`]*|\\([^)\"'`]*|\\[[^\\]\"'`]*)$",
  4.         "decreaseIndentPattern": "^((?!.*?\\/\\*).*\\*/)?\\s*[\\)\\}\\]].*$"
  5.     }
  6. }

比如，if (true) {匹配increasedIndentPattern，然后如果你在{后面按下Enter后，编辑器会自动缩进一次，你如代码看起来会像这样：

  1. if (true) {
  2.     console.log();

如果没有设置缩进规则，当行尾以开符号结尾时编辑器会左缩进，以闭合符号结尾时右缩进。这里的开闭符号由brackets定义。

注意editor.formatOnPaste是由DocumentRangeFormattingEditProvider控制，而不由自动缩进控制。