简介
Visual Studio Code 是一个非常流行的开发环境，功能强大，支持插件扩展，通过插件可以增强编辑器的功能，其中之一就是自定义代码段。自定义代码段可以帮助我们提高生产效率，尤其是在重复性的工作中，可以极大地节省时间。本文将介绍如何在 Visual Studio Code 中自定义代码段。
步骤
1. 打开 Visual Studio Code
首先，我们需要在电脑上安装 Visual Studio Code 编辑器，并打开它。
2. 进入 JavaScript 语言模式
为了添加 JavaScript 代码段，需要进入 JavaScript 语言模式。可以在编辑器左下角的语言模式指示器中看到当前使用的语言模式。如果没有，可以通过单击右下角的文档编辑器来打开语言模式选择菜单。
JavaScript
{
"$schema": "https://json.schemastore.org/syntaxes.json",
"name": "JavaScript",
"scopeName": "source.js",
"fileTypes": [
"js",
"mjs",
"cjs"
],
"patterns": [
{
"include": "#comments"
}
],
"repository": {
"comments": {
"patterns": [
{
"begin": "/\\*\\*",
"beginCaptures": {
"0": {
"name": "punctuation.definition.comment.js"
}
},
"end": "\\*/",
"endCaptures": {
"0": {
"name": "punctuation.definition.comment.js"
}
},
"contents": [
{
"include": "#jsdoc"
}
],
"name": "comment.block.documentation.js"
},
{
"begin": "/\\*",
"beginCaptures": {
"0": {
"name": "punctuation.definition.comment.js"
}
},
"end": "\\*/",
"endCaptures": {
"0": {
"name": "punctuation.definition.comment.js"
}
},
"name": "comment.block.js"
},
{
"begin": "//",
"beginCaptures": {
"0": {
"name": "punctuation.definition.comment.js"
}
},
"end": "$",
"name": "comment.line.double-slash.js"
}
],
"name": "comment.block.js"
},
"jsdoc": {
"patterns": [
{
"begin": "\\s+(?=(?:@param|@property|@returns)\\b)",
"beginCaptures": {
"0": {
"name": "meta.documentation.js"
}
},
"patterns": [
{
"begin": "\\*?\\s*@(?:param|property|returns)(?::|\\b)",
"beginCaptures": {
"0": {
"name": "keyword.other.documentation.js"
}
},
"end": "(?:\\s|$)",
"patterns": [
{
"match": "([{}\\w\\[\\]=\\-\\|\\/.]+(,\\s*[{}\\w\\[\\]=\\-\\|\\/.]+)*)",
"name": "variable.parameter.documentation.js"
},
{
"match": "\\s*-\\s+",
"name": "keyword.other.documentation.js"
},
{
"match": "(.*)(?=@|$)",
"name": "comment.line.double-slash.js"
}
],
"name": "meta.documentation.tag.jsdoc.js",
"endCaptures": {
"0": {
"name": "meta.documentation.js"
}
}
}
],
"end": "(?!\\s)",
"endCaptures": {
"0": {
"name": "meta.documentation.js"
}
},
"name": "meta.jsdoc.js"
}
],
"name": "comment.block.documentation.js"
}
},
"uuid": "bce7c1c2-7f6c-42e5-93fe-3d191c1245d6"
}
3. 打开用户代码段文件
用户代码段文件包含按语言分类的所有代码段。我们可以使用顶部菜单栏中的 文件 > 首选项 > 用户代码段 命令打开它。
{
// 可以在此处定义全局代码段
"javascript": {
"log": {
"prefix": "log",
"body": [
"console.log(${1})"
],
"description": "添加一个 console.log 语句"
},
"promise": {
"prefix": "promise",
"body": [
"new Promise((resolve, reject) => {",
"\t$0",
"})"
],
"description": "创建一个 Promise 对象"
}
}
// 可以在此处定义其他语言的代码段
}
4. 添加代码段
在打开的用户代码段文件中，您会看到一些可能已经存在的语言特定代码段。在 JavaScript 代码段下方添加一个新的代码段，示例如下。
"javascript": {
"log": {
"prefix": "log",
"body": [
"console.log(${1})"
],
"description": "添加一个 console.log 语句"
},
"promise": {
"prefix": "promise",
"body": [
"new Promise((resolve, reject) => {",
"\t$0",
"})"
],
"description": "创建一个 Promise 对象"
},
"ajax": {
"prefix": "ajax",
"body": [
"const xhr = new XMLHttpRequest();",
"xhr.open(${1:method}, '${2:url}');",
"xhr.onload = function() {",
"\tif (xhr.status === 200) {",
"\t\tconst response = JSON.parse(xhr.responseText);",
"\t\t$3",
"\t} else {",
"\t\t$4",
"\t}",
"};",
"xhr.onerror = function() {",
"\t$5",
"};",
"xhr.send()"
],
"description": "创建一个 Ajax 请求"
}
}
该代码段添加了一个名为 ajax 的 Ajax 请求代码段。在使用此代码段时，可以通过输入 ajax 来打出该代码段。代码段模板包括一些参数占位符，例如 method（HTTP 方法：GET、POST、PUT 等）、url（请求的 URL）、对返回结果进行处理的 response 回调等。
5. 使用您的新代码段
代码段现在可以在您的编辑器中使用了。打开 JavaScript 文件，输入 ajax。按 Tab 键或 Enter 键。这时您会看到自动生成的代码段。已经为您提供了一些输入字段，您可以在其中编辑常见的 Ajax 请求选项，例如 URL 和 HTTP 方法。
const xhr = new XMLHttpRequest();
xhr.open(method, 'url');
xhr.onload = function() {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
// 处理响应数据
} else {
// 处理错误
}
};
xhr.onerror = function() {
// 处理错误
};
xhr.send()
总结
现在您已经学会了如何在 Visual Studio Code 中自定义代码段。自定义代码段可以使您更快地编写代码，但是并不止于此。您还可以根据需要创建更多代码段，或者修改现有的代码段模板以匹配您的框架、库或常用模式。