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<!--
30## JSX
31
32TBD: Mention JSX
33
34## JSDoc
35
36TBD: Document JSDoc support in Zed.
37
38- Tree Sitter: [tree-sitter/tree-sitter-jsdoc](https://github.com/tree-sitter/tree-sitter-jsdoc)
39-->
40
41## ESLint
42
43You can configure Zed to format code using `eslint --fix` by running the ESLint
44code action when formatting:
45
46```json
47{
48 "languages": {
49 "JavaScript": {
50 "code_actions_on_format": {
51 "source.fixAll.eslint": true
52 }
53 }
54 }
55}
56```
57
58You can also only execute a single ESLint rule when using `fixAll`:
59
60```json
61{
62 "languages": {
63 "JavaScript": {
64 "code_actions_on_format": {
65 "source.fixAll.eslint": true
66 }
67 }
68 },
69 "lsp": {
70 "eslint": {
71 "settings": {
72 "codeActionOnSave": {
73 "rules": ["import/order"]
74 }
75 }
76 }
77 }
78}
79```
80
81> **Note:** the other formatter you have configured will still run, after ESLint.
82> So if your language server or prettier configuration don't format according to
83> ESLint's rules, then they will overwrite what ESLint fixed and you end up with
84> errors.
85
86If you **only** want to run ESLint on save, you can configure code actions as
87the formatter:
88
89```json
90{
91 "languages": {
92 "JavaScript": {
93 "formatter": {
94 "code_actions": {
95 "source.fixAll.eslint": true
96 }
97 }
98 }
99 }
100}
101```
102
103### Configure ESLint's `nodePath`:
104
105You can configure ESLint's `nodePath` setting:
106
107```json
108{
109 "lsp": {
110 "eslint": {
111 "settings": {
112 "nodePath": ".yarn/sdks"
113 }
114 }
115 }
116}
117```
118
119### Configure ESLint's `problems`:
120
121You can configure ESLint's `problems` setting.
122
123For example, here's how to set `problems.shortenToSingleLine`:
124
125```json
126{
127 "lsp": {
128 "eslint": {
129 "settings": {
130 "problems": {
131 "shortenToSingleLine": true
132 }
133 }
134 }
135 }
136}
137```
138
139### Configure ESLint's `rulesCustomizations`:
140
141You can configure ESLint's `rulesCustomizations` setting:
142
143```json
144{
145 "lsp": {
146 "eslint": {
147 "settings": {
148 "rulesCustomizations": [
149 // set all eslint errors/warnings to show as warnings
150 { "rule": "*", "severity": "warn" }
151 ]
152 }
153 }
154 }
155}
156```
157
158## See also
159
160- [Yarn documentation](./yarn.md) for a walkthrough of configuring your project to use Yarn.
161- [TypeScript documentation](./typescript.md)