1# JavaScript
2
3- Tree Sitter: [tree-sitter-javascript](https://github.com/tree-sitter/tree-sitter-javascript)
4- Language Server: [typescript-language-server](https://github.com/typescript-language-server/typescript-language-server)
5
6### Code formatting
7
8Formatting 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.
9
10For 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`:
11
12```json
13{
14 "languages": {
15 "JavaScript": {
16 "format_on_save": {
17 "external": {
18 "command": "prettier",
19 "arguments": ["--stdin-filepath", "{buffer_path}"]
20 }
21 }
22 }
23 }
24}
25```
26
27### ESLint
28
29You can configure Zed to format code using `eslint --fix` by running the ESLint
30code action when formatting (requires Zed `0.125.0`):
31
32```json
33{
34 "languages": {
35 "JavaScript": {
36 "code_actions_on_format": {
37 "source.fixAll.eslint": true
38 }
39 }
40 }
41}
42```
43
44You can also only execute a single ESLint rule when using `fixAll`:
45
46```json
47{
48 "languages": {
49 "JavaScript": {
50 "code_actions_on_format": {
51 "source.fixAll.eslint": true
52 }
53 }
54 },
55 "lsp": {
56 "eslint": {
57 "settings": {
58 "codeActionOnSave": {
59 "rules": ["import/order"]
60 }
61 }
62 }
63 }
64}
65```
66
67> **Note:** the other formatter you have configured will still run, after ESLint.
68> So if your language server or prettier configuration don't format according to
69> ESLint's rules, then they will overwrite what ESLint fixed and you end up with
70> errors.
71
72If you **only** want to run ESLint on save, you can configure code actions as
73the formatter (requires Zed `0.130.x`):
74
75```json
76{
77 "languages": {
78 "JavaScript": {
79 "formatter": {
80 "code_actions": {
81 "source.fixAll.eslint": true
82 }
83 }
84 }
85 }
86}
87```
88
89#### Configure ESLint's `nodePath`:
90
91You can configure ESLint's `nodePath` setting (requires Zed `0.127.0`):
92
93```json
94{
95 "lsp": {
96 "eslint": {
97 "settings": {
98 "nodePath": ".yarn/sdks"
99 }
100 }
101 }
102}
103```
104
105#### Configure ESLint's `problems`:
106
107You can configure ESLint's `problems` setting (requires Zed `0.130.x`).
108
109For example, here's how to set `problems.shortenToSingleLine`:
110
111```json
112{
113 "lsp": {
114 "eslint": {
115 "settings": {
116 "problems": {
117 "shortenToSingleLine": true
118 }
119 }
120 }
121 }
122}
123```
124
125#### Configure ESLint's `rulesCustomizations`:
126
127You can configure ESLint's `rulesCustomizations` setting:
128
129```json
130{
131 "lsp": {
132 "eslint": {
133 "settings": {
134 "rulesCustomizations": [
135 // set all eslint errors/warnings to show as warnings
136 { "rule": "*", "severity": "warn" }
137 ]
138 }
139 }
140 }
141}
142```