How to make ESLint and Prettier work together 🛠️
Tags: tooling, webdev
Published: 2024-05-05 22:30:31

## Introduction 👨‍🏫

Let's be honest - setting up tools for a new project can be a frustrating process. Especially when you want to jump straight to coding part. This is often the case with [ESLint](https://github.com/eslint/eslint) and [Prettier](https://github.com/prettier/prettier), two popular tools in the JavaScript ecosystem that can sometimes interfere with each other when it comes to code formatting. Fortunately, there's a simple solution to this process, and it's called [`eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier).

## Make it play nice! 🤝 

**Before we start, make sure you have [Node.js](https://nodejs.org/en/download) installed on your machine.**

Let's start by setting up a new JavaScript project. Note that the following steps are for the demonstration purposes only - I've tried this with [Next.js](https://nextjs.org/docs/getting-started/installation), [Remix](https://remix.run/docs/en/main/start/quickstart) and [Vite](https://vitejs.dev/guide/) React ESLint configurations, and it worked well in those cases.

So, without further-ado, let's set up a new project with these commands:

```bash
mkdir awesome-project
cd awesome-project
npm init -y
```

Next, we will need to install the required dependencies:

```bash
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
npm install --save-dev --save-exact prettier
```

In this article, we're basically starting from scratch, so we can generate ESLint configuration like this:

```bash
npm init @eslint/config@latest
```

Follow the prompts in your command line to complete the setup. Adjust it to your needs:

![Screenshot of command line with prompts to initialize new ESLint project.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfaki8dmc0n6kt2r6fnj.png)

Now, if you're on the newer version of the configuration (`eslint.config.js`) which is the case in this article, then paste the following code into your configuration file:

```javascript
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

export default [
  // any other config imports go at the top
  eslintPluginPrettierRecommended
]
```

Otherwise, if you're using an older version of ESLint configuration file (`.eslintrc*`), which is often the case while working with Next.js, Remix or Vite, then add the following code to your configuration file:

```javascript
{
  "extends": ["plugin:prettier/recommended"]
}
```

And that's it! Now you can play around with it, create some file e.g. `script.mjs`, fill it with some messy and unformatted code and check for lint and formatting errors with this command:

```bash
npx eslint script.mjs # you can also use --fix flag
```

**Good to know**: If you're a [Visual Studio Code](https://code.visualstudio.com/) user, you can enhance your coding experience by installing the [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extensions. These extensions provide real-time error and warning highlighting, as well as automatic formatting and code fixing on save.

---

Thanks for reading! 🙇‍♂️ I hope this article will save you some time and frustration while configuring ESLint with Prettier in your future projects. Feel free to leave your questions and opinions in the comment section! You can also reach me directly on [Twitter](https://twitter.com/rgolawski).