入门 Zed Industries 2026-09-14 17:42:19 · 0 阅读

第83章 Zed编辑器JavaScript支持配置指南

Zed 原生支持 JavaScript。

Tree-sitter: tree-sitter/tree-sitter-javascript
语言服务器: yioneko/vtsls
备用语言服务器: typescript-language-server/typescript-language-server
调试适配器: vscode-js-debug

代码格式化

JavaScript 默认禁用保存时格式化。

如需开启 format-on-save，可以全局启用，也可以仅针对 JavaScript 或 TypeScript 启用。

{
  "languages": {
    "JavaScript": {
      "format_on_save": "on"
    },
    "TypeScript": {
      "format_on_save": "on"
    }
  }
}

许多 JavaScript 项目使用命令行格式化工具，例如 Prettier。你可以在设置中为 JavaScript 指定一个外部代码格式化工具来使用这些工具。更多详情请参见配置文档。

例如，如果你已安装 Prettier 且将其路径添加到 PATH，就可以用它来格式化 JavaScript 文件。

在设置（{#kb zed::OpenSettings}）的 Languages > JavaScript 下配置格式化，或在设置文件中添加以下配置：

{
  "languages": {
    "JavaScript": {
      "formatter": {
        "external": {
          "command": "prettier",
          "arguments": ["--stdin-filepath", "{buffer_path}"]
        }
      }
    }
  }
}

JSX

Zed 开箱即用支持 JSX 语法高亮。

在 JSX 字符串中，tailwindcss-language-server 用于提供 Tailwind CSS 类名的自动补全。

JSDoc

Zed 支持在 JavaScript 和 TypeScript 注释中使用符合 JSDoc 语法的 JSDoc 标记。 Zed 使用 tree-sitter/tree-sitter-jsdoc 来解析和高亮 JSDoc。

ESLint

你可以配置 Zed 在格式化时运行 ESLint 代码操作，即通过 eslint --fix 来格式化代码。

在设置（{#kb zed::OpenSettings}）中的 Languages > JavaScript 下配置格式化时的代码操作，或在你的配置文件中添加：

{
  "languages": {
    "JavaScript": {
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      }
    }
  }
}

使用 fixAll 时，也可以只执行某一条 ESLint 规则：

{
  "languages": {
    "JavaScript": {
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      }
    }
  },
  "lsp": {
    "eslint": {
      "settings": {
        "codeActionOnSave": {
          "rules": ["import/order"]
        }
      }
    }
  }
}

注意：你配置的其他格式化工具仍会在 ESLint 之后运行。如果你的语言服务器或 Prettier 配置没有遵循 ESLint 的规则进行格式化，它们会覆盖 ESLint 修复的结果，导致报错。

如果你只想在保存时运行 ESLint，可以把代码操作配置为格式化工具。

在设置（{#kb zed::OpenSettings}）中的 Languages > JavaScript 下配置，或在你的配置文件中添加：

{
  "languages": {
    "JavaScript": {
      "formatter": [],
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      }
    }
  }
}

配置 ESLint 的 `nodePath`：

你可以配置 ESLint 的 nodePath 选项：

{
  "lsp": {
    "eslint": {
      "settings": {
        "nodePath": ".yarn/sdks"
      }
    }
  }
}

配置 ESLint 的 `problems`：

你可以配置 ESLint 的 problems 选项。

例如，以下是设置 problems.shortenToSingleLine 的方法：

{
  "lsp": {
    "eslint": {
      "settings": {
        "problems": {
          "shortenToSingleLine": true
        }
      }
    }
  }
}

配置 ESLint 的 `rulesCustomizations`：

你可以配置 ESLint 的 rulesCustomizations 设置：

{
  "lsp": {
    "eslint": {
      "settings": {
        "rulesCustomizations": [
          // 将所有 eslint 错误/警告显示为警告
          { "rule": "*", "severity": "warn" }
        ]
      }
    }
  }
}

配置 ESLint 的 `workingDirectory`：

你可以配置 ESLint 的 workingDirectory 设置：

{
  "lsp": {
    "eslint": {
      "settings": {
        "workingDirectory": {
          "mode": "auto"
        }
      }
    }
  }
}

在 JavaScript 中使用 Tailwind CSS Language Server

要在纯 JavaScript 文件（.js）中获得 Tailwind CSS language server 的所有功能（如自动补全、Linting 等），你可以在 settings.json 中自定义其下的 classRegex 字段：

{
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "experimental": {
          "classRegex": [
            "\\.className\\s*[+]?=\\s*['\"]([^'\"]*)['\"]",
            "\\.setAttributeNS\\(.*,\\s*['\"]class['\"],\\s*['\"]([^'\"]*)['\"]",
            "\\.setAttribute\\(['\"]class['\"],\\s*['\"]([^'\"]*)['\"]",
            "\\.classList\\.add\\(['\"]([^'\"]*)['\"]",
            "\\.classList\\.remove\\(['\"]([^'\"]*)['\"]",
            "\\.classList\\.toggle\\(['\"]([^'\"]*)['\"]",
            "\\.classList\\.contains\\(['\"]([^'\"]*)['\"]",
            "\\.classList\\.replace\\(\\s*['\"]([^'\"]*)['\"]",
            "\\.classList\\.replace\\([^,)]+,\\s*['\"]([^'\"]*)['\"]"
          ]
        }
      }
    }
  }
}

调试

Zed 通过 vscode-js-debug 开箱即用地支持 JavaScript 代码调试。以下场景无需额外配置即可直接调试：

package.json 中定义的任务
使用主流测试框架（Jest、Mocha、Vitest、Jasmine、Bun、Node）编写的测试

运行 {#action debugger::Start} ({#kb debugger::Start}) 可查看这些预定义调试任务的上下文列表。

注意： 当 package.json 中存在 @types/bun 时，系统会自动检测并支持 Bun 测试。

注意： 当 package.json 中存在 @types/node 时，系统会自动检测并支持 Node 测试（要求 Node.js 20 及以上版本）。

与其他语言一样，Zed 也支持使用 .vscode/launch.json 中的配置进行调试。

若上述方法无法满足需求，可在 .zed/debug.json 中添加自定义调试配置以获取完全控制。示例配置见下文。

配置 JavaScript 调试任务

JavaScript 调试比其他语言更复杂，因为它有两种不同的运行环境：Node.js 和浏览器。vscode-js-debug 提供了一个 type 字段，可用于指定环境，取值为 node 或 chrome。

vscode-js-debug 配置文档

用 Node 调试当前文件

[
  {
    "adapter": "JavaScript",
    "label": "Debug JS file",
    "type": "node",
    "request": "launch",
    "program": "$ZED_FILE",
    "skipFiles": ["<node_internals>/**"]
  }
]

在 Chrome 中启动 Web 应用

[
  {
    "adapter": "JavaScript",
    "label": "Debug app in Chrome",
    "type": "chrome",
    "request": "launch",
    "file": "$ZED_WORKTREE_ROOT/index.html",
    "webRoot": "$ZED_WORKTREE_ROOT",
    "console": "integratedTerminal",
    "skipFiles": ["<node_internals>/**"]
  }
]