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- Debug Adapter: [vscode-js-debug](https://github.com/microsoft/vscode-js-debug)
8
9## Code formatting
10
11Formatting on save is enabled by default for JavaScript, using TypeScript's built-in code formatting.
12But many JavaScript projects use other command-line code-formatting tools, such as [Prettier](https://prettier.io/).
13You can use one of these tools by specifying an _external_ code formatter for JavaScript in your settings.
14See [the configuration docs](../configuring-zed.md) for more information.
15
16For 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`:
17
18```json [settings]
19{
20 "languages": {
21 "JavaScript": {
22 "formatter": {
23 "external": {
24 "command": "prettier",
25 "arguments": ["--stdin-filepath", "{buffer_path}"]
26 }
27 }
28 }
29 }
30}
31```
32
33## JSX
34
35Zed supports JSX syntax highlighting out of the box.
36
37In JSX strings, the [`tailwindcss-language-server`](./tailwindcss.md) is used provide autocompletion for Tailwind CSS classes.
38
39## JSDoc
40
41Zed supports JSDoc syntax in JavaScript and TypeScript comments that match the JSDoc syntax.
42Zed uses [tree-sitter/tree-sitter-jsdoc](https://github.com/tree-sitter/tree-sitter-jsdoc) for parsing and highlighting JSDoc.
43
44## ESLint
45
46You can configure Zed to format code using `eslint --fix` by running the ESLint code action when formatting:
47
48```json [settings]
49{
50 "languages": {
51 "JavaScript": {
52 "formatter": [
53 {
54 "code_action": "source.fixAll.eslint"
55 },
56 "auto"
57 ]
58 }
59 }
60}
61```
62
63You can also only execute a single ESLint rule when using `fixAll`:
64
65```json [settings]
66{
67 "languages": {
68 "JavaScript": {
69 "formatter": [
70 {
71 "code_action": "source.fixAll.eslint"
72 },
73 "auto"
74 ]
75 }
76 },
77 "lsp": {
78 "eslint": {
79 "settings": {
80 "codeActionOnSave": {
81 "rules": ["import/order"]
82 }
83 }
84 }
85 }
86}
87```
88
89> **Note:** the other formatter you have configured will still run, after ESLint.
90> So if your language server or Prettier configuration don't format according to
91> ESLint's rules, then they will overwrite what ESLint fixed and you end up with
92> errors.
93
94If you **only** want to run ESLint on save, you can configure code actions as
95the formatter:
96
97```json [settings]
98{
99 "languages": {
100 "JavaScript": {
101 "formatter": {
102 "code_action": "source.fixAll.eslint"
103 }
104 }
105 }
106}
107```
108
109### Configure ESLint's `nodePath`:
110
111You can configure ESLint's `nodePath` setting:
112
113```json [settings]
114{
115 "lsp": {
116 "eslint": {
117 "settings": {
118 "nodePath": ".yarn/sdks"
119 }
120 }
121 }
122}
123```
124
125### Configure ESLint's `problems`:
126
127You can configure ESLint's `problems` setting.
128
129For example, here's how to set `problems.shortenToSingleLine`:
130
131```json [settings]
132{
133 "lsp": {
134 "eslint": {
135 "settings": {
136 "problems": {
137 "shortenToSingleLine": true
138 }
139 }
140 }
141 }
142}
143```
144
145### Configure ESLint's `rulesCustomizations`:
146
147You can configure ESLint's `rulesCustomizations` setting:
148
149```json [settings]
150{
151 "lsp": {
152 "eslint": {
153 "settings": {
154 "rulesCustomizations": [
155 // set all eslint errors/warnings to show as warnings
156 { "rule": "*", "severity": "warn" }
157 ]
158 }
159 }
160 }
161}
162```
163
164### Configure ESLint's `workingDirectory`:
165
166You can configure ESLint's `workingDirectory` setting:
167
168```json [settings]
169{
170 "lsp": {
171 "eslint": {
172 "settings": {
173 "workingDirectory": {
174 "mode": "auto"
175 }
176 }
177 }
178 }
179}
180```
181
182## Debugging
183
184Zed supports debugging JavaScript code out of the box.
185The following can be debugged without writing additional configuration:
186
187- Tasks from `package.json`
188- Tests written using several popular frameworks (Jest, Mocha, Vitest, Jasmine, Bun, Node)
189
190Run {#action debugger::Start} ({#kb debugger::Start}) to see a contextual list of these predefined debug tasks.
191
192> **Note:** Bun test is automatically detected when `@types/bun` is present in `package.json`.
193>
194> **Note:** Node test is automatically detected when `@types/node` is present in `package.json` (requires Node.js 20+).
195
196As for all languages, configurations from `.vscode/launch.json` are also available for debugging in Zed.
197
198If your use-case isn't covered by any of these, you can take full control by adding debug configurations to `.zed/debug.json`. See below for example configurations.
199
200### Debug the current file
201
202```json [debug]
203[
204 {
205 "adapter": "JavaScript",
206 "label": "Debug JS file",
207 "type": "node",
208 "request": "launch",
209 "program": "$ZED_FILE",
210 "skipFiles": ["<node_internals>/**"]
211 }
212]
213```
214
215This implicitly runs the current file using `node`.
216
217### Launch a web app in Chrome
218
219```json [debug]
220[
221 {
222 "adapter": "JavaScript",
223 "label": "Debug app in Chrome",
224 "type": "chrome",
225 "request": "launch",
226 "file": "$ZED_WORKTREE_ROOT/index.html",
227 "webRoot": "$ZED_WORKTREE_ROOT",
228 "console": "integratedTerminal",
229 "skipFiles": ["<node_internals>/**"]
230 }
231]
232```
233
234## See also
235
236- [Yarn documentation](./yarn.md) for a walkthrough of configuring your project to use Yarn.
237- [TypeScript documentation](./typescript.md)