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