vsCode代码片段配置（我来负责写，你能负责用吗？）

前端开发江鸟
3,597 阅读8分钟

1. 什么是代码片段

先来一个上头的官方解释

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.

我们亲爱的谷歌翻译，机翻过来就是

代码片段是使输入重复代码模式（例如循环或条件语句）更容易的模板。

我想了很久，感觉这句话没有毛病

理解一下的话，代码片段就像是一段代码的快捷方式，我们可以设置一个特定字符，来根据这个特定字段，触发一个代码模板

2. 为什么用代码片段

这个还用讲吗，当然是方便了（可复用）主要是偷懒、摸鱼

描述这样一个场景，在日常开发中，你有大量的复写代码，且格式差不多，这个时候你会怎么办呢？

会有人说 ，我只能说，是条汉子

但如果你了解了代码片段，你一定会直呼：真香。

在你拥有了代码片段之后，你可以每次在写代码的时候，只用打下你所规定的字符，然后你的一段代码就会出现在你的编辑器上，可能是一个字符，想怎么定义都可以，这么一想，是不是非常之爽！！！

3. 怎么使用

知道了代码片段是什么，并且被它的魅力（可以偷懒）吸引后，一定想知道怎么快速配置了吧。

3.1 找到对应的文件

可以使用 shift + command + p 并搜索“代码片段”关键字来呼唤出我们的创建代码片段的文件窗口

图片1

然后小手一点，可以看到

图片2

3.2 创建你想要的代码片段类型

通过图片2，我们可以清楚的看到，代码片段可以有

  1. 全局代码片段文件
  2. 当前项目文件夹下的代码片段文件
  3. 相应语言的代码片段（我试了一下，也是作用于全局，名字都不用自己起的）

简单介绍一下区别：

  • 全局代码片段文件

我们可以看下创建文件的目录，直接就可以判断出，作用于当前计算机下的

  • 当前文件夹下

顾名思义，在哪个项目创建，就作用于哪个项目

  • 相应语言的代码片段

可以和全局代码片段文件，相比较一下，可以看出也是作用于全局的，只不过这种特定语言的代码片段仅仅局限于你所选择的语言，且该语言没有scope属性，这类文件不需要我们自己命名，它默认以语言名来命名。

3.3 代码片段具体配置

这里，我们以项目下的代码片段为例，别的差不多（对应语言没有scope属性，上文有提到，这里不再说明）

我们在创建完项目下的代码片段后，会看到这样一个页面

图片3

虽然英文很长，但我们不难看出，这是一个解释说明，告诉我们怎么配置，看完之后，有种

此表情可以表达我此刻的心情，非常的快乐（有点想飙出我美丽的🇨🇳话）

好在，下面的Example，还是可以看的，我们通过对代码的一通分析，

	"Print to console": {
		"scope": "javascript,typescript",
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}

我们可以简单看出来几个关键词，

scope : 作用的语言

prefix：代码片段触发的字符

官方解释，是这样子，果然很官方

body：主体

官网解释

直白讲，就是代码片段的主体部分，也就是代码片段的模板

description：描述

这个就不解释了，懂得都懂

分析完之后，我们来具体说一下body

我们以官网的🌰来看

上代码

	"阿西吧": {
		"prefix": [
			"for",
			"for-const"
		],
		"body": [
			"for (const ${2:element} of ${1:array}) {",
			"\t$0",
			"}"
		],
		"description": "A for loop."
	}

图片4

代码和图片4比较之后，是不是一目了然，触发代码片段的prefix，存放代码片段的body，对代码片段描述的description，以及我们的阿西吧（我也不知道这个叫什么，一句“阿西吧”代替吧）

总体的代码片段，我想大家一定是了解了，下面俺来具体掰扯掰扯body（主体）

body规则

Tabstops（标签）

老规矩，上官网：

使用制表位，您可以使编辑器光标在片段内移动。使用1,1,2指定光标位置。数字是访问制表位的顺序，而$0表示最终光标位置。同一制表位的多次出现会同步链接和更新。

格式就是$+数字，其中，0比较特殊，代表最后一个，大于0的数字按照顺序来，1第一个，也就是进去的第一个光标，2就是第二个，使用tab进行切换，且不可逆

Placeholders（占位符）

占位符是带有值的制表符，例如${1:foo}. 占位符文本将被插入和选择，以便可以轻松更改。占位符可以嵌套，例如${1:another ${2:placeholder}}

