Simple steps for prettier + eslint configuration

prettier_eslint.md

How to configure Prettier + ESLint in VSCode

Motivation

Prettier is quite useful for format your code automatically, making you concern only with coding (which is what really matters)

ESLint has some personal rules, that makes your code have a particular pattern, where you can configure everything that you and the whole team will whose in project by default

Sometimes, you use prettier, and it has a personal pattern to deal with the styleguide. And those rules and patterns could conflict with project's ESLint rules. Looking at this problem, you can follow below some steps to configure a kind of integration between both tools.

Step 1

Install both extensions in your editor.

• ESLint
• Prettier - Code formatter

Step 2

Install ESLint locally in your project's dev dependencies

yarn add --dev eslint

Step 3

Run it into your project

yarn run eslint --init

After this, you will see some options to choose as you prefer.

Step 4

Now, try writing some function bad formatted (with extra spaces, extra tabs, etc). Something like the code below:

function   test    (  num  ) {
                  const a = 2
    return num + a;
          }

            test(10);

Step 5

Go to your settings in path VSCode > Preferences > Settings > Extensions > Prettier Then, you just find the item Prettier: Eslint Integration, and flag it.

That's it! When you indenting your code, it will respect your rules into project's .eslintrc file.

Enjoy!