この記事では、VSCodeプラグイン開発の実践、コード診断プラグインの開発、基本原則の分析、およびそれを段階的に実装する方法について説明します。みんな！
最近、コード レビュー ガイドを社内で公開しました。しかし、コード レビュー プロセスには多くの時間がかかります。人々はコードをあまり注意深くレビューしません。プラグインを使って作業を楽にしたい 開発者は開発段階で書き込みミスを感知することができ、その効果は以下の通りです
以下にその方法を紹介します。そのような機能を最初から実装します。
Visual Studio Codeのプログラミング言語の機能拡張は、Language Serverで実装されています。これはわかりやすいですね。結局のところ、言語機能のチェックはパフォーマンスを消費し、別のプロセスを起動する必要があります。言語サービス。これは Language Server 言語サーバーです。 [推奨学習: 「vscode 入門チュートリアル」]
Language Server は、多くのプログラミング言語の編集エクスペリエンスを提供する特別な Visual Studio Code 拡張機能です。言語サーバーを使用すると、オートコンプリート、エラー チェック (診断)、定義へのジャンプ、および VS Code でサポートされるその他の多くの言語機能を実装できます。
サーバーによって提供される構文チェック機能があるため、クライアントは言語サーバーに接続してからサーバーと対話する必要があります。たとえば、ユーザーは言語サーバー上でコードを編集するときに言語チェックを実行します。クライアント。具体的な操作は次のとおりです:
Vue ファイルを開くと、プラグインが有効になり、言語サーバーが起動します。ドキュメントが変更されると、言語サーバーはコードを再診断し、診断結果をクライアントに送信します。
コード診断の効果は、波線が表示され、マウスを上に移動するとプロンプト メッセージが表示されることです。クイック フィックスがある場合は、ポップの下にクイック フィックス ボタンが表示されます。プロンプト ウィンドウを起動
#コード診断の基本原則を理解した後、実装を開始しました。上記の基本原則から、次のことが必要であることがわかります。 2 つの主要な機能を実装します。
に例が示されています。これは、プレーン テキスト ファイル用の単純な言語サーバーであり、これに基づいて変更できます。この例。
// 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); }
クライアントとサーバー間の上記の対話が完了すると、2 つのメソッド
getDiagnostics(textDocument, settings)およびquickfix に気づくことができます。 ( textDocument、params)。これら 2 つの方法は、それぞれ診断データを提供し、ドキュメントの迅速な修復操作を提供します。
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 構文ツリー構造は次のとおりです。
テンプレート AST
JS 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[]){ // ...对代码节点检查 }
traverse(scriptAst, { enter(path: any) { ... } }
根据 ast 语法节点去判断语法是否合规，如果不符合要求，需要在代码处生成诊断，一个基础的诊断对象（diagnostics）包括下面几个属性：
range: 诊断有问题的范围，也就是画波浪线的地方
severity: 严重性，分别有四个等级，不同等级标记的颜色不同，分别是：
message: 诊断的提示信息
source: 来源，比如说来源是 Eslint
data：携带数据，可以将修复好的数据放在这里，用于后面的快速修复功能
比如实现一个提示函数过长的诊断：
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
