VSCode插件开发全攻略之跳转到定义、自动补全、悬停提示功能

/**
 * 跳转到定义示例，本示例支持package.json中dependencies、devDependencies跳转到对应依赖包。
 */
const vscode = require('vscode');
const path = require('path');
const fs = require('fs');
const util = require('./util');

/**
 * 查找文件定义的provider，匹配到了就return一个location，否则不做处理
 * 最终效果是，当按住Ctrl键时，如果return了一个location，字符串就会变成一个可以点击的链接，否则无任何效果
 * @param {*} document 
 * @param {*} position 
 * @param {*} token 
 */
function provideDefinition(document, position, token) {
 const fileName = document.fileName;
 const workDir = path.dirname(fileName);
 const word = document.getText(document.getWordRangeAtPosition(position));
 const line = document.lineAt(position);
 const projectPath = util.getProjectPath(document);

 console.log('====== 进入 provideDefinition 方法 ======');
 console.log('fileName: ' + fileName); // 当前文件完整路径
 console.log('workDir: ' + workDir); // 当前文件所在目录
 console.log('word: ' + word); // 当前光标所在单词
 console.log('line: ' + line.text); // 当前光标所在行
 console.log('projectPath: ' + projectPath); // 当前工程目录
 // 只处理package.json文件
 if (//package.json$/.test(fileName)) {
 console.log(word, line.text);
 const json = document.getText();
 if (new RegExp(`"(dependencies|devDependencies)":\s*?\{[\s\S]*?${word.replace(///g, '\/')}[\s\S]*?\}`, 'gm').test(json)) {
  let destPath = `${workDir}/node_modules/${word.replace(/"/g, '')}/package.json`;
  if (fs.existsSync(destPath)) {
  // new vscode.Position(0, 0) 表示跳转到某个文件的第一行第一列
  return new vscode.Location(vscode.Uri.file(destPath), new vscode.Position(0, 0));
  }
 }
 }
}

module.exports = function(context) {
 // 注册如何实现跳转到定义，第一个参数表示仅对json文件生效
 context.subscriptions.push(vscode.languages.registerDefinitionProvider(['json'], {
 provideDefinition
 }));
};

"activationEvents": [
 "onLanguage:json"
],

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

/**
 * 自动提示实现，这里模拟一个很简单的操作
 * 当输入 this.dependencies.xxx时自动把package.json中的依赖带出来
 * 当然这个例子没啥实际意义，仅仅是为了演示如何实现功能
 * @param {*} document 
 * @param {*} position 
 * @param {*} token 
 * @param {*} context 
 */
function provideCompletionItems(document, position, token, context) {
 const line = document.lineAt(position);
 const projectPath = util.getProjectPath(document);

 // 只截取到光标位置为止，防止一些特殊情况
 const lineText = line.text.substring(0, position.character);
 // 简单匹配，只要当前光标前的字符串为`this.dependencies.`都自动带出所有的依赖
 if(/(^|=| )w+.dependencies.$/g.test(lineText)) {
 const json = require(`${projectPath}/package.json`);
 const dependencies = Object.keys(json.dependencies || {}).concat(Object.keys(json.devDependencies || {}));
 return dependencies.map(dep => {
  // vscode.CompletionItemKind 表示提示的类型
  return new vscode.CompletionItem(dep, vscode.CompletionItemKind.Field);
 })
 }
}

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

module.exports = function(context) {
 // 注册代码建议提示，只有当按下“.”时才触发
 context.subscriptions.push(vscode.languages.registerCompletionItemProvider('javascript', {
 provideCompletionItems,
 resolveCompletionItem
 }, '.'));
};

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

/**
 * 鼠标悬停提示，当鼠标停在package.json的dependencies或者devDependencies时，
 * 自动显示对应包的名称、版本号和许可协议
 * @param {*} document 
 * @param {*} position 
 * @param {*} token 
 */
function provideHover(document, position, token) {
 const fileName = document.fileName;
 const workDir = path.dirname(fileName);
 const word = document.getText(document.getWordRangeAtPosition(position));

 if (//package.json$/.test(fileName)) {
 console.log('进入provideHover方法');
 const json = document.getText();
 if (new RegExp(`"(dependencies|devDependencies)":\s*?\{[\s\S]*?${word.replace(///g, '\/')}[\s\S]*?\}`, 'gm').test(json)) {
  let destPath = `${workDir}/node_modules/${word.replace(/"/g, '')}/package.json`;
  if (fs.existsSync(destPath)) {
  const content = require(destPath);
  console.log('hover已生效');
  // hover内容支持markdown语法
  return new vscode.Hover(`* **名称**：${content.name}n* **版本**：${content.version}n* **许可协议**：${content.license}`);
  }
 }
 }
}

module.exports = function(context) {
 // 注册鼠标悬停提示
 context.subscriptions.push(vscode.languages.registerHoverProvider('json', {
 provideHover
 }));
};