ESLint and Prettier Format on Save?

[mikecfisher]

Hi all I'm loving Zed and trying to switch from VSCode. I'm almost there except for this seemingly trivial tweak. I have some eslint formatting rules like sorting Typescript Imports as well as prettier rules. I want Zed to format both of these every time I hit save. For the life of me I can't seem to get them both working. Any ideas how I fix this?

Here is my config

{
  "assistant": {
    "version": "1",
    "provider": {
      "name": "openai",
      "default_model": "gpt-4o"
    }
  },
  "telemetry": {
    "metrics": true
  },
  "features": {
    "inline_completion_provider": "supermaven"
  },
  "language_servers": ["vtsls", "typescript-language-server", "eslint"],
  "language_server_options": {
    "vtsls": {
      "language_ids": [
        "typescript",
        "javascript",
        "typescriptreact",
        "javascriptreact"
      ]
    },
    "typescript-language-server": {
      "language_ids": [
        "typescript",
        "javascript",
        "typescriptreact",
        "javascriptreact"
      ],
      "initialization_options": {
        "preferences": {
          "includeInlayParameterNameHints": "all",
          "includeInlayParameterNameHintsWhenArgumentMatchesName": true,
          "includeInlayFunctionParameterTypeHints": true,
          "includeInlayVariableTypeHints": true,
          "includeInlayVariableTypeHintsWhenTypeMatchesName": false,
          "includeInlayPropertyDeclarationTypeHints": true,
          "includeInlayFunctionLikeReturnTypeHints": true,
          "includeInlayEnumMemberValueHints": true
        }
      }
    },
    "eslint": {
      "language_ids": [
        "typescript",
        "javascript",
        "typescriptreact",
        "javascriptreact"
      ],
      "initialization_options": {
        "run_formatter": true
      }
    }
  },
  "languages": {
    "TypeScript": {
      "formatter": "prettier",
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      },
      "format_on_save": "on"
    },
    "TSX": {
      "formatter": "prettier",
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      },
      "format_on_save": "on"
    },
    "JavaScript": {
      "formatter": "prettier",
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      },
      "format_on_save": "on"
    }
  },
  "formatter": {
    "code_actions": {
      "source.fixAll.eslint": true
    }
  },
  "relative_line_numbers": true,
  "theme": "Atelier Forest Light",
  "buffer_font_size": 15,
  "buffer_font_family": "FuraCode NF",
  "vim_mode": true,
  "format_on_save": "on",
  "autosave": {
    "after_delay": {
      "milliseconds": 1000
    }
  },
  "indent_guides": {
    "render": true,
    "character": "│",
    "skip_first_level": false
  },
  "project_panel": {
    "file_icons": true
  },
  "vim": {
    "use_multiline_registers": true,
    "surround": true,
    "sneak": true
  }
}

[mikecfisher]

Hmm I think I finally got it with the help of Claude. Here is what seems to be working for me. If anyone has feedback on my config overall let me know. I'm still pretty new to Zed.

{
  "assistant": {
    "version": "1",
    "provider": {
      "name": "openai",
      "default_model": "gpt-4o"
    }
  },
  "telemetry": {
    "metrics": true
  },
  "features": {
    "inline_completion_provider": "supermaven"
  },
  "language_servers": ["vtsls", "typescript-language-server", "eslint"],
  "language_server_options": {
    "vtsls": {
      "language_ids": [
        "typescript",
        "javascript",
        "typescriptreact",
        "javascriptreact"
      ]
    },
    "typescript-language-server": {
      "language_ids": [
        "typescript",
        "javascript",
        "typescriptreact",
        "javascriptreact"
      ],
      "initialization_options": {
        "preferences": {
          "includeInlayParameterNameHints": "all",
          "includeInlayParameterNameHintsWhenArgumentMatchesName": true,
          "includeInlayFunctionParameterTypeHints": true,
          "includeInlayVariableTypeHints": true,
          "includeInlayVariableTypeHintsWhenTypeMatchesName": false,
          "includeInlayPropertyDeclarationTypeHints": true,
          "includeInlayFunctionLikeReturnTypeHints": true,
          "includeInlayEnumMemberValueHints": true
        }
      }
    },
    "eslint": {
      "language_ids": [
        "typescript",
        "javascript",
        "typescriptreact",
        "javascriptreact"
      ],
      "initialization_options": {
        "run_formatter": true
      }
    }
  },
  "languages": {
    "TypeScript": {
      "formatter": "prettier",
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      },
      "format_on_save": {
              "external": {
                "command": "prettier",
                "arguments": ["--stdin-filepath", "{buffer_path}"]
              }
            }
    },
    "TSX": {
      "formatter": "prettier",
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      },
      "format_on_save": "on"
    },
    "JavaScript": {
      "formatter": "prettier",
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      },
      "format_on_save": "on"
    }
  },
  "formatter": {
    "code_actions": {
      "source.fixAll.eslint": true
    }
  },
  "relative_line_numbers": true,
  "theme": "Atelier Forest Light",
  "buffer_font_size": 15,
  "buffer_font_family": "FuraCode NF",
  "vim_mode": true,
  "format_on_save": "on",
  "autosave": {
    "after_delay": {
      "milliseconds": 1000
    }
  },
  "indent_guides": {
    "render": true,
    "character": "│",
    "skip_first_level": false
  },
  "project_panel": {
    "file_icons": true
  },
  "vim": {
    "use_multiline_registers": true,
    "surround": true,
    "sneak": true
  }
}

[darrenpaul]

You sir are my hero!

[dmitrijs-balcers]

this should be in docs. Was struggling, but found out from your example this:

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

And seems like fixed my formatting issues in codebase

[eulke]

