本次给人人带来的分享是关于VS Code插件的一些履历，分享的内容是我写的一个插件：view-readme。
开辟背景
在当地装置好一切npm包后，有的时刻想看看某个模块的文档，相识其特征以及怎样运用。因而翻开node_modules文件夹，人人都晓得，这个文件夹里面的文件是异常多的，很难定位到我们想看的模块，而且这么多的目次树睁开后，严峻影响到编辑的运用。
为相识决上面这个题目，我开辟了view-readme这个插件。在任何时刻你想检察npm包的文档时，按快捷键并输入想要检察的模块称号，自动为你翻开该模块的README.md文档。
环境预备
1.装置Yeoman和VS Code脚手架
npm install -g yo generator-code2.天生项目模版
yo code3.设置选项
挑选第二项（JavaScript）
扩大称号
扩大唯一标识
扩大形貌
宣布作者
是不是建立git堆栈
4.模版目次
.
|____.eslintrc.json
|____.gitignore
|____.vscode // vscode设置目次
| |____extensions.json
| |____launch.json
| |____settings.json
|____.vscodeignore // 宣布时过滤掉的文件
|____CHANGELOG.md // 宣布纪录
|____extension.js // 插件进口
|____jsconfig.json // js划定规矩
|____package.json // 资源设置
|____README.md // 文档
|____test // 自动化测试目次
| |____extension.test.js
| |____index.js
|____vsc-extension-quickstart.md5.运转
翻开新窗口
加载插件目次
进入调试
Launch Extension
翻开敕令面板（cmd+shift+p）
输入hello world，回车
弹窗Hello World提醒
插件代码
资源设置引见
{
"name": "vscode-view-readme",
"displayName": "view-readme",
"description": "Open readme.md at nearly path of node_modules quickly. ",
"version": "0.1.3",
"publisher": "ansenhuang",
"icon": "images/logo128.png",
"engines": {
"vscode": "^1.10.0"
},
"galleryBanner": { // 宣布后的预览页设置
"color": "#eff1f3", // banner色彩
"theme": "light" // 主题（light, dark）
},
"categories": [
"Other" // 插件分类
],
"activationEvents": [ // 启动项
"onCommand:viewReadme.showLocal" // 触发这个敕令时启动
],
"main": "./src/extension", // 插件进口
"contributes": { // 设置
"configuration": { // 定义默许参数
"type": "object",
"title": "View readme configuration",
"properties": { // 这里定义的参数能够在vscode中取到
"view-readme.savePath": {
"type": "string",
"default": "",
"description": "Save in local path when request remote."
},
"view-readme.npmUrl": {
"type": "string",
"default": "https://registry.npmjs.org/",
"description": "Get data from remote url."
}
}
},
"commands": [ // 敕令设置
{
"command": "viewReadme.showLocal", // 注册的敕令
"title": "Readme: Open markdown file" // 敕令显现在面板的题目
}
],
"keybindings": [ // 快捷键设置
{
"command": "viewReadme.showLocal", // 要触发的敕令
"key": "ctrl+shift+l", // windows体系的快捷键
"mac": "cmd+shift+l" // mac体系的快捷键
}
]
},
"scripts": {
"postinstall": "node ./node_modules/vscode/bin/install"
},
"devDependencies": {
"@types/mocha": "^2.2.32",
"@types/node": "^6.0.40",
"eslint": "^3.6.0",
"mocha": "^2.3.3",
"typescript": "^2.0.3",
"vscode": "^1.0.0"
}
}src/extension.js
var vscode = require('vscode');
var Local = require('./Local');
var { INPUT_PROMPT } = require('./config');
function activate (context) {
// 注册敕令
var disposableLocal = vscode.commands.registerCommand('viewReadme.showLocal', function () {
vscode.window.showInputBox({ // 调出输入框
prompt: INPUT_PROMPT
}).then(function (moduleName) {
new Local(moduleName); // 回车后实行
});
});
context.subscriptions.push(disposableLocal);
}
function deactivate () {}
// exports
exports.activate = activate;
exports.deactivate = deactivate;src/Local.js
var fs = require('fs');
var path = require('path');
var vscode = require('vscode');
var {
MARKDOWN_PREVIEW,
README_NAMES,
NO_FILE,
NOT_FOUND
} = require('./config');
function Local (moduleName) {
this.moduleName = moduleName;
moduleName && this.init();
}
Local.prototype = {
init: function () {
var files = vscode.workspace.textDocuments; // 猎取当前翻开的文件途径
if (files.length) {
var last = files.length - 1;
this.handlePath(path.dirname(files[last].fileName)); // 取末了翻开的文件目次，基于这个途径去查找node_modules目次
} else {
vscode.window.showInformationMessage(NO_FILE); // 弹出提醒信息
}
},
handlePath: function (dir) {
if (dir === '/') { // 已抵达根目次
vscode.window.showInformationMessage(NOT_FOUND);
return;
}
var modulePath = path.join(dir, 'node_modules', this.moduleName);
if (fs.existsSync(modulePath)) {
this.handleReadme(modulePath); // 找到了模块目次
} else {
this.handlePath(path.dirname(dir)); // 未找到则继承向上查找
}
},
handleReadme: function (modulePath) {
var readmeName = README_NAMES.find(function (name) {
return fs.existsSync(path.join(modulePath, name));
});
if (readmeName) {
var readmePath = path.join(modulePath, readmeName);
vscode.commands.executeCommand(MARKDOWN_PREVIEW, vscode.Uri.parse('file://' + readmePath)); // 实行markdown敕令，翻开文件
} else {
vscode.window.showInformationMessage(NOT_FOUND);
}
}
};
module.exports = Local;src/config.js
exports.MARKDOWN_PREVIEW = 'markdown.showPreview';
exports.README_NAMES = ['README.md', 'readme.md', 'Readme.md', 'README', 'readme'];
exports.INPUT_PROMPT = 'Enter module name';
exports.NO_FILE = 'Please open file firstly.';
exports.NOT_FOUND = 'Module not found!';插件编写完成，从新运转一下尝尝结果吧。
宣布插件
账号
Create new account
增加Personal Access Token（地点：https://[your name].visualstudio.com/_details/security/tokens，注重Token只显现一次，最好本身保留一份）
宣布东西
装置
npm install -g vsce建立宣布作者
vsce create-publisher (publisher name)宣布
vsce publish打包成二进制文件
vsce package末端
人人能够在VS Code插件中搜刮view-readme来装置这个插件。
