DEV Community

Cover image for How to use ESLint and Prettier for code analysis and formatting
Andrew Baisden
Andrew Baisden

Posted on

How to use ESLint and Prettier for code analysis and formatting

ESLint and Prettier are pretty much the two most popular tools when it comes to doing code analysis and formatting in a developers codebase. They are extremely good at what they do which is why they tend to be an essential part of a projects setup.

The difference between the two is that ESLint is usually responsible for finding and reporting on different patterns inside of ECMAScript/JavaScript code. ESLint is designed to work with JavaScript files only and it is very successful when it comes to ensuring that a codebase is consistent and without notable bugs.

Prettier on the other hand is an opinionated code formatter. Unlike ESLint it supports a variety of languages like JavaScript, HTML, CSS, GraphQL, Markdown and many others. Both tools are fairly well supported in the developer community and extensions are available for both of them in most code editors or IDE's like Visual Studio Code for example.

Visual Studio Code Marketplace
ESLint
Prettier

Website
https://prettier.io/
https://eslint.org/

Why you should use a linter and code formatter

Linting is a way to fix problems in your code while still in development mode before your application is ready for production. A lot of these fixes can be done automatically and you can customise the whole process to suit your teams needs. When using Prettier you can have the code in your files formatted automatically which saves you tons of time and energy.

It's also one less thing you need to worry about in a code review because it is guaranteed to be the same for everyone. It enforces the same style and code quality across the whole team so there are no conflicts like when you have your own personal local setup.

This is a common process that teams follow when working on projects. It is typical for there to be a file for ESLint and Prettier alongside an ignore file much like a .gitignore file that every developer should be familiar with when using a service like GitHub for version control. The format for your main file can be either JavaScript, YAML or JSON. I'm using JSON in these examples.

See the example files below which would all be inside of one project:

.eslintignore
.eslintrc.json
.prettierignore
.prettierrc.json

Creating a ESLint and Prettier workflow setup

ESLint and Prettier files can conflict with each other because there are occasions when they end up checking the same rules which can lead to duplication. Fortunately it is possible to get them both to work together.

Visual Studio Code Settings

Firstly you need to install the ESLint and Prettier extensions.

Then go to Code -> Preferences -> Settings

You can use the search box to search for the ESLint and Prettier extensions you installed. It should be fine to leave the default ESLint settings but you can change them if you want to. Prettier might require some global setting changes but customise it how you want.

These are the most notable ones I have.

  • Prettier: Semi ✅
  • Prettier: Single Quote ✅
  • Prettier: Trailing Comma es5

While on the Settings page search for format.

Make sure that these settings are correct you might need to scroll down to find the default formatter:

  • Editor: Format On Save ✅
  • Editor: Default Formatter Prettier - Code formatter

Plain JavaScript/NodeJS Setup

Open the command line and then go to a directory like your desktop. Run the commands below to setup your project.

mkdir backend
cd backend
npm init -y
npm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev
Enter fullscreen mode Exit fullscreen mode

Now run the code below in the same folder and go through the setup.

npm init @eslint/config
Enter fullscreen mode Exit fullscreen mode

These are the settings I chose:

✔ How would you like to use ESLint? - To check syntax, find problems, and enforce code style
✔ What type of modules does your project use? - CommonJS (require/exports)
✔ Which framework does your project use? - None of these
✔ Does your project use TypeScript? - No
✔ Where does your code run? - Node
✔ How would you like to define a style for your project? - Use a popular style guide
✔ Which style guide do you want to follow? - Airbnb
✔ What format do you want your config file to be in? - JSON

Checking peerDependencies of eslint-config-airbnb-base@latest

The config that you've selected requires the following dependencies:

eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2

✔ Would you like to install them now? - Yes
✔ Which package manager do you want to use? - npm

Now run the commands in the code block below to create files for Prettier.

npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json
Enter fullscreen mode Exit fullscreen mode

Open your .eslintrc.json file and add these configuration settings. Prettier needs to be last in the array otherwise it won't work properly.

"extends": ["airbnb-base", "plugin:prettier/recommended"],

"plugins": ["prettier"],
Enter fullscreen mode Exit fullscreen mode

Next open the .prettierrc.json file and copy and paste these settings. You can learn about these settings in the Prettier Options documentation. This is just my setup you can create your own to suit your preferences.

{
  "printWidth": 100,

  "semi": true,

  "singleQuote": true,

  "tabWidth": 4,

  "useTabs": false,

  "trailingComma": "none",

  "endOfLine": "auto"
}
Enter fullscreen mode Exit fullscreen mode

Lastly run the code below to create some ignore files for ESLint and Prettier. They work just like a .gitignore file so whatever entries you have in there will be ignored so they wont get linted or formatted.

touch .prettierignore .eslintignore
Enter fullscreen mode Exit fullscreen mode

Just copy and past the same code into the .prettierignore and .eslintignore files.

node_modules
package.lock.json
build
Enter fullscreen mode Exit fullscreen mode

Using ESLint and Prettier

Let's do a quick test. Create an index.js file either in your editor or using the command below in the terminal.

