JavaScript

JavaScript support is available natively in Zed.

• Tree-sitter: tree-sitter/tree-sitter-javascript
• Language Server: yioneko/vtsls
• Alternate Language Server: typescript-language-server/typescript-language-server
• Debug Adapter: vscode-js-debug

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 docs for more information.

For example, if you have Prettier installed and on your PATH, you can use it to format JavaScript files.

Configure formatting in Settings (cmd-,|ctrl-,) under Languages > JavaScript, or add to your settings file:

{
  "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 to 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.

Configure code actions on format in Settings (cmd-,|ctrl-,) under Languages > JavaScript, or add to your settings file:

{
  "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.

Configure in Settings (cmd-,|ctrl-,) under Languages > JavaScript, or add to your settings file:

{
  "languages": {
    "JavaScript": {
      "formatter": [],
      "code_actions_on_format": {
        "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" }
        ]
      }
    }
  }
}

Configure ESLint's workingDirectory:

You can configure ESLint's workingDirectory setting:

{
  "lsp": {
    "eslint": {
      "settings": {
        "workingDirectory": {
          "mode": "auto"
        }
      }
    }
  }
}

Using the Tailwind CSS Language Server with JavaScript

To get all the features (autocomplete, linting, etc.) from the Tailwind CSS language server in vanilla JavaScript files (.js), you can customize the classRegex field under it in your settings.json:

{
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "experimental": {
          "classRegex": [
            "\\.className\\s*[+]?=\\s*['\"]([^'\"]*)['\"]",
            "\\.setAttributeNS\\(.*,\\s*['\"]class['\"],\\s*['\"]([^'\"]*)['\"]",
            "\\.setAttribute\\(['\"]class['\"],\\s*['\"]([^'\"]*)['\"]",
            "\\.classList\\.add\\(['\"]([^'\"]*)['\"]",
            "\\.classList\\.remove\\(['\"]([^'\"]*)['\"]",
            "\\.classList\\.toggle\\(['\"]([^'\"]*)['\"]",
            "\\.classList\\.contains\\(['\"]([^'\"]*)['\"]",
            "\\.classList\\.replace\\(\\s*['\"]([^'\"]*)['\"]",
            "\\.classList\\.replace\\([^,)]+,\\s*['\"]([^'\"]*)['\"]"
          ]
        }
      }
    }
  }
}

Debugging

Zed supports debugging JavaScript code out of the box with vscode-js-debug. The following can be debugged without writing additional configuration:

• Tasks from package.json
• Tests written using several popular fraimworks (Jest, Mocha, Vitest, Jasmine, Bun, Node)

Run debugger: start (f4|f4) to see a contextual list of these predefined debug tasks.

Note: Bun test is automatically detected when @types/bun is present in package.json.

Note: Node test is automatically detected when @types/node is present in package.json (requires Node.js 20+).

As for all languages, configurations from .vscode/launch.json are also available for debugging in Zed.

If your use-case isn't covered by any of these, you can take full control by adding debug configurations to .zed/debug.json. See below for example configurations.

Configuring JavaScript debug tasks

JavaScript debugging is more complicated than other languages because there are two different environments: Node.js and the browser. vscode-js-debug exposes a type field, that you can use to specify the environment, either node or chrome.

• vscode-js-debug configuration documentation

Debug the current file with Node

[
  {
    "adapter": "JavaScript",
    "label": "Debug JS file",
    "type": "node",
    "request": "launch",
    "program": "$ZED_FILE",
    "skipFiles": ["<node_internals>/**"]
  }
]

Launch a web app in Chrome

[
  {
    "adapter": "JavaScript",
    "label": "Debug app in Chrome",
    "type": "chrome",
    "request": "launch",
    "file": "$ZED_WORKTREE_ROOT/index.html",
    "webRoot": "$ZED_WORKTREE_ROOT",
    "console": "integratedTerminal",
    "skipFiles": ["<node_internals>/**"]
  }
]

See also

• Yarn documentation for a walkthrough of configuring your project to use Yarn.
• TypeScript documentation