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 "language_overrides": {
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.
68So if your language server or prettier configuration don't format according to
69ESLint's rules, then they will overwrite what ESLint fixed and you end up with
70errors.
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```