- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章VSCode插件开发全攻略之跳转到定义、自动补全、悬停提示功能由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
跳转到定义 。
跳转到定义其实很简单,通过vscode.languages.registerDefinitionProvider注册一个provider,这个provider如果返回了new vscode.Location()就表示当前光标所在单词支持跳转,并且跳转到对应location.
为了示例更加有意义,我在这里写了一个支持package.json中dependencies、devDependencies跳转到对应依赖包的例子jump-to-definition.js(当然我们这里只是很简单的实现,没有考虑特殊情况,直接从node_modules文件夹下面去找):
代码如下:
/** * 跳转到定义示例,本示例支持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.
高亮显示范围 。
这里有一个问题我一直没找到解决方案,如下图所示:
当按住Ctrl跳转的时候,虽然可以控制跳转目标位置,但是却无法控制高亮显示的范围,下图我本应该让page/video/list.html全部变成蓝色的,但是默认却只能以单词为粒度变色,这个问题我找了很久官方文档就是没找到解决办法,如果大家有知道的欢迎评论指出.
自动补全 。
通过vscode.languages.registerCompletionItemProvider方法注册自动完成实现,接收3个参数:
这里我们实现这样一个例子,当输入this.dependencies.xxx时自动把package.json中的依赖全部带出来,包括dependencies、devDependencies,就像这样:
实现代码如下:
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时,自动显示对应包的名称、版本号和许可协议:
如何实现的呢?也很简单,我们直接上代码:
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 。
最后此篇关于VSCode插件开发全攻略之跳转到定义、自动补全、悬停提示功能的文章就讲到这里了,如果你想了解更多关于VSCode插件开发全攻略之跳转到定义、自动补全、悬停提示功能的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我的 friend 编写了一个程序,它比较随机排列的骰子面,以找到分布最均匀的面——尤其是当面不仅仅是序列时。 我将他的程序翻译成 haskell 是因为我一直在寻找一个理由来让别人知道 haskel
我需要对表单中的某些字段进行评论/提示。我的想法是在模型中描述它,就像attributeLabels一样。我该怎么做? 然后它会是理想的,如果 Gii 模型(和 Crud)生成器直接从 mysql 列
我们使用 FastReport 来生成报告。事实上,我们为访问源代码付费。 我们目前使用的是 FastReport 的最新稳定版本。虽然它对于我们的生产来说足够稳定,但每当我编译时,我都会看到以下内容
我需要创建一个对话框/提示,包括用于用户输入的文本框。我的问题是,确认对话框后如何获取文本?通常我会为此创建一个类,将文本保存在属性中。不过我想使用 XAML 设计对话框。因此,我必须以某种方式扩展
我想提示用户是否要执行操作(删除) - 用警报框说"is"或“否”,如果是,则运行删除脚本,如果否,则不执行任何操作 我不太了解 javascript,因此是否有人可以使用 javascript 获得
所以我正在编写一个简单的 JS 代码。我们刚刚开始学习函数。我需要创建一个名为“printStars”的函数。 我需要从用户那里获取一个号码,并根据该号码打印“*”。 这就是我所做的:
我在我的页面上添加了一个提示,但它在页面加载之前加载了。如何仅在整个页面可见时才显示消息? 这是我的提示: if (name == null || name == "") { txt == "No
我在我的页面上添加了一个提示,但它在页面加载之前加载了。如何仅在整个页面可见时才显示消息? 这是我的提示: if (name == null || name == "") { txt == "No
我正在自定义我的 zsh 提示,并发现以下内容来检查是否有任何后台作业: if [[ $(jobs | wc -l) -gt 0 ]]; then # has background job(s)
这个问题在这里已经有了答案: JavaScript object: access variable property by name as string [duplicate] (3 个答案) pa
我正在尝试用 javascript 制作一个简单的数学练习程序。在提示警报中给出不同的值,并将答案与用户输入进行比较。这是代码: Calculations generate(); functio
在这段代码中,尽管我使用了文本对齐属性在“编辑文本” View 的中心设置“提示”。但它无法正常工作。 最佳答案 尝试 关于android - 如何在编辑文本的中心对齐文本(提示),我们在Sta
我正在尝试让我的 EditText 显示一个提示,例如“请在此处输入答案”,当用户点击 EditText 以键入他们的答案时,文本应该消失并留空,以便他们在其中输入答案. 截至目前,这就是我的 .xm
我当前的 android 应用程序中有两个微调器,我想要一个默认值,例如 editText 的 android:hint 功能。有没有办法这样做,但不会将提示添加到填充微调器的字符串数组。例如从微调器
如果我的表单已完全填写,我如何提示“感谢您填写表单,“name”!” function submit_onclick() { if(confirm("Thanks for completing t
我刚刚了解了prompt()命令;我知道 Prompt() 命令以字符串的形式返回用户输入。我正在搞乱下面的程序,我输入了Per“Dead”Ohlin作为男性名字。为什么这有效并且没有引起任何问题?
void openUpNow(FILE *x, FILE *y) { x = fopen("xwhatever", "r"); y = fopen("ywhatever", "r");
我有一个作业正在处理,但我在使用 prompt() 方法时遇到了问题。我看到我可以做一个提示,但我需要几个并且有数量。 例如... 我创建了一个 HTML 表格,其中包含许多艺术家和包含 DVD、CD
我正在学习 Big Nerd Ranch 的 iOS Programming, 2nd Edition,我已经来到第 4 章挑战:标题。该练习暗示我感到困惑;它说我需要做一些我认为不需要做的事情。 到
抱歉,如果这是微不足道的,但我没有找到任何解决此问题的建议。我在 Ubuntu 上,我的 Yii 项目需要 PHPUnit。我已经安装了 PHPUnit 两次,方法是下载 phpunit.phar 并
我是一名优秀的程序员,十分优秀!