Format Code Action

Run eslint extension after the prettier extension in VS Code. Or the other way around, whatever way you want.

Installation

Requires VS Code 1.44+

Install through VS Code extensions: Visual Studio Code Market Place: Format Code Action

Or install from within VS Code: Launch VS Code Quick Open (Ctrl+P or cmd+P), paste the following command, and press enter.

ext install rohit-gohri.format-code-action

Or on the command line:

code --install-extension rohit-gohri.format-code-action

Usage

Disable 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"
  ]

NOTE: This was first released with source.fixAll.format as the codeAction, that still works for legacy purposes.

This runs 'Format Document' with the default formatter (in this case prettier).

Or for 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.

Format Modified (EXPERIMENTAL)

Alternatively you may want to format only the modified part of the file, in that case use source.formatModified:

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

This is experimentally supported right now, if you face any problems please report them at: rohit-gohri#5

Motivation

I created this so I could use prettier and eslint together in the editor, in a specific order (eslint after prettier). Earlier prettier was setup to run on save and eslint as a codeAction with:

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

This would often lead to prettier being run after eslint and eslint errors still being present.

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

The 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.

Read More on my blog: How to get ESlint and Prettier to play nicely in VS Code?

VS Code API

vscode module

• languages.registerCodeActionsProvider

Credits

Based on Microsoft's code-actions-sample

Icon

formatting by Danil Polshin from the Noun Project.