[手把手系列] VS Code 插件开发实战


VS Code | 網頁設計資源彙整- Web Design Resources

背景

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

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

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

对于VS Code 插件开发， 大家可能不太熟悉， 但是我觉得大家都应该 学习, 掌握一下这个技能。

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

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

我最近也开发了一款VS Code 插件， 作为自己项目的辅助工具, 中间也踩了一些坑， 借助这个机会分享给大家， 希望对大家有所启发。

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

需求场景

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

录入key:
key.png

录入value:

value.png

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

image.png

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

image.png

然后需要导入到项目中：

image.png

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

演示.mp4

十分的方便。

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

工程搭建

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

1
npm install -g yo generator-code

然后执行：

1
yo code

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

借用一张图：

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

image.png

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

?? 如果生成的过程中， 报了版本错误， 可以修改这里：

image.png

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

插件开发

这里， 我们需要主要关注两个文件：

  1. package.json
  2. extension.js

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

image.png

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

image.png

downloadI18nResources文件中的内容：

1
2
3
4
5
6
7
8
9
10
11
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 里面的逻辑就不细说了， 感兴趣的可以看源码。

有一点需要提一下：

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

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

一开始我是这么写的， 在插件测试的时候没有问题， 可以输出， 但是输出的位置不对， 输出到了插件的工程目录里， 而我是需要输出到业务项目的工程目录里，原因就是在插件里没做区分。

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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');

就可以了。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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, 然后会跳出一个调试面板：

debug

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

install

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

run2

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

打包

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

1
vsce package

file

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

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

选择生成的安装包：

install to vscode

安装成功：

image.png

后续的流程也是一样的， 更新代码之后，都需要重新打包， 安装。

发布

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

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

注册账号

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

然后访问： https://aka.ms/SignupAzureDevOps ，如果你从来没有使用过Azure，那么会看到如下提示：

image.png

点击继续。

创建令牌

image.png

image.png

然后就创建成功了：

image.png

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

image.png

创建发布账号

获得个人访问令牌后，使用vsce以下命令创建新的发布者：

1
vsce create-publisher your-publisher-name

image.png

需要注意的是， 这里的 your-publisher-name 需要和你的package.json 中 author 中的字段保持一致, 否则就会报错， 修改之后就可以了：

image.png

发布成功！

image.png

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

image.png

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

最后

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

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

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

image.png

竟然有那么多没有用到的翻译，还是非常震惊的， 不过结果应该有偏差， 需要逐个核对。

结尾

本文包含的代码， 已经在开头给出了， 如果有帮助到你的话，可以给个星星～

内容就是这么多， 希望对你有所启发。

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

参考资料

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