1# JavaScript
  2
  3JavaScript support is available natively in Zed.
  4
  5- Tree Sitter: [tree-sitter-javascript](https://github.com/tree-sitter/tree-sitter-javascript)
  6- Language Server: [typescript-language-server](https://github.com/typescript-language-server/typescript-language-server)
  7
  8### Code formatting
  9
 10Formatting on save is enabled by default for JavaScript, using TypeScript's built-in code formatting. But many JavaScript projects use other command-line code-formatting tools, such as [Prettier](https://prettier.io/). You can use one of these tools by specifying an _external_ code formatter for JavaScript in your settings. See the [configuration](../configuring-zed.md) documentation for more information.
 11
 12For example, if you have Prettier installed and on your `PATH`, you can use it to format JavaScript files by adding the following to your `settings.json`:
 13
 14```json
 15{
 16  "languages": {
 17    "JavaScript": {
 18      "format_on_save": {
 19        "external": {
 20          "command": "prettier",
 21          "arguments": ["--stdin-filepath", "{buffer_path}"]
 22        }
 23      }
 24    }
 25  }
 26}
 27```
 28
 29### ESLint
 30
 31You can configure Zed to format code using `eslint --fix` by running the ESLint
 32code action when formatting (requires Zed `0.125.0`):
 33
 34```json
 35{
 36  "languages": {
 37    "JavaScript": {
 38      "code_actions_on_format": {
 39        "source.fixAll.eslint": true
 40      }
 41    }
 42  }
 43}
 44```
 45
 46You can also only execute a single ESLint rule when using `fixAll`:
 47
 48```json
 49{
 50  "languages": {
 51    "JavaScript": {
 52      "code_actions_on_format": {
 53        "source.fixAll.eslint": true
 54      }
 55    }
 56  },
 57  "lsp": {
 58    "eslint": {
 59      "settings": {
 60        "codeActionOnSave": {
 61          "rules": ["import/order"]
 62        }
 63      }
 64    }
 65  }
 66}
 67```
 68
 69> **Note:** the other formatter you have configured will still run, after ESLint.
 70> So if your language server or prettier configuration don't format according to
 71> ESLint's rules, then they will overwrite what ESLint fixed and you end up with
 72> errors.
 73
 74If you **only** want to run ESLint on save, you can configure code actions as
 75the formatter (requires Zed `0.130.x`):
 76
 77```json
 78{
 79  "languages": {
 80    "JavaScript": {
 81      "formatter": {
 82        "code_actions": {
 83          "source.fixAll.eslint": true
 84        }
 85      }
 86    }
 87  }
 88}
 89```
 90
 91#### Configure ESLint's `nodePath`:
 92
 93You can configure ESLint's `nodePath` setting (requires Zed `0.127.0`):
 94
 95```json
 96{
 97  "lsp": {
 98    "eslint": {
 99      "settings": {
100        "nodePath": ".yarn/sdks"
101      }
102    }
103  }
104}
105```
106
107#### Configure ESLint's `problems`:
108
109You can configure ESLint's `problems` setting (requires Zed `0.130.x`).
110
111For example, here's how to set `problems.shortenToSingleLine`:
112
113```json
114{
115  "lsp": {
116    "eslint": {
117      "settings": {
118        "problems": {
119          "shortenToSingleLine": true
120        }
121      }
122    }
123  }
124}
125```
126
127#### Configure ESLint's `rulesCustomizations`:
128
129You can configure ESLint's `rulesCustomizations` setting:
130
131```json
132{
133  "lsp": {
134    "eslint": {
135      "settings": {
136        "rulesCustomizations": [
137          // set all eslint errors/warnings to show as warnings
138          { "rule": "*", "severity": "warn" }
139        ]
140      }
141    }
142  }
143}
144```