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