JavaScript

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:

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

ESLint

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

{
    "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 (requires Zed 0.130.x):

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

Configure ESLint's nodePath:

You can configure ESLint's nodePath setting (requires Zed 0.127.0):

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

Configure ESLint's problems:

You can configure ESLint's problems setting (requires Zed 0.130.x).

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

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