如何开发vscode插件

首先，VS Code插件就是一个node应用，我们可以通过安装VS Code为我们提供的VS Code api库（vscode）来操作VS Code，每当我们打开一个窗口的时候，VS Code都会为这个窗口创建一个插件进程按需激活我们的插件。

一、VS Code插件所需要的工具

1.1 脚手架工具

我们可以通过脚手架工具yeoman和generator-code来快速生成一个VS Code插件应用：

npm install -g yo
npm install -g  generator-code
yo code extension-name

VS Code脚手架工具

1.2 打包发布工具 vsce

// 安装
npm install -g vsce
// 创建发布者信息
vsce create-publisher
// 打包插件
vsce pageage
// 发布插件
vsce publish

二、主题 Theme

我们可以通过脚手架yo code theme-name选择New Color Theme创建Theme模版，也可以Fork一份已发布的Theme插件，比如Xeon Light，然后使用VS Code打开项目,我们只需要按下 F5 即可预览主题的效果了。
一个Theme插件主要由两个文件组成：package.json和theme.json：
· package.json：记录node应用的信息和插件的信息
· theme.json：颜色配置

{
    "name": "xeon-light",
    "displayName": "Xeon Light",
    "description": "BEST FOR YOUR EYES!",
    "version": "0.0.2",
    "publisher": "zhiqiangx",
    "repository": {
        "type": "git",
        "url": "https://github.com/zhiqiangx/tinylight-vscode"
    },
    "engines": {
        "vscode": "^1.0.0"
    },
    "icon": "icon.png",
    "categories": [
        "Themes"
    ],
    "contributes": {
        "themes": [
            {
                "label": "Xeon Light",
                "uiTheme": "vs",
                "path": "./themes/tiny.json"
            }
        ]
    },
    "keywords": []
}

上面的的代码是Xeon Light的package.json，engines. vscode是安装插件所需要的vscode的版本，contributes是注册插件的字段，themes表示是主题插件。
themes配置：

label：名称
uiTheme: 主题风格 vs: light; vs-dark: dark;
path：配色文件路径

三、代码片段 Snippets

simple-react-snippets就是一个针对于react的Snippets 插件，它的源代码和Theme特别类似，主要的就是package.json和snippets.json。

3.1 package.json

...
"categories": [
    "Snippets"  // 注册Snippets插件
  ],
"contributes": {
    "snippets": [
      {
        "language": "javascriptreact",  // 指定语言
        "path": "./snippets/snippets.json"  // 对应的配置文件
      },
      {
        "language": "javascript",
        "path": "./snippets/snippets.json"
      },
      {
        "language": "typescriptreact",
        "path": "./snippets/snippets-ts.json"
      },
      {
        "language": "typescript",
        "path": "./snippets/snippets-ts.json"
      }
    ]
}

3.2 snippets.json

{
  "Declare a new state variable using State Hook": {
    "prefix": "usf",  // 被替换的字符串
    "body": ["const [${1}, set${1/(.*)/${1:/capitalize}/}] = useState($2);"],  // 替换的字符串
    "description": "Declare a new state Variable using the State Hook. Hit Tab to apply CamelCase to function"
  },
  "componentDidCatch": {
    "prefix": "cdc",
    "body": ["componentDidCatch(error, info) {", "\t$0", "}"],
    "description": "componentDidCatch"
  }
}

更多插件例子： vscode-extension-samples

最后编辑于：2021.04.20 14:44:06