服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - C/C++ - VSCode插件开发全攻略之跳转到定义、自动补全、悬停提示功能

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

2021-09-03 15:16我是小茗同学 C/C++

这篇文章主要介绍了VSCode插件开发全攻略之跳转到定义、自动补全、悬停提示,需要的朋友可以参考下

跳转到定义

跳转到定义其实很简单,通过vscode.languages.registerDefinitionProvider注册一个provider,这个provider如果返回了new vscode.Location()就表示当前光标所在单词支持跳转,并且跳转到对应location。

为了示例更加有意义,我在这里写了一个支持package.jsondependenciesdevDependencies跳转到对应依赖包的例子jump-to-definition.js(当然我们这里只是很简单的实现,没有考虑特殊情况,直接从node_modules文件夹下面去找):

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

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

new vscode.Location接收2个参数,第一个是要跳转到文件的路径,第二个是跳转之后光标所在位置,接收Range或者Position对象,Position对象的初始化接收2个参数,行row和列col。

高亮显示范围

这里有一个问题我一直没找到解决方案,如下图所示:

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

当按住Ctrl跳转的时候,虽然可以控制跳转目标位置,但是却无法控制高亮显示的范围,下图我本应该让page/video/list.html全部变成蓝色的,但是默认却只能以单词为粒度变色,这个问题我找了很久官方文档就是没找到解决办法,如果大家有知道的欢迎评论指出。

自动补全

通过vscode.languages.registerCompletionItemProvider方法注册自动完成实现,接收3个参数:

  • 第一个是要关联的文件类型;
  • 第二个是一个对象,里面必须包含provideCompletionItems和resolveCompletionItem这2个方法;
  • 第三个是一个可选的触发提示的字符列表;

这里我们实现这样一个例子,当输入this.dependencies.xxx时自动把package.json中的依赖全部带出来,包括dependencies、devDependencies,就像这样:

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

实现代码如下:

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
 }, '.'));
};

悬停提示

从上面的跳转到定义我们可以看到,虽然我们只是定义了如何调整,到按住Ctrl键但是不点击的时候,vscode默认就会帮我们预览一部分内容作为提示,除此之外,如果想获得更多的提示,我们还可以通过vscode.languages.registerHoverProvider命令来实现。

下面我们依然通过package.json中依赖跳转的例子来演示如何实现一个自定义hover,如下标红的内容是我们自己实现的,当鼠标停在package.json的dependencies或者devDependencies时,自动显示对应包的名称、版本号和许可协议:

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

如何实现的呢?也很简单,我们直接上代码:

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
 }));
};

有些时候某个字段可能本身已经有提示内容了,如果我们仍然给它注册了hover的实现的话,那么vscode会自动将多个hover内容合并一起显示。

总结

到此这篇关于VSCode插件开发全攻略之跳转到定义、自动补全、悬停提示功能的文章就介绍到这了,更多相关VSCode插件开发 跳转到定义、自动补全、悬停提示内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://www.cnblogs.com/liuxianan/p/vscode-plugin-jump-completion-hover.html

延伸 · 阅读

精彩推荐
  • C/C++C++之重载 重定义与重写用法详解

    C++之重载 重定义与重写用法详解

    这篇文章主要介绍了C++之重载 重定义与重写用法详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下...

    青山的青6062022-01-04
  • C/C++C/C++经典实例之模拟计算器示例代码

    C/C++经典实例之模拟计算器示例代码

    最近在看到的一个需求,本以为比较简单,但花了不少时间,所以下面这篇文章主要给大家介绍了关于C/C++经典实例之模拟计算器的相关资料,文中通过示...

    jia150610152021-06-07
  • C/C++c++ 单线程实现同时监听多个端口

    c++ 单线程实现同时监听多个端口

    这篇文章主要介绍了c++ 单线程实现同时监听多个端口的方法,帮助大家更好的理解和学习使用c++,感兴趣的朋友可以了解下...

    源之缘11542021-10-27
  • C/C++学习C++编程的必备软件

    学习C++编程的必备软件

    本文给大家分享的是作者在学习使用C++进行编程的时候所用到的一些常用的软件,这里推荐给大家...

    谢恩铭10102021-05-08
  • C/C++详解c语言中的 strcpy和strncpy字符串函数使用

    详解c语言中的 strcpy和strncpy字符串函数使用

    strcpy 和strcnpy函数是字符串复制函数。接下来通过本文给大家介绍c语言中的strcpy和strncpy字符串函数使用,感兴趣的朋友跟随小编要求看看吧...

    spring-go5642021-07-02
  • C/C++C语言中炫酷的文件操作实例详解

    C语言中炫酷的文件操作实例详解

    内存中的数据都是暂时的,当程序结束时,它们都将丢失,为了永久性的保存大量的数据,C语言提供了对文件的操作,这篇文章主要给大家介绍了关于C语言中文件...

    针眼_6702022-01-24
  • C/C++C语言实现电脑关机程序

    C语言实现电脑关机程序

    这篇文章主要为大家详细介绍了C语言实现电脑关机程序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    xiaocaidayong8482021-08-20
  • C/C++深入理解goto语句的替代实现方式分析

    深入理解goto语句的替代实现方式分析

    本篇文章是对goto语句的替代实现方式进行了详细的分析介绍,需要的朋友参考下...

    C语言教程网7342020-12-03