第一个 vscode 插件

VSCode，即 Visual Studio Code ，是 微软 的一个开源编辑器。快速、稳定，内置调试、git ，并且有类似 atom 和 sublime 的插件扩展机制。现在我基本以此来作为 Web 开发的编辑器，强烈推荐给大家。

背景

每次新建一个项目免不了配置 .editorconfig文件（可以从 官网 进一步了解 editorconfig ），里面的内容大同小异。
每次手工配置很麻烦，想通过一个命令智能生成常规的 .editorconfig文件，内容大致如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

搜索了 Extensions Marketplace，发现有一个 EditorConfig for VS Code插件功能类似，但是生成的文件内容还是不满足我的项目常用配置（内容如下）

1
2
3
4
5

root = true

[*]
indent_style = space
indent_size = 2

索性自己写一个！

前期准备

1. 注册一个 Visual Studio Team Services 的帐号，以便后续编写以及发布插件到 Marketplace （ 详细步骤 ）。
2. 步骤1 中的帐号主页中添加一个 Personal Access Token （ 详细步骤 ）
3. 安装 发布工具 vsce：npm install -g vsce（当然这需要 NodeJS 环境）。
4. 创建一个发布者：vsce create-publisher (your publisher name)，交互过程中会需要输入 步骤2 中生成的 Token。vsce 会记录该 Token。
5. 安装 yocode ：npm install -g yo generator-code。可以通过 Yo Code 这个工具快速生成一个插件工程。

编码及发布

:v:插件的代码已经发布到 github :v:

生成一个 插件工程：yo code，会有一些交互，基本默认就好。
主要关注 package.json 和 extension.js这两个文件，前者主要是插件的基本配置，后者是插件代码的入口主文件。

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
    "name": "editorconfiggenerator",
    "activationEvents": [
        "onCommand:extension.generateEditorConfig"
    ],
    "main": "./src/extension",
    "contributes": {
        "commands": [
            {
                "command": "extension.generateEditorConfig",
                "title": "GenerateEditorConfig"
            }
        ]
    }
}

extension.generateEditorConfig：代码中注册的触发事件，command 相关的字段中必须统一
GenerateEditorConfig （commands -> title 字段值）：shift + cmd + p 调出的命令行中输入的值。

发布

发布前建议好好书写 README.md 文件，以让用户知道这个插件的作用和使用方法。
发布的命令很简单：

1
2

cd your-extension-project-directory
vsce publish 语义化版本号

不了解语义化版本号的同学可以看 官网资料
vsce 提供了自动增加的版本号机制：major，minor，patch，例如： vsce publish major

另外，我的插件 EditorConfigGenerator 已经发布了，欢迎使用。

参考文档

1. 基本介绍及教程
2. API 文档
3. 辅助工具

Comments: