阅读 1225

开发个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, 我们选择该类型,创建项目。

image.png

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

image.png

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

image.png

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

项目目录

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

定义代码片段

添加配置选项

package.json中的 contributessnippets添加

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

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

编写代码片段

// 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菜单下,点击运行按钮,弹出一个名为扩展开发主机的窗口,这个窗口就是包含这个插件的临时调试窗口。

image.png

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

image.png

image.png

插件发布

打包

  • 安装打包工具

    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代码片段的插件开发,每个团队可以整理出自己的代码片段,方便团队内部分享。同时有一定的积累可以提高团队的开发效率。

参考

如果你觉得该文章不错,不妨

1、点赞,让更多的人也能看到这篇内容

2、关注我,让我们成为长期关系

3、关注公众号「前端有话说」,里面已有多篇原创文章,和开发工具,欢迎各位的关注,第一时间阅读我的文章

文章分类
前端