VS Code 插件开发中文文档

# 语言配置

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

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

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

注意

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

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

# 启用/关闭注释

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

  • Toggle Line Comment
  • Toggle Block Comment

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

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

# 定义括号

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

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

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

# 自动闭合符号

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

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

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

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

此时单引号就不会闭合。

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

# 在XXX前闭合符号

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

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

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

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

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

# 自动环绕符号

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

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

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

# 代码折叠

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

  • 缩进折叠：这是VS Code中默认的缩进行为，当两行内容有着相同的缩进级别时，你就可以看到折叠标记了。
  • 语言配置折叠：当VS Code发现folding.markers同时定义了start和end时，对应区域内就会出现折叠标记。下述配置会对//#region和//#endregionJSON区域创建代码折叠标记：
{
	"folding": {
		"markers": {
			"start": "^\\s*//\\s*#?region\\b",
			"end": "^\\s*//\\s*#?endregion\\b"
		}
	}
}
1
2
3
4
5
6
7
8

# 单词匹配

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

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

# 缩进规则

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

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

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

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

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

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

← 程序性语言特性 →