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```
145
146## Yarn integration
147
148See [Yarn documentation](./yarn.md) for a walkthrough of configuring your project to use Yarn.