一句话，默认值，并可以对默认值进行修改。光标在哪个默认字符上，直接修改就行

Choice（选择）

占位符可以有选择作为值。语法是以逗号分隔的枚举值，用竖线字符括起来，例如${1|one,two,three|}。当插入片段并选择占位符时，选择将提示用户选择其中一个值。

语法就是${1|one,two,three|}

我理解就是多个默认值的占位符，如果标签是第一个，那么生成代码片段时，直接展示选项，如果不是，需要搭配tab使用

Variables（变量）

使用$name或${name:default}，您可以插入变量的值。当未设置变量时，将插入其默认值或空字符串。当变量未知（即未定义其名称）时，将插入该变量的名称并将其转换为占位符。

看了官网定义，这个变量是最复杂的一个了，拥有多个变量

个人理解，就是模板中的模板，官网定义了一些模板，供我们使用！！

可以使用以下变量(大概扫一下，就ok了)：

当前工作区、剪切板相关方法
  • TM_SELECTED_TEXT 当前选中的文本或空字符串
  • TM_CURRENT_LINE 当前行的内容
  • TM_CURRENT_WORD 光标下单词的内容或空字符串
  • TM_LINE_INDEX 基于零索引的行号
  • TM_LINE_NUMBER 基于一个索引的行号
  • TM_FILENAME 当前文档的文件名
  • TM_FILENAME_BASE 当前文档的文件名，不带扩展名
  • TM_DIRECTORY 当前文档的目录
  • TM_FILEPATH 当前文档的完整文件路径
  • RELATIVE_FILEPATH 当前文档的相对（相对于打开的工作区或文件夹）文件路径
  • CLIPBOARD 剪贴板的内容
  • WORKSPACE_NAME 打开的工作区或文件夹的名称
  • WORKSPACE_FOLDER 打开的工作区或文件夹的路径
插入当前日期和时间：
  • CURRENT_YEAR 本年度
  • CURRENT_YEAR_SHORT 当前年份的最后两位数字
  • CURRENT_MONTH 月份为两位数（例如“02”）
  • CURRENT_MONTH_NAME 月份的全名（例如“七月”）
  • CURRENT_MONTH_NAME_SHORT 月份的简称（例如“Jul”）
  • CURRENT_DATE 以两位数表示的月份日期（例如“08”）
  • CURRENT_DAY_NAME 日期名称（例如“星期一”）
  • CURRENT_DAY_NAME_SHORT 一天的简称（例如“星期一”）
  • CURRENT_HOUR 24 小时制的当前小时
  • CURRENT_MINUTE 当前分钟为两位数
  • CURRENT_SECOND 当前秒为两位数
  • CURRENT_SECONDS_UNIX 自 Unix 纪元以来的秒数
插入随机值：
  • RANDOM 6 位随机 Base-10 数字
  • RANDOM_HEX 6 位随机 Base-16 数字
  • UUID 版本 4 UUID
注释

对于插入行或块注释，遵循当前语言：

  • BLOCK_COMMENT_START 示例输出：PHP/*或 HTML<!--
  • BLOCK_COMMENT_END 示例输出：PHP*/或 HTML-->
  • LINE_COMMENT 示例输出：在 PHP 中 //

注释官网有demo，就不写了

{
  "hello": {
    "scope": "javascript,html",
    "prefix": "hello",
    "body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
  }
}

上面的代码片段在 JavaScript 文件中输出 /* Hello World */ 并在 HTML 文件中输出

Variable transforms(变量装换)

这个是我个人认为代码片段中最复杂的东东 !!!

对正则表达式需要有一定的了解

我们看下官网翻译过来的东东！！！

转换允许您在插入变量之前修改它的值。转换的定义由①②③三部分组成：

① 与变量值匹配的正则表达式，或者当变量无法解析时为空字符串。

② 允许从正则表达式引用匹配组的“格式字符串”。格式字符串允许有条件的插入和简单的修改。

③ 传递给正则表达式的选项。

实话实说，没看懂！！！

一起看下官网提供的demo

${TM_FILENAME/(.*)\\..+$/$1/}
  |           |         |  |
  |           |         |  |-> no options（没有选项 ③）
  |           |         |
  |           |         |-> references the contents of the first
  |           |             capture group（变量捕获前的内容（我理解的是正则前的内容）②）
  |           |
  |           |-> regex to capture everything before
  |               the final `.suffix`（机翻：【正则表达式捕获之前的所有内容 |最后的`.suffix`】个人理解就是通过正则表达式匹配到文件的后缀 ①）
  |
  |-> resolves to the filename（解析为文件名，这里是个获取《当前文档的文件名》的变量）

