1# JavaScript
2
3JavaScript support is available natively in Zed.
4
5- Tree-sitter: [tree-sitter/tree-sitter-javascript](https://github.com/tree-sitter/tree-sitter-javascript)
6- Language Server: [typescript-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.
11But many JavaScript projects use other command-line code-formatting tools, such as [Prettier](https://prettier.io/).
12You can use one of these tools by specifying an _external_ code formatter for JavaScript in your settings.
13See [the configuration docs](../configuring-zed.md) for more information.
14
15For 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`:
16
17```json
18{
19 "languages": {
20 "JavaScript": {
21 "formatter": {
22 "external": {
23 "command": "prettier",
24 "arguments": ["--stdin-filepath", "{buffer_path}"]
25 }
26 }
27 }
28 }
29}
30```
31
32## JSX
33
34Zed supports JSX syntax highlighting out of the box.
35
36In JSX strings, the [`tailwindcss-language-server`](./tailwindcss.md) is used provide autocompletion for Tailwind CSS classes.
37
38## JSDoc
39
40Zed supports JSDoc syntax in JavaScript and TypeScript comments that match the JSDoc syntax.
41Zed uses [tree-sitter/tree-sitter-jsdoc](https://github.com/tree-sitter/tree-sitter-jsdoc) for parsing and highlighting JSDoc.
42
43## ESLint
44
45You can configure Zed to format code using `eslint --fix` by running the ESLint code action when formatting:
46
47```json
48{
49 "languages": {
50 "JavaScript": {
51 "code_actions_on_format": {
52 "source.fixAll.eslint": true
53 }
54 }
55 }
56}
57```
58
59You can also only execute a single ESLint rule when using `fixAll`:
60
61```json
62{
63 "languages": {
64 "JavaScript": {
65 "code_actions_on_format": {
66 "source.fixAll.eslint": true
67 }
68 }
69 },
70 "lsp": {
71 "eslint": {
72 "settings": {
73 "codeActionOnSave": {
74 "rules": ["import/order"]
75 }
76 }
77 }
78 }
79}
80```
81
82> **Note:** the other formatter you have configured will still run, after ESLint.
83> So if your language server or Prettier configuration don't format according to
84> ESLint's rules, then they will overwrite what ESLint fixed and you end up with
85> errors.
86
87If you **only** want to run ESLint on save, you can configure code actions as
88the formatter:
89
90```json
91{
92 "languages": {
93 "JavaScript": {
94 "formatter": {
95 "code_actions": {
96 "source.fixAll.eslint": true
97 }
98 }
99 }
100 }
101}
102```
103
104### Configure ESLint's `nodePath`:
105
106You can configure ESLint's `nodePath` setting:
107
108```json
109{
110 "lsp": {
111 "eslint": {
112 "settings": {
113 "nodePath": ".yarn/sdks"
114 }
115 }
116 }
117}
118```
119
120### Configure ESLint's `problems`:
121
122You can configure ESLint's `problems` setting.
123
124For example, here's how to set `problems.shortenToSingleLine`:
125
126```json
127{
128 "lsp": {
129 "eslint": {
130 "settings": {
131 "problems": {
132 "shortenToSingleLine": true
133 }
134 }
135 }
136 }
137}
138```
139
140### Configure ESLint's `rulesCustomizations`:
141
142You can configure ESLint's `rulesCustomizations` setting:
143
144```json
145{
146 "lsp": {
147 "eslint": {
148 "settings": {
149 "rulesCustomizations": [
150 // set all eslint errors/warnings to show as warnings
151 { "rule": "*", "severity": "warn" }
152 ]
153 }
154 }
155 }
156}
157```
158
159### Configure ESLint's `workingDirectory`:
160
161You can configure ESLint's `workingDirectory` setting:
162
163```json
164{
165 "lsp": {
166 "eslint": {
167 "settings": {
168 "workingDirectory": {
169 "mode": "auto"
170 }
171 }
172 }
173 }
174}
175```
176
177## See also
178
179- [Yarn documentation](./yarn.md) for a walkthrough of configuring your project to use Yarn.
180- [TypeScript documentation](./typescript.md)