开发个vscode代码片段(Snippets)插件，让团队代码风格统一

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

前言

最近要搞业务代码重构，有很多代码需要统一格式，开发个代码片段插件，供团队内部使用。

插件开发

安装脚手架

vscode开发插件提供了脚手架，我们全局安装，安装命令如下

npm install -g yo generator-code | yarn global add yo generator-code
复制代码

脚手架创建项目

执行命令，生成项目

yo code
复制代码

选择Code Snippets extension类型

脚手架已经帮我们内置了Code Snippets, 我们选择该类型，创建项目。

选择完 New Code Snippets,之后会让我们选择已有的代码片段地址或者按Enter创建一个新的代码片段，在这里我们按回车创建一个新的

接下来就是项目名称，扩展名和描述

然后就是选择我们代码片段支持的语言类型

项目目录

.
├── CHANGELOG.md
├── README.md
├── package.json
├── snippets  //代码片段文件夹
│   └── snippets.code-snippets // 相应的代码片段文件
└── vsc-extension-quickstart.md
复制代码

定义代码片段

添加配置选项

在 package.json中的 contributes中snippets添加

"contributes": {
    "snippets": [
        {
            "language": "javascript",
            "path": "./snippets/jsComponent.code-snippets"
        },
        {
            "language": "typescript",
            "path": "./snippets/tsComponent.code-snippets"
        }
    ]
}
复制代码

我们分别添加了JavaScript和TypeScript语言类型和对应的代码片段文件路径

编写代码片段

// jsComponent copy.code-snippets 文件
{
    "zet react function component": {
        "prefix": "zetfc",
        "body": [
            "import React from 'react';",
            "",
            "const ${1:App} = props => {",
            "  return (",
            "    <div>",
            "      ${0}",
            "    </div>",
            "  );",
            "}",
            "",
            "",
            "export default ${1:App};"
	],
        "description": "Code snippet for react function component"
    }
}
复制代码

结构内容如下

• zet react function component 代码片段名称
• prefix 前缀，代码片段提示
• body 代码片段内容
• description 代码片段描述

代码片段语法

• $1,$2,$3...$0:制表位，表示代码片段创建好后光标显示的位置，$1表示光标初始位置，$2表示用户按下键盘上的Tab键光标移动的下一个位置，依次类推，$0表示光标结束的位置

• ${1:App}:预占制表位，和上边一样，只是上边是显示空白，这个会在光标处显示预占位App，这个App可以写你自己需要的东西，当Tab选中时可修改，比如${1:params1}，${2:params2}

更多语法请参考 vscode snippet-syntax

插件测试

在vscode的debug菜单下，点击运行按钮，弹出一个名为扩展开发主机的窗口，这个窗口就是包含这个插件的临时调试窗口。

扩展开发主机窗口在.js文件和.ts文件就可以使用我们的代码片段了

插件发布

打包

• 安装打包工具

  npm install -g vsce | yarn global add vsce
  复制代码

• vsce package 打包

  vsce package，打包完成后会生成 .vsix 后缀的安装包。如果插件仅为个人或者团队内部共享，那么手动安装即可使用，无需发布到 VSCode 插件市场。

发布

插件需要托管在azure云上，可以前往 Azure DevOps 注册，注册后需申请 Personal Access Tokens ，详细申请细节见 说明文档。

发布这块可以参考 blog.haoji.me/vscode-plug… ，步骤比较详细

结束语

以上就是vscode代码片段的插件开发，每个团队可以整理出自己的代码片段，方便团队内部分享。同时有一定的积累可以提高团队的开发效率。

参考

• vscode snippet-syntax
• 插件发布
• Azure DevOps