Native support eslint fix on save

[korywka]

Check for existing issues

• [X] Completed

Describe the feature

The issue is the half one of the resolved https://github.com/zed-industries/zed/issues/5612 that was closed only with Prettier support.

VSCode, Atom, WebStorm and so on support eslint out of the box, just with eslint npm package and .eslintrc config. It would be awesome if Zed could do the same. For now, Zed lints errors, but no autofix on save for simple config:

{
  "theme": "Andromeda",
  "buffer_font_size": 15,
  "language_overrides": {
    "JavaScript": {
      "format_on_save": "on",
      "formatter": "auto"
    }
  }
}

eslint is the linter number 1 for JavaScript, so I believe this feature will not only help Zed users, but also increase usage of the editor among JS developers. Thanks 🖤

If applicable, add mockups / screenshots to help present your vision of the feature

[sjotterman]

I'm not sure if it's included in the scope of this, but I think it would be very helpful if eslint fixes were exposed as code actions. Very often I want to ignore a rule for a particular line or file, and both VS Code and Neovim LSP setups allow this to be done as a code action, rather than having to manually type out an // eslint-disable-next-line comment.

[jaydenseric]

It's important to be able to discriminate the ESLint code actions on save by ESLint rule. In VS Code, this is the config I use:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.codeActionsOnSave.rules": ["simple-import-sort/imports"]
}

This ensures that ESLint only sorts the imports on save, and it doesn't do undesired destructive things like delete unused code (because I hadn't finished writing the code yet, and I like to save as I go for formatting).

[r614]

+1 to exposing eslint fixes as code actions, I miss the dropdown from vscode

[korywka]

@JosephTLyons No rush, but please take a look how popular the issue is 🥹

[mrnugget]

We do have this now: https://github.com/zed-industries/zed/pull/7860

See here for how to set it up: https://github.com/zed-industries/zed/issues/4840#issuecomment-1961282033

What we don't have is what @jaydenseric asked for. @jaydenseric can you create a separate ticket for that? Because I think eslint fix on save is fixed by adding code actions on save. I'm going to close to issue, but if someone disagrees that this is still not fixed, let's reopen it.

[mrnugget]

Finally got around to documenting it too: https://zed.dev/docs/configuring-zed#code-actions-on-format

[korywka]

@mrnugget Thanks for the update. Can you provide please an example how to make eslint fix on save? Me and probably some others don't have deep knowledge in LSP and so on to guess the settings without pain 🥹

  "languages": {
    "JavaScript": {
      "formatter": { ??? },
      "code_actions_on_format": {
        "???"
      }
    }
  }

I think this question will pop up again and again so would be great to have it in documentation for both: prettier and eslint.

[mrnugget]

Based on the comments above I'd say it's this:

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

You don't need to set a formatter, since that's unrelated to eslint. What this does is to run the code actions of the primary language servers when you format.

Does that make sense/work? (I'll try to reproduce shortly and can then document)

[korywka]

https://github.com/zed-industries/zed/assets/988471/9d254ee1-c031-4f57-9e89-6261edf37158

nope, errors are not fixed, looks like the file is formatted with other (default?) formatter, not eslint.

ps. "formatter": "language_server" doesn't help too 🤷‍♀️

[mrnugget]

Ah, got it. I think the issue here is that eslint is not the primary language server. Reopening!

[eidriahn]

@mrnugget just letting you know that for me everything works

[korywka]

@eidriahn autofix for eslint? can you share please settings.json?

[throrin19]

Same problem Here, I try all documented here but none works :

This is my settings.json :

{
  "formatter": "language_server",
  "languages": {
    "JavaScript": {
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      }
    },
    "TypeScript": {
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      }
    }
  }
}

But when I save typescript or javascript files, I have a default formatter action, not my eslint config action

[mrnugget]

I've got a first fix for eslint-on-format here: https://github.com/zed-industries/zed/pull/8496

@jaydenseric I'll look into your case next, so it's possible to specify the rules that are used when running eslint-fix-on-format. I'm tracking that here: https://github.com/zed-industries/zed/issues/8533

[mrnugget]

Here's the 2nd part that allows you to specify which rules to use when using code_actions_on_format: https://github.com/zed-industries/zed/pull/8537

Next step would be that we upgrade to a newer version of vscode-eslint.

[sanketnaik99]

@mrnugget It seems like the ESLint fix on save works but is there a way to disable prettier formatting so that the ESLint formatting is saved?

