Format code on save using ESLint and VS Code

I have always had problems when combining Prettier and ESLint the same project in VS Code. Prettier would not respect my ESLint rules or vice versa. Sometimes I could mitigate the problems by using the eslint-config-prettier package in my ESLint configuration.

But now, thanks to James Quick I’ve found a way to get rid of Prettier while still having the format on save feature in VS Code.

It’s very simple:

• Make sure ESLint is configured in your project
• Install the ESLint extension for VS Code
• Then add the following configuration to your VS Code Workspace Settings in .vscode/settings.json¹:

{
  // .vscode/settings.json
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"]
}

• eslint
• vscode
• prettier