How to get ESlint and Prettier to play nice in VS Code?

Do you have your project setup with both Prettier and Eslint? Do you want them to run in a specific order instead of using ESLint to run prettier? Here's how to set your own order in VS Code with this extension:

Visual Studio Code Market Place: Format Code Action

This extension will register a new "codeAction" which will run 'Format Document' using the default formatter (prettier in our case) in VS Code.

source.formatDocument

Using this and the editor.codeActionsOnSave setting in VS Code you can specify the order in which to run the eslint codeAction, source.fixAll.eslint, and format document.

Install

Requires: VS Code 1.44+

Install through VS Code extensions:

Visual Studio Code Market Place: Format Code Action

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install rohit-gohri.format-code-action

Usage

You will need both the prettier-vscode and vscode-eslint extensions installed for this config to work. Disbale formatOnSave and use the source.formatDocument codeAction in whatever order you want with VS Code settings:

  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": [
    "source.formatDocument",
    "source.fixAll.eslint"
  ]

This runs 'Format Document' with the default formatter (in this case prettier) and then eslint --fix for all document types.

Or for a specific lanuage only

  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": [
        "source.formatDocument",
        "source.fixAll.eslint"
    ]
  },

This would run prettier by default, but for javascript files would run prettier and then eslint. If you want to reverse the order then just reverse the array.

Motivation

I wanted to use prettier and eslint together, to override some of prettier's mpre opinionated style rules with a eslint config (particularly brace-style).

Instead of using workarounds like prettier-eslint which don't work for all eslint configurations as it hasn't been updated to work with eslint v6 properly. We can simply run prettier and eslint one by one like one would do on the command line. Here is how that looks like in my package.json:

  "scripts": {
    "format": "npm run prettier:fix && npm run lint:fix",
    "lint": "eslint src --ext=js",
    "lint:fix": "npm run lint -- --fix",
    "prettier": "prettier -c",
    "prettier:fix": "npm run prettier -- --write"
  }

The npm run format command allows me to fix some of the prettier formatting with eslint by running them both in an order. I wanted to replicate this same behavior with my editor's "Format on Save" functionality.

VS Code only allows setting one default formatter. So I could either run Prettier or run ESLint on save. That was until it introduced "codeActionsOnSave". This separated formatters and "Source" fixers like vscode-eslint. This is how one would enable both prettier and eslint in VS Code:

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

But this would often lead to prettier being run after eslint, and eslint errors still being present as this defined no order for formatters and coder actions.

Since the March 2020 (v1.44) update, VS Code allows setting codeActionsOnSave as an array. This allows setting the order of the code actions.

This extension uses the CodeActionProvider api to implement a simple code action that runs 'Format Document' on the current file. This allows us to disable formatOnSave and use it as a codeAction instead in a specific order with other extensions.