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