this should be in docs. Was struggling, but found out from your example this:

  "formatter": {

    "code_actions": {

      "source.fixAll.eslint": true

    }

  }

And seems like fixed my formatting issues in codebase

It is in docs

[huytool157]

  "languages": {
    "TypeScript": {
      "formatter": "prettier",
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      },
      "format_on_save": {
        "external": {
          "command": "prettier",
          "arguments": ["--stdin-filepath", "{buffer_path}"]
        }
      }
    },
    "TSX": {
      "formatter": "prettier",
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      },
      "format_on_save": "on"
    },
    "JavaScript": {
      "formatter": "prettier",
      "code_actions_on_format": {
        "source.fixAll.eslint": true
      },
      "format_on_save": "on"
    }
  },
  "formatter": {
    "code_actions": {
      "source.fixAll.eslint": true
    }
  },

Just curious, why is format_on_save for Typescript different from TSX/Javascript? Is this prioritizing eslint or prettier?

[kcrwfrd]

The docs explain how to enable both prettier and eslint, with the following caveat

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 anyone is trying to figure out how to get eslint to run after Prettier, the following worked for me

"languages": {
  "JavaScript": {
    "formatter": [
      "prettier",
      {
        "code_actions": {
          "source.fixAll.eslint": true
        }
      }
    ]
  }
}

[andreasvh-conceto]

@kcrwfrd Wooow thanks! You saved my day and night. I was going crazy since empty constructor always complained about whitespaces between the constructor(){ } and whenever i let fix the prettier issue via code actions to constructor(){}, the saving changed it again with whitespaces inside to constructor(){ }. So it was this kind of overrwriting.

Your solution should be mentioned here in the docs in my opinion. Using multiple formatters are documented here in step 5. But your config is such a common scenario (like in a fresh generated nestjs app), that there should be a separate place in the es lint section.

Thanks!

[GabrielHangor]

Thank you! Exactly what i was looking for

[trptz]

Although it’s slightly slow, this setup successfully runs both Prettier and ESLint --fix on save for me!

"languages": {
  "JavaScript": {
    "formatter": {
      "external": {
        "command": "pnpm",
        "arguments": ["exec", "prettier", "--stdin-filepath", "{buffer_path}"]
      }
    },
    "code_actions_on_format": {
      "source.fixAll.eslint": true
    },
    "format_on_save": "on"
  },
  "TypeScript": {
    "formatter": {
      "external": {
        "command": "pnpm",
        "arguments": ["exec", "prettier", "--stdin-filepath", "{buffer_path}"]
      }
    },
    "code_actions_on_format": {
      "source.fixAll.eslint": true
    },
    "format_on_save": "on"
  },
  "TSX": {
    "formatter": {
      "external": {
        "command": "pnpm",
        "arguments": ["exec", "prettier", "--stdin-filepath", "{buffer_path}"]
      }
    },
    "code_actions_on_format": {
      "source.fixAll.eslint": true
    },
    "format_on_save": "on"
  },
}

[gakki-san]

It worked this way!!

[GregoryBai]

Thanks, I had to enable all three js language subtype:

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

[GregoryBai]

Guys, make sure to embed prettier into eslint config (following guides / ai) and have it all the rules. This way, the editor will run the linter binary (eslint here), and then pick up the changes from its output (eslint should be also installed in your project's node_modules)

[trptz]

Guys, make sure to embed prettier into eslint config

I agree with that approach as well.

[dobschal]

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

I have a .eslintrc.json file in the project root and eslint installed in the project.
Adding the lines as described to the settings worked for me. It shows eslint errors and formats the files on save correctly. I do not have prettier installed.

[loixlab]

I have tried all the different settings in this discussion and none of them made the eslint autofix work when saving.

I can't get this dummy code to autofix when saving my file:

let hello = 123; // eslint: 'hello' is never reassigned. Use 'const' instead.
console.log(hello);

If If run eslint . --fix, the let is replaced by a const.

But I'd like that to happen when saving the file...

I have installed prettier and eslint locally inside my node_modules. No global. Not sure if that could be the issue?

[lukejans]

Add your config file to this and maybe I can help. I thought it wasn't working for me too but turns out I was only running a single rule. For example I had this in my lsp settings:

{
  "lsp": {
    "eslint": {
      "settings": {
        "codeActionOnSave": {
          "rules": ["import/order"],
        }
      }
    }
  }
}

This essentially means eslint will only apply fixes for the import/order rule. After removing this, all auto fixing works great!

[loixlab]

I switched back to VSCode, spent already too much time on those simple things...
I didn't have anything inside the "lsp" section, so it was clearly not that.

[esquevin]

Looking at the doc we can set up multiple formatters by providing an array. This seem do properly run eslint and prettier.

"formatter": [
    {
      "code_actions": {
        "source.fixAll.eslint": true
      }
    },
    "prettier"
  ],

I've put it top level, but it also work when specified on specific languages

[chibx]

Thanks mehn
This worked

[yaralahruthik]

Hmm, I am actually doing something different. I let Zed's auto do it's work last. You can replace the auto with your language server. And yeah, run the code_action's first!

"format_on_save": "on",
"formatter": [{ "code_action": "source.organizeImports" }, "auto"]

[nnx0r]

None of the answers are working for me. Only if I disable all LSP's and manually enable a few via config, only then it works. Talking specifically for Vue SFC files.

[MrSunshyne]

Same here for Vue files. It doesn't seem to respect my existing eslint configs

[timothycraig]

I made a discussion specifically for Vue files: #47947

[JosephTLyons]

Thanks for reaching out. We want to better support our community, and the best way for us to do that is through our official Discord. The team is active there and happy to help.

We’re closing the “Help and General Q&A” category on GitHub Discussions and directing all support questions to Discord going forward.

https://zed.dev/community-links