VS Code 扩展

🌐 VS Code Extension

TIP

此页面用于为 Oxc VS Code 扩展做贡献。要下载该扩展，请参阅 Visual Studio Marketplace 或 Open VSX Registry。

发展

🌐 Development

确保你使用 just init 设置好 oxc 项目。为此需要一些工具。更多信息请查看位于根目录 oxc 项目的 justfile。

🌐 Make sure you setup the oxc project with just init. Some tools are required for that. More information inside the justfile located on the root oxc project.

在 editors/vscode 目录下，运行 just init 后再运行 pnpm install。

🌐 After just init run pnpm install inside editors/vscode directory.

在本地构建和运行扩展

🌐 Building and running the extension locally

有两种方法可以运行和测试你对 oxc VS Code 扩展所做的更改。

🌐 There are two options for running and testing your changes to the oxc VS Code extension.

通过命令行：

• 在 editors/vscode 中，运行 pnpm build 来编译 vscode 扩展并构建语言服务器的发布版本。
• 运行 pnpm install-extension 在你的 VS Code 编辑器上安装它。
• 按 CTRL + SHIFT + P，然后搜索“开发者：重新加载窗口”。
• 你现在可以在 VS Code 中手动测试你的更改。

通过 VS Code 本身：

• 在 VS Code 中打开 oxc 仓库。
• 在编辑器左侧边栏中进入“运行和调试”选项卡。
• 选择 Launch VS Code Extension 配置。
• 点击顶部的绿色播放按钮。
• 这将构建 VS Code 扩展，并启动一个新的 VS Code 窗口，已安装新构建的 VS Code 扩展。

构建服务器调试版本

🌐 Building Debug Version of Server

运行 pnpm build 将构建服务器的发布版本，这可能需要一些时间。如果你希望获得更快的反馈，请使用以下流程：

🌐 Running pnpm build will build the release version of the server, This can take some time. If you want faster feedback use the follow flow:

pnpm compile # transform TS Code
pnpm server:build:debug # build the debug version of the language server
pnpm package # package it as VSCode Extension
pnpm install-extension

确保告诉 VSCode 扩展使用带有环境变量 SERVER_PATH_DEV="/workspace/editors/vscode/target/debug/oxc_language_server" 的调试版本。

🌐 Make sure to tell the VSCode Extension to use the debug build with the env variable: SERVER_PATH_DEV="/workspace/editors/vscode/target/debug/oxc_language_server".

或者使用带有 settings.json 的扩展设置：

🌐 Or use the Extension Settings with settings.json:

{
  "oxc.path.oxlint": "./editors/vscode/target/debug/oxc_language_server"
}

对于 Windows，oxc_language_server 将提供一个 exe 扩展名。

🌐 For Windows, the oxc_language_server will be provided with a exe extension.

使用输出通道

🌐 Use the Output Channel

要了解扩展和语言服务器的工作原理，你可以在 VSCode 中使用 Oxc 输出通道。 要获取更多信息，请在 settings.json 中使用扩展设置：

🌐 To understand what the Extension and the Language Server is doing, you can use the Oxc Output Channel inside VSCode. The get more information use the Extension Setting inside settings.json:

{
  "oxc.trace.server": "verbose"
}

在 oxc_language_server 上，你可以使用 info! 或 error! 宏向输出通道发送消息。

🌐 On oxc_language_server you can use the info! or error! macro to send messages to the output channel.

写测试

🌐 Writing a Test

根据更改的内容，你应该为其创建一个测试。对 oxc_language_server 进行测试可以确保（服务器）Lint 工具按预期工作。当你想测试行为更改时，请在 vscode 中编写测试。例如：在执行命令或代码操作时，期望应用 lint 修复。

🌐 Depending on the changes, you should create a Test for it. Tests on the oxc_language_server will make sure the (Server)Linter works as expected. Write Tests in vscode when you want to test changing behavior. Example: expecting a lint fix to be applied, when executing a command or code action.