老是写重复代码？用一个实例教你如何使用 VSCode Snippets 解放生产力

VSCode 是微软旗下的一款开源的代码编辑器，深受广大开发者的喜爱。经过安装插件的方式，你能够在上面进行不同言语项目的开发，说是瑞士军刀其实也不为过，是不少开发者（指 Web 前端开发者）的主力开发工具。

其间，VSCode 的 Code Snippets 能够让你很方便地写出重复代码形式的模板，比方循环和条件语句。这儿的 Snippet 是片段的意思。假如你在工作中总是写一些和项目相关的重复代码片段，这篇文章一定要看完。

VS Code 内置的 snippets

VS Code 内置了一些言语的 snippets。比方在 JavaScript 文件中，输入 for 后挑选要运用的 snippet，按下回车键即可引进代码模板，然后再经过 tab 键跳转顺次选中一些变量名，手动修改为自己想要运用的变量名。

当然关于一些 VSCode 不支撑的言语或框架，比方 React 和 Vue，咱们能够在 VSCode 的插件商场找到一些高质量的 snippet。

一般来说，VSCode 内置和第三方商场的 snippets 关于日常开发现已够用了，但咱们常用的一些代码片段往往是项目特有的代码，这时候就要自己去写自定义的 snippets 了。

编写自己的 VSCode Snippets

下面经过我遇到的一个实践需求的完成来抛砖引玉，来教咱们怎样写个 snippets。

我的需求是，在 tsx 文件下输入 rfc (react-fun-component，React 函数组件) 时，能够生成下面的代码片段。这儿还有个小要求，这儿的函数名需求转化为 大驼峰风格。

import React, { FC } from 'react';
interface IProps {}
const LinkButton: FC<IProps> = (props) => {
  return (
    <div>
    </div>
  );
};
export default LinkButton;

第三方插件其实也有 React 函数组件的 snippets，比方 ES7 React/Redux/GraphQL/React-Native snippets 。但是有几个问题：

1. 代码风格和项目不一致。比方双引号还是单引号，是否加分号等，其实这点还好，咱们能够经过 ESLint 在文件保存时修正代码风格。
2. 需求辨认的前缀过于冗长。由于风格太多，相同的效果会有多种类似的写法，在 ES7 React/Redux/GraphQL/React-Native snippets 中， tsrfce (ts-react-fun-component-export) 代表声明一个普通函数组件类，并将其作为模块的默许导出。而 tsrafc (ts-react-arraw-fun-component) 代表声明一个箭头函数组件类，并作为命名导出（非默许导出）。此外还有一堆其他的前缀，用起来很容易选错，而一般咱们只会用其间的一种。假如用自己写的 snippet，咱们能够把前缀写的更短，且用户自定义的优先级比插件的要高，能更快找到你要是用 snippet。
3. 不行灵活。开发时的运用的操作系统一般为对文件名大小写不灵敏的 macOS 或 Windows 系统，假如你将一个 App.js 改名为 app.js，git 是辨认不了的，为了处理这个问题，有些项目可能会规定组件文件名用下划线的命名风格，但代码中的组件函数要保持推荐的大驼峰风格。第三方插件只会傻乎乎地原封不动运用文件名的风格，每次都要手动改成大驼峰风格我实在是受够了，事已至此，唯有自己写个能够转化风格的 snippet 了。

下面咱们开搞。

创立一个装备文件

咱们能够点击编辑器的左下角设置按钮，然后挑选 User Snippets ，挑选你要创立的 Snippets 类型。

这儿咱们能够挑选 snippets 的运用范围。

• 大局。大局的话会对每一个项目都运用。VSCode 会在大局的装备途径下创立装备文件，能够是不限定言语的 .code-snippets 后缀，也能够经过文件名 指定言语，如 c.json 表明该装备文件下的模板代码只会在 c 言语中收效。
• 项目。只在项目内有效。会在根目录下创立一个 .vscode 目录，并创立一个后缀名为 .code-snippets 的文件，不能像大局相同创立指定言语的文件。

字段说明

