javascript.md

  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](../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
 72#### Configure ESLint's `nodePath`:
 73
 74You can configure ESLint's `nodePath` setting (requires Zed `0.127.0`):
 75
 76```json
 77{
 78  "lsp": {
 79    "eslint": {
 80      "settings": {
 81        "nodePath": ".yarn/sdks"
 82      }
 83    }
 84  }
 85}
 86```
 87
 88#### Configure ESLint's `problems`:
 89
 90You can configure ESLint's `problems` setting (requires Zed `0.130.x`).
 91
 92For example, here's how to set `problems.shortenToSingleLine`:
 93
 94```json
 95{
 96  "lsp": {
 97    "eslint": {
 98      "settings": {
 99        "problems": {
100          "shortenToSingleLine": true
101        }
102      }
103    }
104  }
105}
106```