VSCode 快捷代码片段：提升前端开发效率的必备技巧

发表于 更新于 分类于 阅读次数：

前言

在前端开发中，尤其是使用 Vue 或者 React 框架时，我们经常需要新建页面，并且编写一些重复性很高的代码片段。本文将介绍如何利用 VSCode 内置的代码片段功能，快速生成这些重复且繁琐的代码。

VSCode 内置的 snippets

VSCode 内置了一些常用语言的 snippets。例如，在 JavaScript 文件中，输入 for 并选择相应的 snippet，按下回车键即可引入代码模板，然后通过 tab 键依次跳转并修改变量名。当然，你也可以在插件市场中搜索并安装一些符合你开发框架的高评分插件。

自定义 snippets

下面通过一个实际需求的例子，介绍如何编写自定义 snippets。

我们可以点击编辑器的左下角设置按钮，选择 User Snippets <用户代码片段>，然后选择你要创建的 Snippets 类型。

选择 snippets 的应用范围

  • ​全局​：全局 snippets 会对所有项目生效。VSCode 会在全局配置路径下创建配置文件，可以是不限定语言的 .code-snippets 后缀文件，也可以通过文件名 ​指定语言​，如 c.json 表示该配置文件只会在 C 语言中生效。
  • ​项目​：项目级 snippets 只在当前项目内有效。会在项目根目录下创建一个 .vscode 目录，并创建一个 .code-snippets 文件，不能像全局一样创建指定语言的文件。

在本文中，我们选择新建全局的代码片段，命名为 react.json，然后输入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
json复制代码
{
	"Custom React function component": {
		"scope": "typescriptreact",
		"prefix": "tsrafc",
		"body": [
			"type Props = {}",
			"",
			"const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = (props: Props) => {",
			"\\treturn (",
			"\\t\\t<div>",
			"\\t\\t\\t$0",
			"\\t\\t</div>",
			"\\t);",
			"};",
			"",
			"export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};"
		],
		"description": "React function component template"
	}
}

字段解释

  1. ​snippet 名称​：最外层的 key（”Custom React function component”）代表 snippet 的名字，用于标识和查找。
  2. ​scope​：用于指定应用的语言。如果有多种语言，用逗号分隔。如果想要支持所有语言，可以省略此字段。
  3. ​prefix​：触发智能提示的输入内容。例如，输入 tsrafc 后会出现该 snippet 提示。
  4. ​body​：模板代码内容，是一个字符串数组，每个字符串代表一行代码。支持 tab 键切换光标位置（如 $1, $2）和变量插入（如 ${TM_FILENAME_BASE}）。
  5. ​description​：snippet 的详细描述。

变量和正则转换

在 body 部分，我们使用了 ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} 来将文件名转换为大驼峰风格。这是对变量进行正则处理，格式如下：

1
2
bash复制代码
${变量/正则表达式/替换内容}
  • TM_FILENAME_BASE 表示当前文件名，不包含后缀名。
  • (.*) 是一个正则表达式，表示匹配整个文件名。
  • ${1:/pascalcase} 将匹配的内容转换为大驼峰风格。

如果你熟悉 JavaScript，大致等同于：

1
2
3
4
javascript复制代码;
TM_FILENAME_BASE.replace(/(.*)/, (match, $1) => {
  return pascalcase($1); // pascalcase 方法由 VSCode 提供
});

实际操作示例

  1. 创建一个新的 TypeScript React 组件文件，例如 myComponent.tsx。
  2. 在文件中输入 tsrafc 并按下回车键，VSCode 会自动插入模板代码。
  3. 根据需要修改组件内容。

总结

通过自定义 snippets，我们可以极大地提高开发效率，减少重复劳动。希望本文能帮助你更好地利用 VSCode 的代码片段功能。