JavaScript

JavaScript 支持在 Zed 中是原生提供的。

代码格式化

默认情况下，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

您可以配置 Zed 以在使用格式化时运行 ESLint 代码操作来使用 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": {
          "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"
        }
      }
    }
  }
}

另请参阅