[手把手系列] 开发一个 VS Code 业务插件

背景

VS Code应该都很熟悉，平时吃饭的工具， 天天都要用。

它是微软出的一款轻量级代码编辑器，免费并且功能强大，以功能强大、提示友好、不错的性能和颜值俘获了大量开发者的青睐。

对JavaScript和NodeJS的支持很是好，自带不少功能，如代码格式化，代码智能提示补全等。

对于VS Code 插件开发， 你们可能不太熟悉， 可是我以为你们都应该 学习, 掌握一下这个技能。

由于每一个人都会多多少少有一些本身的特殊定制需求，遇到相似提高开发效率的时候，大部分想到的都是写一些脚本工具、浏览器插件等。

掌握IDE插件开发以后, 就会发现： 有些问题能够经过更高效的方式来解决，毕竟IDE才是咱们程序员天天接触最多的东西。

我最近也开发了一款VS Code 插件， 做为本身项目的辅助工具, 中间也踩了一些坑， 借助这个机会分享给你们， 但愿对你们有所启发。

附项目源码地址： https://github.com/beMySun/wm...

需求场景

我所作的是一个国际化项目， 须要支持多语言， 翻译的相关资源托管在咱们的翻译平台上， 开发的时候， 录入翻译字段的 key 和 value, 以下图：

录入key:

录入value:

录入完成以后， 为了方便本地开发, 须要下载翻译好的资源：

下载到本地的就是一些json文件：

而后须要导入到项目中：

这一套流程十分的麻烦， 费时费力， 为了提高这部分的操做效率， 我开发了一个脚本命令，能够自动下载资源， 并输入到对应的目录中：

十分的方便。

下面，我就介绍下具体的开发流程和开发细节。

工程搭建

VS Code 插件开发， 选用官方推荐的工具： Yo Code

npm install -g yo generator-code

而后执行：

yo code

vscode插件可使用TypeScript来编写（官方推荐），也可使用JavaScript，本文统一使用后者，不过使用哪一种方式，能实现的功能都是同样的。

借用一张图：

根据指引， 一步步生成便可， 这样， 就获得了一个干净的插件工程了。

其中的 src, utils images目录是我后面添加的， 能够忽略。

⚠️ 若是生成的过程当中， 报了版本错误， 能够修改这里：

而后， 就开始正式的插件开发了。

插件开发

这里， 咱们须要主要关注两个文件：

1. package.json
2. extension.js

在package.json中，咱们定义的是须要 执行的命令 和添加 VS Code 菜单：

在 extension.js 中添加咱们自定义的功能：

downloadI18nResources文件中的内容：

const vscode = require('vscode');
const fileloader = require('./download');

module.exports = function (context) {
  context.subscriptions.push(
    vscode.commands.registerCommand('i18n.downloadI18nResources', () => {
      const showInformationMessage = vscode.window.showInformationMessage;
      fileloader.download(showInformationMessage);
    })
  );
};

download 里面的逻辑就不细说了， 感兴趣的能够看源码。

有一点须要提一下：

就是脚本执行以后， 文件输出路径的问题:

const directoryPath = path.resolve(__dirname, 'src/i18n/locales');

一开始我是这么写的， 在插件测试的时候没有问题， 能够输出， 可是输出的位置不对， 输出到了插件的工程目录里， 而我是须要输出到业务项目的工程目录里，缘由就是在插件里没作区分。

在Node Js 中，文件路径大概有 __dirname, __filename, process.cwd(), ./ 或者 ../，前三个都是绝对路径，为了便于比较，./ 和 ../ 咱们经过 path.resolve('./')来转换为绝对路径。

简单说一下这几个路径的意思：

__dirname：    得到当前执行文件所在目录的完整目录名
__filename：   得到当前执行文件的带有完整绝对路径的文件名
process.cwd()：得到当前执行node命令时候的文件夹目录名 
./：           文件所在目录

因此， 要解决上面描述的问题， 就要取得项目当前的路径：

const getCurrentOpenedFolderPath = () => {
  let path;
  if (vscode.window.activeTextEditor) {
    let workspaceFolder = vscode.workspace.getWorkspaceFolder(vscode.window.activeTextEditor.document.uri);
    path = workspaceFolder.uri.path;
  }
  return path;
};

const projectPath = getCurrentOpenedFolderPath();
const projectName = projectPath.split('/').pop();

// ...

// 把
const directoryPath = path.resolve(__dirname, 'src/i18n/locales');

// 纠正为：
const directoryPath = path.resolve(currnetPath, 'src/i18n/locales');

就能够了。

这里还须要生成多承文件夹， 写了一段同步脚本：

const path = require('path');
const fs = require('fs');

function mkdirsSync(dirname) {
  if (fs.existsSync(dirname)) {
    return true;
  } else {
    if (mkdirsSync(path.dirname(dirname))) {
      fs.mkdirSync(dirname);
      return true;
    }
  }
}

module.exports = {
  mkdirsSync
};

这样， 调用download方法， 就能够把下载的资源输出到正确的位置上了， 基础功能开发完成。

调试

工程建立完成以后， 你能够用自带的hello world! 来测试。

进入 debug 模式：点击 Fn + F5, 而后会跳出一个调试面板：

在新出现的面板里， 点击shift + cmd + p 输入你的命令：

为了方便,你也能够把命令定义到鼠标右键的menu 里, 这样就不用手动敲了：

调试过程当中，最好把开发工具， 和调试工具放在不一样的屏幕里， 这样方便点， 更新代码以后， 点击那个绿色的图标按钮便可， 红色的图标是中止调试。

打包

开发完成以后， 能够先在本地安装调试：

vsce package

获得一个vsxl文件， 而后安装到你的 VS Code 中：

在编辑器中， 输入 cmd + shift + p, 输入install:

选择生成的安装包：

安装成功：

后续的流程也是同样的， 更新代码以后，都须要从新打包， 安装。

发布

最终开发完成以后， 能够发布到官方商店， 这样同事也能下载使用了。

仍是要借助 vsce, 咱们上面已经安装过了。

注册帐号

首先访问 https://login.live.com/ 登陆你的Microsoft帐号，没有的先注册一个：

而后访问： https://aka.ms/SignupAzureDevOps ，若是你历来没有使用过Azure，那么会看到以下提示：

点击继续。

建立令牌

而后就建立成功了：

生成的 token 记得复制一下， 下面要用。

建立发布帐号

得到我的访问令牌后，使用vsce如下命令建立新的发布者：

vsce create-publisher your-publisher-name

须要注意的是， 这里的 your-publisher-name 须要和你的package.json 中 author 中的字段保持一致, 不然就会报错， 修改以后就能够了：

发布成功！

过几分钟，应用商店中也能下载了：

至此，一个基础的 VS Code 插件就完全完成了。

最后

这个插件用了半天时间，只包含了基础功能， 后续还会作加强， 待完善的功能点：

• 实现对比功能，把下载到本地的json文件，与系统中真正调用的对比， 找到那些在翻译平台中无用的翻译。
• 实现自动生成翻译的json, 这样就不用手动去翻译平台添加， 能够在翻译平台上传文件， 或者自动上传。

对比功能本地已经开发完成了， 给大家看一下效果：

居然有那么多没有用到的翻译，仍是很是震惊的， 不过结果应该有误差， 须要逐个核对。

结尾

本文包含的代码， 已经在开头给出了， 若是有帮助到你的话，能够给个星星～

内容就是这么多， 但愿对你有所启发。

文中如有笔误， 还请指正， 谢谢。

参考资料

http://blog.haoji.me/vscode-p...