npm 包 vscode-languageclient 使用教程

在前端开发中，使用 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:

- --- ------- ---------------------

编写客户端代码

首先，为了让 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”文件夹，执行以下命令安装依赖：

- --- ------- ------ ----------
- --- ------- ---------- ----------- -------------

接着，我们编写 server.js 文件：

----- ---- - ----------------
----- ------ - ------------------
----- --- - --------------------------

----- ------- - ---------------------

----- ---- - ------------ --------
----- ------- - ---

----- ------- - -------------------------------
    -------
    ------------------------ ----------------------------------
    -------
--

----- ------ - --- ----------------------------------------
----- ------ - --- ---------------------------------------
----- ---------- - ----------------------------------- --------

--------------------

----- ------ - -----------------------------------
    -------------
    ----- -------- --------
    -----------
    -
        ----------------- -
            -
                ------- -------
                --------- -----------
            --
        --
    -
--

---------------

执行以上代码后，即可在 VS Code 中启动我们的语言服务器，以便与 VS Code 之间进行通信。

建立命令连接

借助于 vscode-languageclient，我们可以轻松建立 VS Code 客户端和语言服务器之间的命令连接。具体做法是，我们可以使用以下代码分别在客户端和服务器端定义反射方法来调用指定的命令。

在客户端代码中：

------------------------ -- -
  ----------------------------- -
      -------- ------------------
      ---------- --
  ---------------- ---- -- -
      -------------------
  --
--

在服务器代码中，我们使用如下代码进行反射方法的定义： 

------------------------------- ----- -------- ---- -- -
  ---------------------------------------------- --------------------------
    -- -- -
      -------------------- ----------------- -----------
    --
    ----- -- -
      ---------------------- ----------------- -------- -----
    -
  --
---

命令执行成功后，我们可以在命令行或调试器中看到相应的输出，而这些输出将会显示在客户端和服务器运行的控制台中。

总结

以上就是使用 vscode-languageclient 与语言服务器建立连接的完整步骤。通过本文的介绍，我们可以了解到如下的知识点：

  • vscode-languageclient 的基本功能和用法，以及如何使用 LanguageClient 类进行扩展。
  • 使用 npm 安装依赖包的方法，以及如何在代码中使用 path 等模块。
  • 在 TypeScript 中创建语言服务器的基本方法，以及如何通过 onDidOpenTextDocument 和 onDidChangeTextDocument 事件处理程序接受并解析客户端发送的文本。
  • 如何在客户端和服务器端建立命令连接和反射机制。

希望本文可以帮助到前端开发者更好地理解 vscode-languageclient 的使用方法和实现方式，利用其强大的工具打造出更加高效、智能的编码环境。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f7167f7a9b7065299ccbb5c

阅读全文

