How to make ESLint and Prettier work together 🛠️

#tooling #webdev

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

Make it play nice! 🤝

Before we start, make sure you have Node.js 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, Remix and Vite React ESLint configurations, and it worked well in those cases.

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

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

Next, we will need to install the required dependencies:

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:

npm init @eslint/config@latest

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

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:

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:

{
  "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:

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

Good to know: If you're a Visual Studio Code user, you can enhance your coding experience by installing the ESLint and Prettier 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.