How to get ESlint and Prettier to play nice in VS Code?
Tags: eslint, prettier, formatter, vscode
Published: 2020-05-01 15:44:18

---
title: How to get ESlint and Prettier to play nice in VS Code?
published: true
date: 2020-04-28 18:30:00 UTC
tags: eslint, prettier, formatter, vscode
canonical_url: https://rohit.page/blog/posts/how-to-get-prettier-eslint-play-nicely-with-vscode/
---

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?](https://prettier.io/docs/en/integrating-with-linters.html#use-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](https://marketplace.visualstudio.com/items?itemName=rohit-gohri.format-code-action)

![Version](https://vsmarketplacebadge.apphb.com/version-short/rohit-gohri.format-code-action.svg) 

This extension will register a new ["codeAction"](https://code.visualstudio.com/updates/v1_23#_run-code-actions-on-save) which will run 'Format Document' using the default formatter (prettier in our case) in VS Code.

```
source.fixAll.format

```

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](https://marketplace.visualstudio.com/items?itemName=rohit-gohri.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`](https://github.com/prettier/prettier-vscode) and [`vscode-eslint`](https://github.com/microsoft/vscode-eslint) extensions installed for this config to work.Disbale `formatOnSave` and use the `source.fixAll.format` codeAction in whatever order you want with VS Code settings:

```
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": [
    "source.fixAll.format",
    "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.fixAll.format",
        "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](https://github.com/prettier/eslint-config-prettier/issues/26)).

Instead of using workarounds like [`prettier-eslint`](https://github.com/prettier/prettier-eslint) which don't work for all eslint configurations as it hasn't been updated to work with [eslint v6 properly](https://github.com/prettier/prettier-eslint/issues/222). 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"](https://code.visualstudio.com/updates/v1_23#_run-code-actions-on-save). 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)](https://code.visualstudio.com/updates/v1_44#_explicit-ordering-for-code-actions-on-save) update, VS Code allows setting `codeActionsOnSave` as an array. This allows setting the order of the code actions.

This extension uses the [`CodeActionProvider`](https://code.visualstudio.com/api/references/vscode-api#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.

## Source

You can find the source on Github:

[vscode-format-code-action](https://github.com/rohit-gohri/vscode-format-code-action) [![github badge](https://img.shields.io/github/stars/rohit-gohri/vscode-format-code-action?style=social)](https://github.com/rohit-gohri/vscode-format-code-action)