vscode extension插件开发

blake

本次给大家带来的分享是关于VS Code插件的一些经验，分享的内容是我写的一个插件：view-readme
开发背景

在本地安装好所有npm包后，有的时候想看看某个模块的文档，了解其特性以及如何使用。于是打开node_modules文件夹，大家都知道，这个文件夹里面的文件是非常多的，很难定位到我们想看的模块，并且这么多的目录树展开后，严重影响到编辑的使用。

为了解决上面这个问题，我开发了view-readme这个插件。在任何时候你想查看npm包的文档时，按快捷键并输入想要查看的模块名称，自动为你打开该模块的README.md文档。

环境准备

1.安装Yeoman和VS Code脚手架

1. npm install -g yo generator-code

复制代码

2.生成项目模版

1. yo code

复制代码

3.配置选项

• 选择第二项（JavaScript）
• 扩展名称
• 扩展唯一标识
• 扩展描述
• 发布作者
• 是否创建git仓库
  
  

4.模版目录

1. .
   
2. |____.eslintrc.json      
   
3. |____.gitignore               
   
4. |____.vscode                     // vscode配置目录
   
5. | |____extensions.json
   
6. | |____launch.json
   
7. | |____settings.json
   
8. |____.vscodeignore               // 发布时过滤掉的文件
   
9. |____CHANGELOG.md                // 发布记录
   
10. |____extension.js                // 插件入口
    
11. |____jsconfig.json               // js规则
    
12. |____package.json                // 资源配置
    
13. |____README.md                   // 文档
    
14. |____test                        // 自动化测试目录
    
15. | |____extension.test.js
    
16. | |____index.js
    
17. |____vsc-extension-quickstart.md

复制代码

5.运行

• 打开新窗口
• 加载插件目录
• 进入调试
• Launch Extension
• 打开命令面板（cmd+shift+p）
• 输入hello world，回车
• 弹窗Hello World提示
  
  

插件代码

资源配置介绍

1. {
   
2.     "name": "vscode-view-readme",
   
3.     "displayName": "view-readme",
   
4.     "description": "Open readme.md at nearly path of node_modules quickly. ",
   
5.     "version": "0.1.3",
   
6.     "publisher": "ansenhuang",
   
7.     "icon": "images/logo128.png",
   
8.     "engines": {
   
9.         "vscode": "^1.10.0"
   
10.     },
    
11.     "galleryBanner": {                     // 发布后的预览页配置
    
12.         "color": "#eff1f3",                // banner颜色
    
13.         "theme": "light"                   // 主题（light, dark）
    
14.     },
    
15.     "categories": [
    
16.         "Other"                            // 插件分类
    
17.     ],
    
18.     "activationEvents": [                  // 启动项
    
19.         "onCommand:viewReadme.showLocal"   // 触发这个命令时启动
    
20.     ],
    
21.     "main": "./src/extension",             // 插件入口
    
22.     "contributes": {                       // 配置
    
23.         "configuration": {                 // 定义默认参数
    
24.             "type": "object",
    
25.             "title": "View readme configuration",
    
26.             "properties": {                // 这里定义的参数可以在vscode中取到
    
27.                 "view-readme.savePath": {
    
28.                     "type": "string",
    
29.                     "default": "",
    
30.                     "description": "Save in local path when request remote."
    
31.                 },
    
32.                 "view-readme.npmUrl": {
    
33.                     "type": "string",
    
34.                     "default": "https://registry.npmjs.org/",
    
35.                     "description": "Get data from remote url."
    
36.                 }
    
37.             }
    
38.         },
    
39.         "commands": [                                 // 命令配置
    
40.             {
    
41.                 "command": "viewReadme.showLocal",    // 注册的命令
    
42.                 "title": "Readme: Open markdown file" // 命令显示在面板的标题
    
43.             }
    
44.         ],
    
45.         "keybindings": [                              // 快捷键配置
    
46.             {
    
47.                 "command": "viewReadme.showLocal",    // 要触发的命令
    
48.                 "key": "ctrl+shift+l",                // windows系统的快捷键
    
49.                 "mac": "cmd+shift+l"                  // mac系统的快捷键
    
50.             }
    
51.         ]
    
52.     },
    
53.     "scripts": {
    
54.         "postinstall": "node ./node_modules/vscode/bin/install"
    
55.     },
    
56.     "devDependencies": {
    
57.         "@types/mocha": "^2.2.32",
    
58.         "@types/node": "^6.0.40",
    
59.         "eslint": "^3.6.0",
    
60.         "mocha": "^2.3.3",
    
61.         "typescript": "^2.0.3",
    
62.         "vscode": "^1.0.0"
    
63.     }
    
64. }