touch index.js
Enter fullscreen mode Exit fullscreen mode

Add this JavaScript code to the file.

const x = 100;

console.log(x);

const test = (a, b) => {
  return a + b;
};
Enter fullscreen mode Exit fullscreen mode

In your code editor you should see some errors and warnings in the problems tab at the bottom. And if you make your code less readable by adding spacing or tabs all over the place and then save the file. Prettier should clean up and fix everything.

There should be a squiggly line under the console.log and test function name. If you hover your mouse cursor over them you can see the ESLint rule assigned to them. Go to the .eslintrc.json file and add these rules at the bottom.

"rules": {

"no-console": "off",

"no-unused-vars": "off"

}
Enter fullscreen mode Exit fullscreen mode

Now if you go back to the index.js file the warnings should be gone! You can find all of the rules in the ESLint rules documentation. It's also possible to change the rules/options in the .prettierrc.json file by going to the Prettier Options page.

Restarting the ESLint Server

Sometimes the linting does not work after making changes. To fix this in Visual Studio Code run the command Shift+CMD+P to Show the Command Palette and then search for ESLint: Restart ESLint Server. This should get the linting working properly in all files.

Remember that you might need to restart the ESLint server every single time you add/remove rules or make changes. Otherwise the rules might not work and it could cause ESLint and Prettier to have conflicts.

ReactJS Setup

The same setup works with other JavaScript frameworks like React. You just need to choose the appropriate settings. See the example below.

Remember to select JavaScript modules (import/export) because thats what React uses and the code will run in the browser.

npx create-react-app my-app
cd my-app
npm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev
npm init @eslint/config
Enter fullscreen mode Exit fullscreen mode

Now run the commands in the code block below to create files for Prettier.

npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json
Enter fullscreen mode Exit fullscreen mode

Open your .eslintrc.json file and add these configuration settings. Prettier needs to be last in the array otherwise it won't work properly.

"extends": [

"plugin:react/recommended",

"airbnb",

"plugin:prettier/recommended"

],

"plugins": ["react", "prettier"],
Enter fullscreen mode Exit fullscreen mode

Next open the .prettierrc.json file and copy and paste these settings. You can learn about these settings in the Prettier Options documentation. This is just my setup you can create your own to suit your preferences.

{
  "printWidth": 100,

  "semi": true,

  "singleQuote": true,

  "tabWidth": 4,

  "useTabs": false,

  "trailingComma": "none",

  "endOfLine": "auto"
}
Enter fullscreen mode Exit fullscreen mode

Lastly run the code below to create some ignore files for ESLint and Prettier. They work just like a .gitignore file so whatever entries you have in there will be ignored so they wont get linted or formatted.

touch .prettierignore .eslintignore
Enter fullscreen mode Exit fullscreen mode

Just copy and past the same code into the .prettierignore and .eslintignore files.

node_modules
package.lock.json
build
Enter fullscreen mode Exit fullscreen mode

Now if you open the App.js file you should see warnings and errors in the problems tab below. If you wan't to disable a rule follow the steps earlier and find the rules in the ESLint rules documentation.

Discussion (12)

Collapse
killerkvothe117 profile image
Kosi Iyiegbu

Nice. I needed this

Collapse
gulshanaggarwal profile image
Gulshan Aggarwal

Good one, Andrew!

Collapse
rukundob451 profile image
Benjamin Rukundo

Awesome read

Collapse
kissu profile image
Konstantin BIFERT

Always nice to have an ESlint + Prettier configuration indeed, cannot live without it myself.

Collapse
andrewbaisden profile image
Andrew Baisden Author

Agreed!

Collapse
sadullah profile image
Sadullah TANRIKULU

Excellent thanks

Collapse
nevulo profile image
Nevulo

Nice one Andrew, great read and informative!

Collapse
darktek profile image
DarkteK

I always love the articles posted in this page, although there's one comment in this article that I think is wrong...
"IDEs like Visual studio...", maybe I'm wrong here but, is Visual studio really considered as an IDE? I thought IDEs were some softwares like Phpstorm or Eclipse.. But no VSC or Sublime text... Am I wrong?

Collapse
andrewbaisden profile image
Andrew Baisden Author • Edited on

If you do a google search for is vscode an ide you will get mixed results. Some developers say that it is and others disagree. It could be debated for hours like React vs Vue 😅

I'm just going to say that it is because when you add all of those extensions it becomes even more feature rich but I understand that everybody has a different opinion 😄

Collapse
thec0def0x profile image
CodeFox • Edited on

Some strange things have been happening recently with me and eslint. Apparently Microsoft’s ESLint in VSC has prettier within it but it keeps conflicting with my prettier formatter. So for example I had an empty class and the formatter would set the curly braces to { } with a space meanwhile eslint prettier would be coming up red telling me to remove the space. It’s been pretty frustrating and happened out of nowhere 🤔

Collapse
throughahaze profile image
through.a.haze

package.lock.json

Did you mean package-lock.json?

Collapse
shinigami92 profile image
Shinigami

If you have more complex eslint configs, feel free to use github.com/Shinigami92/eslint-defi... to get auto completion and jsdocs