JavaScript

Zed 原生支援 JavaScript。

• 樹狀解析器：tree-sitter-javascript
• 語言伺服器：typescript-language-server

程式碼格式化

預設情況下，JavaScript 會在儲存時使用 TypeScript 內建的程式碼格式化功能進行格式化。但許多 JavaScript 專案使用其他命令列程式碼格式化工具，例如 Prettier。您可以透過在設定中指定 JavaScript 的「外部」程式碼格式化工具來使用這些工具之一。如需更多資訊，請參閱設定文件。

例如，如果您已安裝 Prettier 並將其新增至 PATH 中，則可以透過將以下內容新增至 settings.json 來使用它格式化 JavaScript 檔案

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

ESLint

您可以將 Zed 設定為在格式化時執行 eslint --fix 來格式化程式碼（需要 Zed 0.125.0）

{
  "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，則可以將程式碼動作設定為格式化工具（需要 Zed 0.130.x）

{
  "languages": {
    "JavaScript": {
      "formatter": {
        "code_actions": {
          "source.fixAll.eslint": true
        }
      }
    }
  }
}

設定 ESLint 的 nodePath

您可以設定 ESLint 的 nodePath 設定（需要 Zed 0.127.0）

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

設定 ESLint 的 problems

您可以設定 ESLint 的 problems 設定（需要 Zed 0.130.x）。

例如，以下是設定 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" }
        ]
      }
    }
  }
}

Yarn 整合

如需設定專案以使用 Yarn 的逐步說明，請參閱Yarn 文件。