JavaScript

JavaScriptのサポートはZedでネイティブに利用できます。

• Tree Sitter: tree-sitter-javascript
• 言語サーバ: typescript-language-server

コードのフォーマット

保存時のフォーマットは、TypeScriptの組み込みコードフォーマットを使用してJavaScriptに対してデフォルトで有効になっています。ただし、多くのJavaScriptプロジェクトでは、Prettierなどのその他のコマンドラインコードフォーマットツールが使用されています。設定でJavaScriptに対して外部コードフォーマットを指定することで、これらのツールのいずれかを使用できます。詳細については、構成ドキュメントを参照してください。

たとえば、PrettierがインストールされていてPATHにある場合、settings.jsonに以下を追加することで、JavaScriptファイルをフォーマットできます。

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

ESLint

フォーマット時にESLintコードアクションを実行することで、eslint --fixを使用してコードをフォーマットするようにZedを設定できます（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 のドキュメントを参照してください。