猜你喜欢

  • npm 包 @ianwalter/dot 使用教程

    在前端开发中，我们通常需要操作对象中的属性，对于嵌套的对象来说，操作起来比较繁琐。@ianwalter/dot 便是一款解决对象属性访问问题的 npm 工具包。 本文将带领大家了解 @ianwalte...

    4 年前
  • npm 包 has-emoji 使用教程

    在前端开发中，经常需要对文本进行处理。当涉及到表情符号时，我们很可能需要使用 has-emoji 这个 npm 包。has-emoji 可以用于检测文本中是否包含了表情符号，并返回该表情符号的具体信息...

    4 年前
  • npm 包 @ianwalter/print 使用教程

    在前端开发中，我们经常需要将一些信息在控制台中输出，以便于调试和测试等工作。而 npm 包 @ianwalter/print 就是一款方便实用的打印信息工具，可以帮助我们更好地输出信息。

    4 年前
  • npm 包 @ianwalter/sleep 使用教程

    在前端开发中，我们常常需要模拟等待一段时间的效果，例如模拟异步请求等待时间，这时候 @ianwalter/sleep 这个 npm 包就派上用场了。 1. 安装 @ianwalter/sleep 在使...

    4 年前
  • npm 包 @ianwalter/subpub 使用教程

    介绍 @ianwalter/subpub 是一款基于发布/订阅模式的 npm 包，用于在 JavaScript 应用中实现事件的传递。 该包可以帮助前端开发人员在不同组件之间传递数据和状态，从而优化代...

    4 年前
  • npm 包 @ianwalter/timer 使用教程

    前言 在前端开发中，我们经常会遇到需要操作时间的情况，比如倒计时、动画效果、监控等等。而 @ianwalter/timer 就是一个方便易用的定时器管理工具，可以帮助我们轻松地实现一些时间操作。

    4 年前
  • npm 包 eventemitter-asyncresource 使用教程

    前言 在前端开发中，事件驱动型编程模式越来越常见。而 EventEmitter 正是 Node.js 中的一个事件模块，提供了一种简单而有效的方式来实现事件管理。不过，在实际开发中，我们有时需要在事件...

    4 年前
  • npm 包 piscina 使用教程

    简介 piscina 是一个高度优化过的 Node.js 进程池，它可以帮助我们在 Node.js 中执行 CPU 密集型任务，避免阻塞 I/O 线程。 安装 使用 npm 在项目中安装 piscin...

    4 年前
  • npm包is-valid-identifier使用教程

    在前端开发中，我们经常需要使用npm包来完成各种功能。其中，is-valid-identifier这个npm包是一个非常好用的工具。该工具可以判断一个字符串是否为合法的JavaScript标识符。

    4 年前
  • npm 包 gen-esm-wrapper 使用教程

    在前端开发中，我们经常需要使用 ES6/ES2015 的语法来编写我们的代码。然而，我们在使用一些库或者框架时，可能会遇到一些需要使用 CommonJS 规范的包。

    4 年前
  • npm 包 camaro 使用教程

    介绍 npm 包 camaro 是一个用于将 XML 转换成 JSON 的工具。它使用 XPath 或 CSS 选择器来定义转换规则，使 XML 转换成 JSON 更加灵活。

    4 年前
  • npm 包 @ianwalter/eslint-config 使用教程

    什么是 eslint-config？ eslint-config 是一个配置单一或多种 ESLint 插件的规则的 npm 包。这些插件定义了可选的规则，可帮助你确保代码的质量和风格。

    4 年前
  • npm包@ianwalter/base-error使用教程

    前言 在前端开发的过程中，我们经常会遇到需要自定义错误类型的场景。为了方便开发和维护，我们可以使用npm包@ianwalter/base-error来优雅地实现。 什么是@ianwalter/base...

    4 年前
  • npm 包 date-fns-tz 使用教程

    随着全球化和分布式团队的增长，处理各种时区的日期和时间是前端开发中的一个重要问题。date-fns-tz 是一个优秀的 npm 包，可以轻松处理多种时区的日期和时间。

    4 年前
  • npm 包 @ianwalter/faygit 使用教程

    简介 @ianwalter/faygit 是一个基于 Git 的命令行工具，用于在前端项目中管理和维护规范的 Commit message。它可以帮助团队成员按照约定的格式提交 Commit，提高代码...

    4 年前
  • npm 包 @ianwalter/commits 使用教程

    前言 在软件开发过程中，版本控制是非常重要的一环。版本控制不仅可以跟踪代码变化，还可以记录每一个提交的信息和修改内容。而用 Git 进行版本控制的时候，提交的记录信息也就成了重要的信息之一。

    4 年前
  • npm 包 @ianwalter/fs 使用教程

    前言 作为一名前端开发者，在开发中难免会遇到文件 I/O 相关的问题。而 Node.js 提供了许多内置模块可以帮助我们完成文件操作，如 fs 模块就是 Node.js 内置的文件系统模块。

    4 年前
  • npm包@ianwalter/npm-short-name使用教程

    如果你经常使用npm包，并且希望对于相同的包使用简短的别名进行引用，那么npm包@ianwalter/npm-short-name可以帮助你实现这个目标。这个包为你提供了一个简单的命令行工具，可以让你...

    4 年前
  • npm 包 @ianwalter/rollup-plugin-hashbang 使用教程

    简介 @ianwalter/rollup-plugin-hashbang 是一个 Rollup 插件，它可以帮助你在打包时自动在输出的文件开头添加一个 hashbang，以便于在 Linux 或 ma...

    4 年前
  • npm 包 @ianwalter/babel-preset-lib 使用教程

    简介 @ianwalter/babel-preset-lib 是一个由 Ian Walter 创建的 babel 预设包，其主要用途是为开发者提供一条轻松的途径来转换并编译他们的前端 JavaScri...

    4 年前

相关推荐

    暂无文章