我们根据官网的demo，一点点儿看下哈

首先我们要先知道这个demo的变量是啥子东西

TM_FILENAME 当前文档的文件名

这个demo实现的功能就是（TM_FILENAME_BASE 当前文档的文件名，不带扩展名）

可能有点蒙，先继续往下看吧！！！

Placeholder-Transform（占位符转换）

与变量转换一样，占位符的转换允许在移动到下一个制表位时更改占位符的插入文本。插入的文本与正则表达式匹配，匹配项或匹配项（取决于选项）将替换为指定的替换格式文本。占位符的每次出现都可以使用第一个占位符的值独立定义自己的转换。

又是一大堆解释，也没看懂

带着疑问继续看吧！！！

下面是官网的转换示例，我们一起看下

看到这里，我感觉我悟了

我们再回头看变量转换和demo，可以将转换示例分成四部分

  1. 变量名/占位符
  2. 第一个/右边（匹配变量的正则）
  3. 第二个/右边（将变量替换成什么）
  4. 第三个/右边 选项

再回过头来，从变量转换看一遍，我相信你可以看明白的，不懂也没有关系，接下来还要几个🌰，可以供大家参考

4. 几个代码片段例子

在看例子之前，推荐大家下载 jn-snippets(或者直接去vscode的插件商城搜索jn-snippets)

因为不太会截动画，就整了个插件供大家实验

源码地址也直接放了上去，大家可以去查看

我从这个插件里面拎了两个比较有代表性的片段，大家可以看一下

4.1 快速生成通用的React.FC函数组件框架

"jn-FC-component": {
        "prefix": [
            "FC",
            "fc"
        ],
        "body": [
            "import { FC } from 'react';",
            "",
            "interface I${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}}Props {",
            "",
            "}",
            "",
            "export const ${1:${TM_FILENAME_BASE}} : FC<I${1:${TM_FILENAME_BASE}}Props> = props => {",
            "  return (",
            "    <div/>",
            "  );",
            "}",
            "${0}"
        ],
        "description": "通用FC组件代码结构"
    },

4.2 快速生成useState框架

"jn-useState": {
        "prefix": "useState",
        "body": [
            "const [ ${1:state}, set${1/(.*)/${1:/capitalize}/} ] = useState(${2:state});${0}"
        ],
        "description": "通用useState代码结构"
    },

日常开发都是用的react，对vue不太熟练，这里俺就不写vue的demo了

5. 如何搞一个vscode代码片段插件

5.1包安装

npm install -g yo generator-code

5.2 执行脚手架

yo code 我们猛一点儿，直接选择 New Code Snippets 类型

image.png

然后除了起个名字，剩下先全部默认就可以了

image.png

5.3 开发

对于开发，推荐大家根据脚手架生成一个全新的项目，然后结合我上面的项目，对比查看下，这里不做过多阐述了，我拿package.json简单说几个关键点 image.png

注意name和publisher：VS Code.用作扩展的唯一ID

engines.vscode: 这指定了扩展所依赖的 VS Code API 的最低版本。

5.4 发布

5.41 安装依赖

npm install vsce -g

5.42 创建账号

aka.ms/SignupAzure…

首先需要创建一个组织，默认会创建一个邮箱前缀为名的组织

5.43 创建令牌（token）

image.png

image.png

image.png

5.44 创建发布者

发布者是 visual studio 代码市场的扩展的唯一身份标识。每个插件都需要在 package.json 文件中指定一个 publisher 字段。

你可以通过 visual studio 插件市场发布者管理页面创建一个新发布者， 然后使用 vsce login <publisher name> , 输入刚才的 token，登陆成功

5.45 发布插件

vsce publish

5.46 取消发布

vsce unpublish (publisher name).(extension name)

或者去插件市场，进行可视化操作

6. 总结

推荐一个我常用的vscode的代码片段包，使用，查看源码都很不错

ES7+ React/Redux/React-Native snippets

相信看到这里的亲们，代码片段一定非常nice了，一起起飞🛫，让我们去创造属于自己的代码片段吧，燥起来！！！

如果有什么疑问，欢迎评论区骚扰，一起讨论！！！

官网地址，参考资源地址

avatar
文章
阅读
粉丝