[mrnugget]

@mrnugget It seems like the ESLint fix on save works but is there a way to disable prettier formatting so that the ESLint formatting is saved?

Yeah, you can change format on save and the formatter: https://zed.dev/docs/configuring-zed#format-on-save

So, for example, you can essentially turn prettier off by saying you want the primary language server (typescript-language-server) to do formatting, which is a no-op

    "JavaScript": {
      "formatter": "language_server",
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      }
    },

Or you use https://github.com/prettier/eslint-config-prettier to configure eslint so it doesn't clash with prettier.

[hungify2022]

@mrnugget Thanks Folder-specific settings with these configs would resolve that.

[mrnugget]

Can't you put this in .zed/settings.json in your project?

[sanketnaik99]

@mrnugget It seems like the ESLint fix on save works but is there a way to disable prettier formatting so that the ESLint formatting is saved?

Yeah, you can change format on save and the formatter: https://zed.dev/docs/configuring-zed#format-on-save

So, for example, you can essentially turn prettier off by saying you want the primary language server (typescript-language-server) to do formatting, which is a no-op

    "JavaScript": {
      "formatter": "language_server",
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      }
    },

Or you use https://github.com/prettier/eslint-config-prettier to configure eslint so it doesn't clash with prettier.

Here's my Zed config! When I hit save, it formats the document but misses some of the ESLint rules that I have configured. Can you help me figure out what I'm missing here? I've attached a video that shows the formatting issues.

{
    "tab_size": 4,
    "language_overrides": {
        "TSX": {
            "formatter": "language_server",
            "code_actions_on_format": {
                "source.fixAll.eslint": true
            }
        },
        "TypeScript": {
            "formatter": "language_server",
            "code_actions_on_format": {
                "source.fixAll.eslint": true
            }
        }
    }
}

https://github.com/zed-industries/zed/assets/25388014/3c110ab5-5701-42fc-8b93-ae74bea08be8

[mrnugget]

Can you help me figure out what I'm missing here?

Let's find out:

1. Does ESLint fix on format work at all? Meaning: does it fix other things?
2. Which rules does it miss? Are those rules maybe not auto-fixable?

[korywka]

@sanketnaik99 Please make sure you use the latest build, but not the stable one: https://github.com/zed-industries/zed/releases (assets)

[sanketnaik99]

@mrnugget Yeah it seems like the format works and it fixes other things such as no trailing commas, one prop per line, etc.

It seems like the only thing that doesn't work is the spacing rule. I have confirmed that it works in VSCode and it was also working when I defined a custom command for format on save as shown below

"format_on_save": {
        "external": {
          "command": "eslint_d",
          "arguments": [
            "--stdin",
            "--fix",
            "--fix-to-stdout",
            "--stdin-filename",
            "{buffer_path}"
          ]
        }
      }

@korywka Yup! I'm using the latest preview version

[mrnugget]

@sanketnaik99 interesting! can you create a sample project to reproduce? example file and eslint config etc.?

[mrnugget]

@sanketnaik99 another thing: can you capture the logs of what happens when you hit save? Like this:

https://github.com/zed-industries/zed/assets/1185253/1b61a937-ddf3-4ca0-b93a-b724bec1d3cb

[throrin19]

In my case the option "formatter": "language_server" is ignored, zed apply eslint fix + prettier. I don't want to apply prettier but only eslint

[korywka]

Have the same issue. Maybe this issue/PR will fix it: https://github.com/zed-industries/zed/issues/8823

[mrnugget]

In my case the option "formatter": "language_server" is ignored, zed apply eslint fix + prettier. I don't want to apply prettier but only eslint

Yeah. I think that's still an open issue. Do you want to create a ticket for it? We need to figure out a non-awkward configuration schema so we can say "run code actions when formatting, but not the formatter."

[mrnugget]

Also, @throrin19 can you share your config here? The languages part at least. When formatter: language_server is configured, it shouldn't use prettier, I think:

https://github.com/zed-industries/zed/blob/eb2c60f0fdb5780aff0abb3839f69d0e4f71ddce/crates/project/src/project.rs#L4430-L4446

[korywka]

https://github.com/zed-industries/zed/assets/988471/9735f956-b19f-4dc2-ae85-34d0d7a00a4b

I have the same issue: if you edit something and save - eslint is fixed. If just press save next time - prettier is fixed. But my config is language_server.