VSCode怎么实现一个代码诊断插件

这篇文章主要讲解了“VSCode怎么实现一个代码诊断插件”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“VSCode怎么实现一个代码诊断插件”吧！Visual Studio Code 的编程语言功能扩展是有 Language Server 来实现的，开发云主机域名这很好理解，毕竟检查语言功能是耗费性能的，需要另起一个进程来作为语言服务，这就是 Language Server 语言服务器。Language Server 是一种特殊的 Visual Studio Code 扩展，可为许多编程语言提供编辑体验。使用语言服务器，您可以实现自动完成、错误检查（诊断）、跳转到定义以及VS Code 支持的许多其他语言功能。既然有了服务器提供的语法检查功能，就需要客户端去连接语言服务器，然后和服务器进行交互，比如用户在客户端进行代码编辑时，进行语言检查。当打开 Vue 文件时会激活插件，此时就会启动 Language Server，当文档发生变化时，语言服务器就会重新诊断代码，并把诊断结果发送给客户端。代码诊断的效果是出现波浪线，鼠标移上显示提示消息，如果有快速修复，会在弹出提示的窗口下出现快速修复的按钮了解了代码诊断的基本原理之后，开始动手实现，从上面的基本原理可知，我们需要实现两大部分的功能：客户端与语言服务器交互语言服务器的诊断和快速修复功能官方文档提供了一个示例 – 用于纯文本文件的简单语言服务器，我们可以在这个示例的基础上去修改。首先在 client 建立服务器接着在 server/src/server.ts 中，编写于客户端的交互逻辑，比如在客户端文档发生变化的时候，校验代码：在完成上面客户端与服务端交互之后，可以注意到这两个方法 getDiagnostics(textDocument, settings) 和 quickfix(textDocument, params)。这两个方法分别是为文档提供诊断数据和快速修复的操作。在处理客户端传递过来的 Vue 代码文本的，需要通过 vue/compiler-dom 解析成三部分 ast 格式的数据结构，分别是 template、JS、CSS，由于现在前端代码使用的都是 TypeScript，JS 部分没有解析成 AST，因此需要使用 babel/parser 去解析 TypeScript 代码生成最终的 JS 的 AST 数据结构。在得到代码的语法树之后，我们需要对每一个代码节点进行检查，来判断是否符合 Code Review 的要求，因此需要遍历语法树来对每个节点处理。使用深度优先搜索对 template 的 AST 进行遍历：而对于 JS AST 遍历，可以使用 babel/traverse 遍历：根据 ast 语法节点去判断语法是否合规，如果不符合要求，需要在代码处生成诊断，一个基础的诊断对象（diagnostics）包括下面几个属性：range: 诊断有问题的范围，也就是画波浪线的地方severity: 严重性，分别有四个等级，不同等级标记的颜色不同，分别是：Error： 1Warning： 2Information：3Hint：4message: 诊断的提示信息source: 来源，比如说来源是 Eslintdata：携带数据，可以将修复好的数据放在这里，用于后面的快速修复功能比如实现一个提示函数过长的诊断：在遍历 AST 时如果遇到某个节点是出现函数过长的时候，就往诊断数据中添加此诊断文档中所有的诊断结果会保存在 diagnostics 数组中，最后通过交互返回给客户端。上面那个函数过长的诊断没办法快速修复，如果能快速修复的话，可以将修正后的结果放在 diagnostics.data 。换个例子写一个快速修复, 比如 Vue template 属性排序不正确，我们需要把代码自动修复quickfix(textDocument, params)有快速修复的诊断会保存在 codeActions 中，并且返回给客户端, 重新回看交互的代码，在 documents.onDidChangeContent 事件中，通过 connection.sendDiagnostics({ uri: textDocument.uri, diagnostics }) 把诊断发送给客户端。quickfix 结果通过 connection.onCodeAction 发给客户端。感谢各位的阅读，以上就是“VSCode怎么实现一个代码诊断插件”的内容了，经过本文的学习后，相信大家对VSCode怎么实现一个代码诊断插件这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是开发云，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: atom中eslint的配置以及使用方法

本篇内容主要讲解“at开发云主机域名om中eslint的配置以及使用方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“atom中eslint的配置以及使用方法”吧!下载aotm插件 linter-eslinthtt…