编写一款属于自己的VsCode自动提示插件

编写一款属于自己的VsCode自动提示插件（vscode-auto-code）

对于许多公司内部的UI框架，我们可以通过VsCode 拓展插件来实现公司内部的插件封装

内容展示

项目根目录创建 prompt-config.json 文件

{	
	"bar": {
		/*  匹配输入内容  格式 [ Array |  String ]*/
		"body": "<mu-bar cellspacing></mu-bar>",
		/ * 用于内容描述 */
		"describe": "工具栏 | 左右两列布局"   
	},
	"button": {
		"body": [
			"<mu-button",
			"button-type=\"normal\"",
			"button-style=\"text\"",
			"button-shape=\"round\"",
			"icon-class=\"\"",
			"@click=\"\"></mu-button>"
		],
		"describe": "type:normal | primary | submit | danger; style: outline | link"
	},
	"editor": {
		"body": [
			"<mu-editor",
			"></mu-editor>"
		],
		"describe": ""
	},
	"calendar": {
		"body": [
			"<mu-calendar",
		      "language=\"en\"",
		      "v-model=\"\"",
		      "select-mode='date'",
		      ":range-start=\"rangeStart\"",
		      ":range-end=\"rangeEnd\"",
		      ":marked-dates = \"markedDates\"",
		      "style=\"height: 400px; width: 600px;\">",
   			 "</mu-calendar>"
		],
		"describe": ""
	}
}

应用 (vue | html 文件下面)

插件实现

1. 使用 npm install -g yo generator-code 安装官方脚手架
2. 然后cd到你的工作目录，运行 yo code 
3. 然后一步一步操作即可
4. package.json

{
"name": "vscode-auto-code",    // 插件名称
"displayName": "vscode-auto-code",
"description": "VSCode自动补全代码插件",
"keywords": [
    "vscode",
    "autoCode"
],
"version": "", // 发布时候需要用的版本号
"publisher": "", // 发布人 需要和 vscode发布人名称一样
"engines": {
    "vscode": "^1.27.0"
},
"categories": [
    "Other"
],
"activationEvents": [
    "*"
],
"main": "./src/extension",  // 入口文件
"contributes": {
},
"scripts": {
    "postinstall": "node ./node_modules/vscode/bin/install",
    "test": "node ./node_modules/vscode/bin/test"
},
"devDependencies": {
    "typescript": "^2.6.1",
    "vscode": "^1.1.6",
    "eslint": "^4.11.0",
    "@types/node": "^7.0.43",
    "@types/mocha": "^2.2.42"
},
"license": "SEE LICENSE IN LICENSE.txt",
"bugs": {
    "url": ""
},
"repository": {
    "type": "git",
    "url": ""
},
"homepage": ""

const vscode = require('vscode');

/**
 * 插件被激活时触发，所有代码总入口
 * @param {*} context 插件上下文
 */
exports.activate = function(context) {
	require('./completion')(context); // 自动补全};
}
/**
 * 插件被释放时触发
 */
exports.deactivate = function() {
};

const vscode = require('vscode');
const util = require('./util');

/**
 * @param {*} document 
 * @param {*} position 
 * @param {*} token 
 * @param {*} context 
 */
function provideCompletionItems(document, position, token, context) {
    const projectPath = util.getProjectRootPath(document) // 获取项目路径
    const json = require(`${projectPath}/prompt-config.json`)  // 获取配置文件
    const key = Object.keys(json)
    if (!key || key.length === 0) return
    return key.map(item => {
        let str = ''
        if (json[item]['body'] instanceof Array) {
            json[item]['body'].map(ele => {
                str += ' ' + ele
            })
        } else {
            str = json[item]['body']
        }
        return {
            label: str, // 提示菜单展示内容
            kind: vscode.CompletionItemKind.Text,
            documentation: json[item]['describe'] // 提示菜单描述内容
        }
    })
}

/**
 * 光标选中当前自动补全item时触发动作，一般情况下无需处理
 * @param {*} item 
 * @param {*} token 
 */
function resolveCompletionItem(item, token) {
    return null;
}

module.exports = function(context) {
    // 注册菜单事件，在html |  vue 文件中触发 。第三个参数还可以设置触发条件
    context.subscriptions.push(vscode.languages.registerCompletionItemProvider('html', {
        provideCompletionItems,
        resolveCompletionItem
    }, '.')); // . 之后触发
    context.subscriptions.push(vscode.languages.registerCompletionItemProvider('vue', {
        provideCompletionItems,
        resolveCompletionItem
    }));
};

测试通过 F5 进行代码调试

打包上传

插件完成之后需要应用

1. 直接把文件夹发给别人，让别人找到vscode的插件存放目录并放进去，然后重启vscode，一般不推荐；
2. 打包成vsix插件，然后发送给别人安装，如果你的插件涉及机密不方便发布到应用市场，可以尝试采用这种方式；
3. 注册开发者账号，发布到官网应用市场，这个发布和npm一样是不需要审核的。

请参考

http://blog.haoji.me/vscode-plugin-publish.html