复制代码

src/extension.js

1. var vscode = require('vscode');
   
2. var Local = require('./Local');
   
3. var { INPUT_PROMPT } = require('./config');
   
4. 
   
5. function activate (context) {
   
6.     // 注册命令
   
7.     var disposableLocal = vscode.commands.registerCommand('viewReadme.showLocal', function () {
   
8.         vscode.window.showInputBox({  // 调出输入框
   
9.             prompt: INPUT_PROMPT
   
10.         }).then(function (moduleName) {
    
11.             new Local(moduleName);    // 回车后执行
    
12.         });
    
13.     });
    
14. 
    
15.     context.subscriptions.push(disposableLocal);
    
16. }
    
17. 
    
18. function deactivate () {}
    
19. 
    
20. // exports
    
21. exports.activate = activate;
    
22. exports.deactivate = deactivate;

复制代码

src/Local.js

1. var fs = require('fs');
   
2. var path = require('path');
   
3. var vscode = require('vscode');
   
4. var {
   
5.     MARKDOWN_PREVIEW,
   
6.     README_NAMES,
   
7.     NO_FILE,
   
8.     NOT_FOUND
   
9. } = require('./config');
   
10. 
    
11. function Local (moduleName) {
    
12.     this.moduleName = moduleName;
    
13. 
    
14.     moduleName && this.init();
    
15. }
    
16. 
    
17. Local.prototype = {
    
18.     init: function () {
    
19.         var files = vscode.workspace.textDocuments; // 获取当前打开的文件路径
    
20.         if (files.length) {
    
21.             var last = files.length - 1;
    
22.             this.handlePath(path.dirname(files[last].fileName)); // 取最后打开的文件目录，基于这个路径去查找node_modules目录
    
23.         } else {
    
24.             vscode.window.showInformationMessage(NO_FILE); // 弹出提示信息
    
25.         }
    
26.     },
    
27.     handlePath: function (dir) {
    
28.         if (dir === '/') { // 已到达根目录
    
29.             vscode.window.showInformationMessage(NOT_FOUND);
    
30.             return;
    
31.         }
    
32. 
    
33.         var modulePath = path.join(dir, 'node_modules', this.moduleName);
    
34.         if (fs.existsSync(modulePath)) {
    
35.             this.handleReadme(modulePath); // 找到了模块目录
    
36.         } else {
    
37.             this.handlePath(path.dirname(dir)); // 未找到则继续向上查找
    
38.         }
    
39.     },
    
40.     handleReadme: function (modulePath) {
    
41.         var readmeName = README_NAMES.find(function (name) {
    
42.             return fs.existsSync(path.join(modulePath, name));
    
43.         });
    
44. 
    
45.         if (readmeName) {
    
46.             var readmePath = path.join(modulePath, readmeName);
    
47.             vscode.commands.executeCommand(MARKDOWN_PREVIEW, vscode.Uri.parse('file://' + readmePath)); // 执行markdown命令，打开文件
    
48.         } else {
    
49.             vscode.window.showInformationMessage(NOT_FOUND);
    
50.         }
    
51.     }
    
52. };
    
53. 
    
54. module.exports = Local;

复制代码

src/config.js

1. exports.MARKDOWN_PREVIEW = 'markdown.showPreview';
   
2. exports.README_NAMES = ['README.md', 'readme.md', 'Readme.md', 'README', 'readme'];
   
3. exports.INPUT_PROMPT = 'Enter module name';
   
4. exports.NO_FILE = 'Please open file firstly.';
   
5. exports.NOT_FOUND = 'Module not found!';

复制代码

插件编写完成，重新运行一下试试效果吧。

发布插件账号

• 账号注册
• Create new account
• 添加Personal Access Token（地址：[url=https://[your/]https://[your[/url] name].visualstudio.com/_details/security/tokens，注意Token只显示一次，最好自己保存一份）
  
  

发布工具

安装

1. npm install -g vsce

复制代码

创建发布作者

1. vsce create-publisher (publisher name)

复制代码

发布

1. vsce publish

复制代码

打包成二进制文件

1. vsce package

复制代码

结尾

大家可以在VS Code插件中搜索view-readme来安装这个插件。

项目仓库：https://github.com/ansenhuang/vscode-view-readme