制作vscode代码片段插件 Code Snippets

前言

我们有一些通用的代码片段，例如模态框（modal）等

为了快速生成代码和代码风格统一

可以开发个vscode代码片段(Snippets)插件供团队内使用

开发

安装依赖

yarn global add yo generator-code vsce

生成项目

yo code

插件类型，选 New Code Snippets

插件名称，name of your extension: test-snippet

代码片段支持的语言类型， Language id: javascript

项目目录

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

定义代码片段

添加配置选项

在 package.json 的contributes中snippets添加

"contributes": {
    "snippets": [
      {
        "language": "javascript",
        "path": "./snippets/snippets.code-snippets"
      },
      {
        "language": "javascriptreact",
        "path": "./snippets/snippets.code-snippets"
      },
      {
        "language": "typescript",
        "path": "./snippets/snippets.code-snippets"
      },
      {
        "language": "typescriptreact",
        "path": "./snippets/snippets.code-snippets"
      }
    ]
},

让插件支持这四种语言

编写代码片段

代码片段的编写可查看这里

// jsComponent copy.code-snippets 文件
{
  "来自 test-snippet 的 modal 模板": {
    "prefix": "modal",
    "body": [
      "import { Modal } from '@/components';",
      "import React, { Component } from 'react';",
      "",
      "interface ${1:$TM_FILENAME_BASE}ModalProps {",
      "  visible: boolean;",
      "  setVisible: (visible: boolean) => void;",
      "}",
      "",
      "interface ${1:$TM_FILENAME_BASE}ModalState {}",
      "",
      "export default class ${1:$TM_FILENAME_BASE}Modal extends Component<${1:$TM_FILENAME_BASE}ModalProps, ${1:$TM_FILENAME_BASE}ModalState> {",
      "  submit() {",
      "    console.log('submit')",
      "  }",
      "",
      "  render() {",
      "    const { visible, setVisible } = this.props;",
      "",
      "    return (",
      "      <Modal",
      "        className=\"setting-modal\"",
      "        title=\"设置\"",
      "        visible={visible}",
      "        onClose={() => setVisible(false)}",
      "        onCancel={() => setVisible(false)}",
      "        onOk={() => this.submit()}",
      "      >",
      "        ${2:content}",
      "      </Modal>",
      "    );",
      "  }",
      "}",
      ""
    ]
  }
}

打包发布

在package.json中填上发布者和仓库地址

"publisher": "tom",
"repository": {},

然后改一下README.md

这是我们团队内部的一个插件

执行打包

vsce package

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

如果想了解插件市场发布，可查看这里

现在modal模板可以使用了