VSCode 会帮咱们创立一个默许的 snippet 文件，运用的是支撑注释的 JSON 语法。这儿面会供给一个做了注释的比方，咱们将其取消注释再改改就能用了。

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. 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": {
		"scope": "javascript,typescript",
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
}

先经过这个官方给出的简略比方，简略说说各种字段的意义。

• 最外层的 key （”Print to console”）代表的是 snippet 的姓名，起标识效果。
• scope 用于指定运用的言语。假如有多种言语，用逗号分隔。假如想要支撑所有言语，直接将这个字段省掉即可。
• prefix 则是触发智能提示的输入内容，能够看到，呈现同名的前缀 log 时，用户自定义的 snippet 在更前面的方位。
• body 则是模板代码内容，是个字符串数组，每个字符串代表一行代码。支撑 tab 键切换光标定位（$0,$1 等）、插入变量的写法（如 $TM_FILENAME_BASE 代表当时移除掉后缀的文件名）。
• description：snippet 的详细描述。body 里便是咱们的代码片段，每一个字符串代表一行。前面几行很简略，便是引进包（import），声明组件传参的类型。到后边第五行，就呈现一个比较杂乱的结构了。

完成

这儿咱们直接给出需求需完成的终究代码片段。

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. 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:
	"Custom React functional component": {
		"prefix": "rfc",
		"scope": "typescriptreact",
		"body": [
			"import React, { FC } from 'react';",
			"",
			"interface IProps {}",
			"",
			"const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}: FC<IProps> = (props) => {",
			"\treturn (",
			"\t\t<div>",
			"\t\t\t$0",
			"\t\t</div>",
			"\t);",
			"};",
			"",
			"export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};"
		],
		"description": "React Functional Component"
	}
}

body 里便是咱们的代码片段，每一个字符串代表一行。前面几行很简略，便是引进包（import），声明组件传参的类型。到后边第五行，就呈现一个比较杂乱的结构了。

变量和对变量做正则转化

这儿呈现了一个名为 变量 的概念。变量大致能够分为几个大类：

• 文件信息变量：从咱们地点文件的上下文得到的。比方 TM_SELECTED_TEXT 表明选中的内容。
• 时刻变量。比方 CURRENT_YEAR 代表当时时刻。
• 随机数。比方 RANDOM 表明长度为 6 的 10 进制随机数字符串
• 注释块。比方 LINE_COMMENT 表明行注释。

下面咱们对${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} 结构进行分析。这是对特定的变量做正则处理，格局为：

${变量/正则表达式/替换内容}

• TM_FILENAME_BASE 是咱们正在编辑的文件的文件名，不包括后缀名。
• (.*) 。这是一个正则表达式，表明匹配整个变量字符串，且用圆括号指定了捕获组，所以在这儿，$1 表明整一个完好的字符串。
• ${1:/pascalcase} 对 $1 运用 pascalcase 办法，将其转化为大驼峰风格。

假如你熟悉 JavaScript 的话，大概等价于：

TM_FILENAME_BASE.replace(/(.*)/, (match, $1) => {
	return pascalcase($1); //pascalcase办法由 VSCode 供给
})

咱们继续。\t 则代表制表符。实践会转化为什么，就看你对编辑器做的设置了，比方它可能是 4 个空格或真的制表符。

$0 则是光标最后逗留的方位，官方称之为 Tabstops。VSCode 会在代码片段中，经过按下 tab 键，咱们能够不断地从 $1 递增定位光标方位。当都找完了，假如还设置了 $0，光标就会跑到 $0 的方位上。

至此，咱们的需求便完成了，并不杂乱。咱们看看终究效果：

结语

VSCode Snippet 能够有效地处理咱们重复写相同项目代码的功率问题，期望本文能够起抛砖引玉的效果，带咱们简略入门，能够写一些简略的 snippet。假如想要完成更杂乱的需求，能够前往查阅 VSCode 更详尽的官方文档。

假如你感兴趣的话，能够尝试完成文章最初的 for 语句 snippet 来练手，并在留言区进行评论。

欢迎重视我的大众号：前端西瓜哥。第一时刻了解前沿职业音讯、共享深度技能干货、获取优质学习资源