Setting up ESLint with Prettier

Hey you all, I’m back with another blog post. This time I’ll be talking about how to set up ESLint with Prettier. I’ll be using VSCode as my editor, but the steps should be similar for any other editor.

What is ESLint?

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In other words, it is a static code analysis tool for identifying problematic patterns found in JavaScript code.

What is Prettier?

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

While they say it is opinionated, it is still many bits configurable. You can change the rules to your liking for the most part you may need.

Why do we need both?

Well, for starters you’d want to know if your code is following the best practices and if it’s consistent. ESLint does that for you. But, ESLint doesn’t format it all for you. That’s where Prettier comes in. Prettier will automatically format for you on save (only if you have it enabled on save).

How to set it up?

As mentioned above, I’ll be using VSCode as my editor although if you wish to do it in your editor of choice you can always find respective extensions/plugins for them easily.

Installing VSCode extension

First, we’ll need to install Prettier ESLint. For that, in your VSCode editor do the following steps:

1. Open the Command Palette (Ctrl+Shift+P for Windows and CMD+Shift+P for Mac).
2. Type ext install and hit enter.
3. Search for Prettier ESLint by Rebecca Vest and install it.

That’s it, at the time of writing this blog post, once you install this extension in VScode you don’t need to additionally install Prettier and ESLint extensions. It comes with both of them.

To do the next steps we’ll need to have a package.json file, if you haven’t already I suggest you to create one using:

yarn init
# or
npm init

Installing project dependencies

Now, we’ll need to install the dependencies for Prettier and ESLint. This is what the dependency requirements look like at the time of writing this post:

• prettier@^2.5.1
• eslint@^8.7.0
• @typescript-eslint/parser@^5.0.1 and typescript@^4.4.4 (Only for TypeScript projects)
• vue-eslint-parser@^8.0.0 (Only for Vue projects)

Let’s get to installing these, run one of the following commands accordingly:

yarn add -D prettier@^2.5.1 eslint@^8.7.0
# or
npm install -D prettier@^2.5.1 eslint@^8.7.0

For TypeScript projects:

yarn add -D prettier@^2.5.1 eslint@^8.7.0 @typescript-eslint/parser@^5.0.1 typescript@^4.4.4
# or
npm install -D prettier@^2.5.1 eslint@^8.7.0 @typescript-eslint/parser@^5.0.1 typescript@^4.4.4

Lastly, for Vue projects:

yarn add -D prettier@^2.5.1 eslint@^8.7.0 vue-eslint-parser@^8.0.0
# or
npm install -D prettier@^2.5.1 eslint@^8.7.0 vue-eslint-parser@^8.0.0

Configuring VSCode project settings

Let’s now set up our project configs to use these extensions, really straightforward steps here:

1. Open the command palette in VS Code by typing: Ctrl+Shift+P for Windows and CMD+Shift+P for Mac.
2. In the command palette, type Open Workspace Settings (JSON) and hit enter.

Or you can manually create .vscode folder in the root of your project and create a settings.json file in it.

and just paste the below code in this settings.json file:

{
	"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
	"editor.formatOnPaste": false, // required
	"editor.formatOnType": false, // required
	"editor.formatOnSave": true, // optional
	"editor.formatOnSaveMode": "file", // required to format on save
	"files.autoSave": "onFocusChange" // optional but recommended
}

Lastly restart your VSCode editor and we’re one final step away from being done.

Configuring ESLint & Prettier

Just like above we’ll need to create a configuration file for both of ESLint and Prettier in the root of our project. You can find more about the configuration options using these links:

• Prettier
• ESLint

We can make this really simple by running the following commands:

npm init @eslint/config

It will ask you a few questions regarding your code style, once you’re done with that it will create all the necessary config files needed in the root of your project.

That’s it, you can now start using ESLint and Prettier in your project. And if you wish to setup some quick commands for running it as a build step you can do that as well. You can do so on any file or directory like this:

npx eslint yourfile.js
# or
yarn run eslint yourfile.js

Closing arguments

I know how annoying it can get at times when even after all this they don’t work the way you want them to. Believe me I have been there scratching my head wasting hours sometimes days trying to figure out why it’s not working. But, I hope this blog post will help you get started with ESLint and Prettier in your project just like I did.

Just so you know I have never been a fan of setting these linters and formatters in my projects, I always thought they were just a waste of time and resources. But, after using them for a while I can say that they are really helpful and can save you a lot of time in the long run.

Hope this helps a few of you like me, who had lifelong problems setting these linters and formatters up. If you have any questions or suggestions, feel free to reach out to me on Twitter.

Happy coding!