這篇文章給大家分享一個VSCode插件開發實戰，開發一個代碼診斷插件，分析一下基本原理，並一步步實現，希望對大家有所幫助！
最近，我們內部出了一份Code Review 指南，但是Code Review 過程非常佔時間，大家不會太仔細去review 程式碼，因此想透過一個外掛程式讓開發者在開發階段就能感知到寫法的錯誤，做出的效果如下圖
#接下來將介紹如何從0 實現這麼一個功能。
Visual Studio Code 的程式語言功能擴充功能是有Language Server 來實現的，這很好理解，畢竟檢查語言功能是耗費性能的，需要另起一個進程來作為語言服務，這就是Language Server 語言伺服器。 【推薦學習：《vscode入門教學》】
Language Server 是一種特殊的 Visual Studio Code 擴展，可為許多程式語言提供編輯體驗。使用語言伺服器，您可以實現自動完成、錯誤檢查（診斷）、跳到定義以及VS Code 支援的許多其他語言功能。
既然有了伺服器提供的語法檢查功能，就需要客戶端去連接語言伺服器，然後和伺服器進行交互，例如使用者在客戶端進行程式碼編輯時，進行語言檢查。具體互動如下：
當開啟Vue 檔案時會啟動插件，此時就會啟動Language Server，當文件變更時，語言伺服器就會重新診斷程式碼，並把診斷結果傳送給客戶端。
程式碼診斷的效果是出現波浪線，滑鼠移上顯示提示訊息，如果有快速修復，會在彈出提示的視窗下出現快速修復的按鈕
了解了程式碼診斷的基本原理之後，開始動手實現，從上面的基本原理可知，我們需要實現兩大部分的功能：
客戶端與語言伺服器互動
語言伺服器的診斷與快速修復功能
官方文件提供了一個範例- 用於純文字檔案的簡單語言伺服器，我們可以在這個範例的基礎上去修改。
> git clone https://github.com/microsoft/vscode-extension-samples.git > cd vscode-extension-samples/lsp-sample > npm install > npm run compile > code .
首先在client 建立伺服器
// client/src/extension.ts export function activate(context: ExtensionContext) { ... const clientOptions: LanguageClientOptions = { documentSelector: [{ scheme: 'file', language: 'vue' }], // 打开 vue 文件时才激活 ... }; client = new LanguageClient(...); client.start(); }
接著在server/src/server.ts 中，寫於客戶端的互動邏輯，例如在客戶端文件發生變化的時候，校驗程式碼：
// server/src/server.ts import { createConnection TextDocuments, ProposedFeatures, ... } from 'vscode-languageserver/node'; const connection = createConnection(ProposedFeatures.all); const documents: TextDocuments = new TextDocuments(TextDocument); documents.onDidChangeContent(change => { // 文档发生变化时，校验文档 validateTextDocument(change.document); }); async function validateTextDocument(textDocument: TextDocument): Promise { ... // 拿到诊断结果 const diagnostics = getDiagnostics(textDocument, settings); // 发给客户端 connection.sendDiagnostics({ uri: textDocument.uri, diagnostics }); } // 提供快速修复的操作 connection.onCodeAction(provideCodeActions); async function provideCodeActions(params: CodeActionParams): Promise { ... return quickfix(textDocument, params); }
在完成上面客戶端與服務端互動之後，可以注意到這兩個方法getDiagnostics(textDocument, settings)和quickfix( textDocument, params)。這兩個方法分別是為文件提供診斷資料和快速修復的操作。
整體流程
在處理客戶端傳遞過來的Vue 程式碼文字的，需要透過vue/compiler-dom 解析成三部分ast 格式的資料結構，分別是template、JS、CSS， 由於現在前端程式碼使用的都是TypeScript，JS 部分沒有解析成AST，因此需要使用babel/parser 去解析TypeScript 程式碼產生最終的JS 的AST 資料結構。
const VueParser = require('@vue/compiler-dom'); // 该函数返回诊断结果客户端 function getDiagnostics(textDocument: TextDocument, settings: any): Diagnostic[] { const text = textDocument.getText(); const res = VueParser.parse(text); const [template, script] = res.children; return [ ...analyzeTemplate(template), // 解析 template 得到诊断结果 ...analyzeScript(script, textDocument), // 解析 js 得到诊断结果 ]; } // 分析 js 语法 function analyzeScript(script: any, textDocument: TextDocument) { const scriptAst = parser.parse(script.children[0]?.content, { sourceType: 'module', plugins: [ 'typescript', // typescript ['decorators', { decoratorsBeforeExport: true }], // 装饰器 'classProperties', // ES6 class 写法 'classPrivateProperties', ], });
得到的AST 語法樹結構如下：
Template AST
JS AST
在得到程式碼的語法樹之後，我們需要對每一個程式碼節點進行檢查，來判斷是否符合Code Review的要求，因此需要遍歷語法樹來對每個節點處理。
使用深度優先搜尋對 template 的 AST 進行遍歷：
function deepLoopData( data: AstTemplateInterface[], handler: Function, diagnostics: Diagnostic[], ) { function dfs(data: AstTemplateInterface[]) { for (let i = 0; i < data.length; i++) { handler(data[i], diagnostics); // 在这一步对代码进行处理 if (data[i]?.children?.length) { dfs(data[i].children); } else { continue; } } } dfs(data); } function analyzeTemplate(template: any) { const diagnostics: Diagnostic[] = []; deepLoopData(template.children, templateHandler, diagnostics); return diagnostics; } function templateHandler(currData: AstTemplateInterface, diagnostics: Diagnostic[]){ // ...对代码节点检查 }
而對於 JS AST 遍歷，可以使用 babel/traverse 遍歷：
traverse(scriptAst, { enter(path: any) { ... } }
根据 ast 语法节点去判断语法是否合规，如果不符合要求，需要在代码处生成诊断，一个基础的诊断对象（diagnostics）包括下面几个属性：
range: 诊断有问题的范围，也就是画波浪线的地方
severity: 严重性，分别有四个等级，不同等级标记的颜色不同，分别是：
message: 诊断的提示信息
source: 来源，比如说来源是 Eslint
data：携带数据，可以将修复好的数据放在这里，用于后面的快速修复功能
比如实现一个提示函数过长的诊断：
