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 to 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 "code_actions_on_format": {
53 "source.fixAll.eslint": true
54 }
55 }
56 }
57}
58```
59
60You can also only execute a single ESLint rule when using `fixAll`:
61
62```json [settings]
63{
64 "languages": {
65 "JavaScript": {
66 "code_actions_on_format": {
67 "source.fixAll.eslint": true
68 }
69 }
70 },
71 "lsp": {
72 "eslint": {
73 "settings": {
74 "codeActionOnSave": {
75 "rules": ["import/order"]
76 }
77 }
78 }
79 }
80}
81```
82
83> **Note:** the other formatter you have configured will still run, after ESLint.
84> So if your language server or Prettier configuration don't format according to
85> ESLint's rules, then they will overwrite what ESLint fixed and you end up with
86> errors.
87
88If you **only** want to run ESLint on save, you can configure code actions as
89the formatter:
90
91```json [settings]
92{
93 "languages": {
94 "JavaScript": {
95 "formatter": [],
96 "code_actions_on_format": {
97 "source.fixAll.eslint": true
98 }
99 }
100 }
101}
102```
103
104### Configure ESLint's `nodePath`:
105
106You can configure ESLint's `nodePath` setting:
107
108```json [settings]
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 [settings]
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 [settings]
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 [settings]
164{
165 "lsp": {
166 "eslint": {
167 "settings": {
168 "workingDirectory": {
169 "mode": "auto"
170 }
171 }
172 }
173 }
174}
175```
176
177## Debugging
178
179Zed supports debugging JavaScript code out of the box with `vscode-js-debug`.
180The following can be debugged without writing additional configuration:
181
182- Tasks from `package.json`
183- Tests written using several popular frameworks (Jest, Mocha, Vitest, Jasmine, Bun, Node)
184
185Run {#action debugger::Start} ({#kb debugger::Start}) to see a contextual list of these predefined debug tasks.
186
187> **Note:** Bun test is automatically detected when `@types/bun` is present in `package.json`.
188>
189> **Note:** Node test is automatically detected when `@types/node` is present in `package.json` (requires Node.js 20+).
190
191As for all languages, configurations from `.vscode/launch.json` are also available for debugging in Zed.
192
193If 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.
194
195### Configuring JavaScript debug tasks
196
197JavaScript debugging is more complicated than other languages because there are two different environments: Node.js and the browser. `vscode-js-debug` exposes a `type` field, that you can use to specify the environment, either `node` or `chrome`.
198
199- [vscode-js-debug configuration documentation](https://github.com/microsoft/vscode-js-debug/blob/main/OPTIONS.md)
200
201### Debug the current file with Node
202
203```json [debug]
204[
205 {
206 "adapter": "JavaScript",
207 "label": "Debug JS file",
208 "type": "node",
209 "request": "launch",
210 "program": "$ZED_FILE",
211 "skipFiles": ["<node_internals>/**"]
212 }
213]
214```
215
216### Launch a web app in Chrome
217
218```json [debug]
219[
220 {
221 "adapter": "JavaScript",
222 "label": "Debug app in Chrome",
223 "type": "chrome",
224 "request": "launch",
225 "file": "$ZED_WORKTREE_ROOT/index.html",
226 "webRoot": "$ZED_WORKTREE_ROOT",
227 "console": "integratedTerminal",
228 "skipFiles": ["<node_internals>/**"]
229 }
230]
231```
232
233## See also
234
235- [Yarn documentation](./yarn.md) for a walkthrough of configuring your project to use Yarn.
236- [TypeScript documentation](./typescript.md)