在前端开发中，使用 Visual Studio Code 是非常常见的事情。随着 VS Code 的日益发展，VS Code 利用 npm 包提供了丰富的模块化接口，以方便开发者来扩展和定制化自己的工作环境。
本文将介绍如何使用 npm 包 vscode-languageclient 来开发 VS Code 扩展插件，在 VS Code 中实现客户端与语言服务器之间的交互，帮助开发者更好地解析和分析程序的语言语法，并针对代码进行智能提示、错误检查、代码高亮等功能。
npm 包 vscode-languageclient
vscode-languageclient 是与 VS Code 中语言服务器通信的一个 npm 包。它在 vscode 及其相关的库提供的 LanguageClient 类的基础上进行了增强和扩展。一旦与语言服务器建立联系，vscode-languageclient 可以与其通信以接收请求、推送通知和域方法等消息，并展现其返回结果。
vscode-languageclient 基于以下技术实现了其强大的功能：
- Language Server Protocol (LSP) 是一种用于与语言服务器通信的标准化协议，基于JSON-RPC，可以在许多不同的开发环境和编辑器之间实现通信。
- node-jsonrpc 是一个易于使用且灵活的 JSON-RPC 的 Node.js 实现。
- EventEmitter3 是一个快速的 Javascript 发布-订阅消息系统。
在 vscode-languageclient 基础上，我们可以编写客户端代码与语言服务器进行通信，并扩展 VS Code 的功能。
建立与语言服务器的连接
有了 vscode-languageclient 的基础，我们可以进行以下步骤与语言服务器建立连接。
安装 vscode-languageclient
在 VS Code 中新建一个扩展项目后，在终端中输入以下命令来安装 vscode-languageclient:
$ npm install vscode-languageclient
编写客户端代码
首先，为了让 VS Code 显示我们的扩展命令，我们需要一个 extension.ts 文件。然后，我们可以编写类似以下代码的客户端代码：
-- -------------------- ---- -------
------ - -- ------ ---- ---------
------ - -- ---- ---- -------
------ - -- -- ---- -----
------ -
---------------
----------------------
--------------
- ---- ------------------------
--- ------- ---------------
------ -------- ----------------- ------------------------ -
-- ----------
----- ------------ - -----------------------
------------------- ------------
--
-- --------- ------- ----------
-- -- ------------- ----------
----- -------------- ------------- - -
---- -
------- -------------
---------- ------------------
--
------ -
------- -------------
---------- ------------------
-------- - --------- ------------ ----------------- --
--
--
-- -------
----- -------------- --------------------- - -
----------------- -
- ------- ------- --------- ----------- --
- ------- ------- --------- ---------- --
--
------------ -
----------- ---------------------------------------------------------
--
--
------ - --- ---------------
------------------------
--------- ------ ---------
--------------
-------------
--
---------------
-编写语言服务器
在 VS Code 中，可以将语言服务器作为一个单独的进程启动，并与用户扩展插件通信。在本文中，我们将使用 TypeScript 语言编写语言服务器。
首先，我们需要在扩展的根目录中新建一个“server”文件夹，文件名为 server.ts，然后写入以下代码：
-- -------------------- ---- -------
------ - -- ---- ---- -------
------ -
----------
-----------------
-------------
-----------
-------------------
- ---- ---------
----- -------- -
--------- -------
-
--- ---------------------
------ -------- ----------------- ----------------- -
-------------------- - --------------------------------------------------------
----- ---------- - ----------------------------------------------------
----- -------- - --- ---------------
--- ---------- - -------------------------------------------------- -- -- -
------------------ ---------
---
---------------------------------------
---------- - ----------------------------------------------------------- ----------
---------------------------------------
---------- - ------------------------------------------------------
---------------------------------------
---------- - -------------------------------------------------------------------
---------------------------------------
-
-------- ----------------------- ------------- -
----- -------- - ---------------------------------
-- ---------------------------- -
----- ------------ - --- -----------
--------------------- - -------------------
-
-
-------- ---------------------------------- ------------- -
------------------------
----- -------- - ---------------------------------
-- ---------------------------- -
-----------------------------
----- ----------- - ----------------------------------------------
----- --------------- ----------- ------------- - --- ------
--------------------------- -- -
----- ---------- - --- -----------
------------
--------------
------------------------
--
----- --- - -------------
----- --------- - ---------------
----- ----------- -
----------------------------- -- --- --------------------
-----------------------------
----------------------------- -------------
---
--- ---- - ----------------------------------
------------------ -- -
----- ----------- - ------------------------
----------------------------------------------- -------------
---
-
-TestProvider 类继承自 TextDocumentContentProvider，并覆盖了以下方法:
provideTextDocumentContent(uri: Uri): string | Thenable<string>根据文档 URI 提供完成的文本。resolveCompletionItem?(item: CompletionItem, token: CancellationToken): ProviderResult<CompletionItem>在提交已经选择的提供程序建议或在编辑文本时修改现有建议时被调用。provideCompletionItems(document: TextDocument, position: Position, token: CancellationToken, context: CompletionContext): ProviderResult<CompletionItem[] | CompletionList>提供符号。resolveCompletionItem?(item: CompletionItem, token: CancellationToken): ProviderResult<CompletionItem>在提交已经选择的提供程序建议或在编辑文本时修改现有建议时被调用。
完成以上操作后，我们进入“server”文件夹，执行以下命令安装依赖：
$ npm install --save typescript $ npm install --save-dev @types/node @types/vscode
接着，我们编写 server.js 文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ------------------
----- --- - --------------------------
----- ------- - ---------------------
----- ---- - ------------ --------
----- ------- - ---
----- ------- - -------------------------------
-------
------------------------ ----------------------------------
-------
--
----- ------ - --- ----------------------------------------
----- ------ - --- ---------------------------------------
----- ---------- - ----------------------------------- --------
--------------------
----- ------ - -----------------------------------
-------------
----- -------- --------
-----------
-
----------------- -
-
------- -------
--------- -----------
--
--
-
--
---------------执行以上代码后，即可在 VS Code 中启动我们的语言服务器，以便与 VS Code 之间进行通信。
建立命令连接
借助于 vscode-languageclient，我们可以轻松建立 VS Code 客户端和语言服务器之间的命令连接。具体做法是，我们可以使用以下代码分别在客户端和服务器端定义反射方法来调用指定的命令。
在客户端代码中：
client.onReady().then(() => {
client.sendRequest('command', {
command: 'test.helloWorld',
arguments: []
}).then((result: any) => {
console.log(result)
})
})在服务器代码中，我们使用如下代码进行反射方法的定义：
-- -------------------- ---- -------
------------------------------- ----- -------- ---- -- -
---------------------------------------------- --------------------------
-- -- -
-------------------- ----------------- -----------
--
----- -- -
---------------------- ----------------- -------- -----
-
--
---命令执行成功后，我们可以在命令行或调试器中看到相应的输出，而这些输出将会显示在客户端和服务器运行的控制台中。
总结
以上就是使用 vscode-languageclient 与语言服务器建立连接的完整步骤。通过本文的介绍，我们可以了解到如下的知识点：
vscode-languageclient的基本功能和用法，以及如何使用LanguageClient类进行扩展。- 使用
npm安装依赖包的方法，以及如何在代码中使用path等模块。 - 在 TypeScript 中创建语言服务器的基本方法，以及如何通过
onDidOpenTextDocument和onDidChangeTextDocument事件处理程序接受并解析客户端发送的文本。 - 如何在客户端和服务器端建立命令连接和反射机制。
希望本文可以帮助到前端开发者更好地理解 vscode-languageclient 的使用方法和实现方式，利用其强大的工具打造出更加高效、智能的编码环境。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7167f7a9b7065299ccbb5c