vscode代码片段补全snippets插件开发及发布1.创建插件项目 2.书写插件内容 2.1在插件项目中开发及联调

前言

在日常开发中，我们往往会在vscode中安装一些插件来实现快捷开发，如：自动补全html标签，自动补全常用的一些js方法（for， if....）

问题：涉及到我们内部配置的一些代码，无法通过现有的开源插件来实现自动补全功能，我们需要手动敲（或者从其他地方复制）很多配置代码，增加无用且重复的开发时间

解决：通过安装本插件，可在开发过程中仅仅敲两三个字母即可直接带出常用的代码片段

下面是具体实现方案

1.创建插件项目

1.1 在需要创建插件项目的文件夹内执行依赖安装命令:

npm i -g yo generator-code

1.2 创建插件命令：

yo code

1.3 按↓键选择 New Code Snippets 并回车

1.4 根据提示输入项目名、项目描述、git上传地址（可不填）等

2.书写插件内容

2.1在插件项目中开发及调试

开发

打开项目目录下的snippets文件夹，在snippets.code-snippets文件中写入代码补全片段的规则大致结构如下：

{
  "For Loop": {
    "scope": "javascript,typescript",
    "prefix": ["for", "for-const"],
    "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
    "description": "A for loop."
  }
}

For Loop 片段名称。是唯一的不可重复。

scope 代码片段作用域的语言或项目

prefix 定义一个或多个触发词，在智能识别中显示片段。子字符串匹配是在前缀上执行的，所以在这种情况下，"fc"可以匹配"for-const"

body 是一行或多行内容，这些内容在插入时将被连接为多行。换行符和嵌入的制表符将根据插入代码片段的上下文进行格式化

description 是智能识别显示的片段的可选描述

在body中每行通过""包起来，其中需要注意的语法:

通过\对双引号转义

通过\t实现代码缩进

通过//转义$ 还可以通过正则对内容进行转换，详情参看官网code.visualstudio.com/docs/editor…

此外，上面示例的body中有三个占位符(按遍历顺序列出)为${1:array}, ${2:element}, $0，占位符遍历顺序从1开始，按数字递增，0表示最后一个，可以用Tab快速跳转到下一个占位符，也可以用键值对表示，其中，冒号后面的字符串为默认值。

snippets还提供了一些内置变量，供代码片段使用

官方文档 code.visualstudio.com/docs/editor…

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 打开的工作空间或文件夹的路径

CURSOR_INDEX 基于零索引的游标号

CURSOR_NUMBER 基于单索引的游标号

插入当前日期和时间：

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_HOUR24 小时制格式的当前小时

CURRENT_MINUTE 当前分钟为两位数

CURRENT_SECOND 当前秒为两位数

CURRENT_SECONDS_UNIX 自 Unix 纪元以来的秒数

调试

点击vscode上方菜单中的运行->启动调试，会创建一个新的vscode窗口，创建vue文件，在其中输入关键词

2.2在vscode中开发及调试

此方法可以用于个人开发习惯配置（不需要打包，在自己的vscode中起到代码补全作用）

开发

在vscode中ctrl+shift+p
在输入框中输入snippets
点击配置代码片段
新建全局代码片段
输入文件名并回车
在文件中编辑需要的代码片段

调试

新建一个vue或者js或者html文件，在其中输入关键词，按回车

调试完成后，将文件内的代码内容覆盖到插件项目的snippets文件夹的文件中

3.修改插件配置信息

修改package.json 包括版本号描述等（也可使用默认不修改）
修改readme文件介绍当前插件功能

4.打包

插件的打包需要借助vsce这个工具打包成vsix文件

// 全局安装vsce  
npm install -g vsce  
// 打包  
vsce package

vsce package报错如下请检查本地node版本我是本地版本为12 太低了改成14好了

5.发布

5.1创建账号

访问 login.live.com/ ，注册并登录Microsoft账号
访问 SignupAzureDevOps ，创建一个Azure DevOps 组织

进入组织创建令牌, 创建令牌时选项配置如下, 创建token成功后记下来，后边需要使用

访问 aka.ms/vscode-crea… 创建一个发行方。发行方是有权发布 VS Code 插件的唯一标识，对应插件 package.json 文件中的publisher 字段

创建publisher发布者账号的时候，输入name 点击创建 console里报错提交不了不知道什么原因最终在手机浏览器上创建的，能创建成功

5.2发布

使用第步创建的发行方登录,输入第步生成的token

登录成功后就可以发布插件了

vsce publish

5.3撤销发布

vsce unpublish publisher_name.extension_name

vscode代码片段补全snippets插件开发及发布

前言