JavaScript

Zed 原生支持 JavaScript。

代码格式化

JavaScript 默认启用保存时格式化，使用 TypeScript 内置的代码格式化功能。但是许多 JavaScript 项目使用其他命令行代码格式化工具，例如 Prettier。您可以通过在设置中为 JavaScript 指定一个外部代码格式化程序来使用这些工具之一。有关更多信息，请参阅配置文档。

例如，如果您已安装 Prettier 并在您的 PATH 中，您可以通过将以下内容添加到您的 settings.json 来使用它格式化 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

您可以通过在格式化时运行 ESLint 代码操作来配置 Zed 使用 eslint --fix 格式化代码

{
  "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，您可以将代码操作配置为格式化程序

{
  "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": [
          // set all eslint errors/warnings to show as warnings
          { "rule": "*", "severity": "warn" }
        ]
      }
    }
  }
}

配置 ESLint 的 workingDirectory

您可以配置 ESLint 的 workingDirectory 设置

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

调试

Zed 开箱即用支持使用 vscode-js-debug 调试 JavaScript 代码。无需额外配置即可调试以下内容

  • 来自 package.json 的任务
  • 使用多个流行框架（Jest、Mocha、Vitest、Jasmine、Bun、Node）编写的测试

运行 debugger: start (f4|f4) 以查看这些预定义调试任务的上下文列表。

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

注意：当 package.json 中存在 @types/node 时，会自动检测 Node 测试（需要 Node.js 20+）。

对于所有语言，.vscode/launch.json 中的配置也可用于在 Zed 中调试。

如果您的用例未涵盖在这些中，您可以通过将调试配置添加到 .zed/debug.json 来完全控制。请参阅下面的配置示例。

配置 JavaScript 调试任务

JavaScript 调试比其他语言更复杂，因为存在两种不同的环境：Node.js 和浏览器。vscode-js-debug 暴露了一个 type 字段，您可以使用它来指定环境，可以是 node 或 chrome。

使用 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>/**"]
  }
]

另请参阅