JavaScript

JavaScript support is available natively in Zed.

Code formatting

Formatting 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. You can use one of these tools by specifying an external code formatter for JavaScript in your settings. See the configuration documentation for more information.

For 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:

{
  "languages": {
    "JavaScript": {
      "formatter": {
        "external": {
          "command": "prettier",
          "arguments": ["--stdin-filepath", "{buffer_path}"]
        }
      }
    }
  }
}

JSX

Zed supports JSX syntax highlighting out of the box.

In JSX strings, the tailwindcss-language-server is used provide autocompletion for Tailwind CSS classes.

JSDoc

Zed supports JSDoc syntax in JavaScript and TypeScript comments that match the JSDoc syntax. Zed uses tree-sitter/tree-sitter-jsdoc for parsing and highlighting JSDoc.

ESLint

You can configure Zed to format code using eslint --fix by running the ESLint code action when formatting:

{
  "languages": {
    "JavaScript": {
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      }
    }
  }
}

You can also only execute a single ESLint rule when using fixAll:

{
  "languages": {
    "JavaScript": {
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      }
    }
  },
  "lsp": {
    "eslint": {
      "settings": {
        "codeActionOnSave": {
          "rules": ["import/order"]
        }
      }
    }
  }
}

Note: the other formatter you have configured will still run, after ESLint. So if your language server or prettier configuration don't format according to ESLint's rules, then they will overwrite what ESLint fixed and you end up with errors.

If you only want to run ESLint on save, you can configure code actions as the formatter:

{
  "languages": {
    "JavaScript": {
      "formatter": {
        "code_actions": {
          "source.fixAll.eslint": true
        }
      }
    }
  }
}

Configure ESLint's nodePath:

You can configure ESLint's nodePath setting:

{
  "lsp": {
    "eslint": {
      "settings": {
        "nodePath": ".yarn/sdks"
      }
    }
  }
}

Configure ESLint's problems:

You can configure ESLint's problems setting.

For example, here's how to set problems.shortenToSingleLine:

{
  "lsp": {
    "eslint": {
      "settings": {
        "problems": {
          "shortenToSingleLine": true
        }
      }
    }
  }
}

Configure ESLint's rulesCustomizations:

You can configure ESLint's rulesCustomizations setting:

{
  "lsp": {
    "eslint": {
      "settings": {
        "rulesCustomizations": [
          // set all eslint errors/warnings to show as warnings
          { "rule": "*", "severity": "warn" }
        ]
      }
    }
  }
}

See also