Having a linter in your react project is a must, this code analysis tool is going to help us to avoid errors, bugs and fix problems in our javascript code, also it will help us to have the same coding style across our app.

My preferred one, ESLint with Airbnb Style Guide and using prettier as our optioned code formatter.

Now, ESLint offers a lot of options, so, to have consistency in my projects, I stick with Airbnb style guide which is pretty decent and saves me a lot of time, however you got Standard, Google, XO styles guides that you can use too.

VSC First Steps

1. Install ESLint extension
2. Install Prettier for coding formation.

Installing npm packages

Let's install ESLint npm packages with prettier configs files and prettier npm package as well, all of this with --save-dev flag to save them on devDependencies since we don't need them in production.

Run the following command:

npm install eslint eslint-config-prettier eslint-plugin-prettier prettier --save-dev

Cool, we have our basic dependencies now

ESLint init

Now we need to create our .eslintrc.json file with the style guide that you wish, but, in my case, Airbnb one

Rund the following command:

npx eslint --init

The configuration I use frequently is

• How would you like to use ESLint? · To check syntax, find problems, and enforce code style
• What type of modules does your project use? · Javascript modules (import/export)
• Which framework does your project use? · React
• Does your project use TypeScript? · No
• Where does your code run? · Browser
• 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

it will ask for install some Airbnb style guide dependencies, just mark yes, below there is a video about it.

Now, you will see a recently added .eslintrc.json file in root folder.

{
    "env": {
      "browser": true,
      "es2021": true
    },
    "extends": [
      "plugin:react/recommended",
      "airbnb",
      "plugin:prettier/recommended"    ],
    "parserOptions": {
      "ecmaFeatures": {
        "jsx": true
      },
      "ecmaVersion": 12,
      "sourceType": "module"
    },
    "plugins": ["react", "prettier",],    "rules": {
    }
}
  

On line 9, you will have to add "plugin:prettier/recommended"

On line 18 you will have to add "prettier" to the array of plugins.

.prettierrc

On root, let's add a file called .prettierrc where we are going to set our prettier configs, you can set it with next configs if you want:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

.vscode/settings.json

Now, to finish our set up, we are going to create a new file on .vscode/settings.json if you don't have it already with next configs, to make ESLint run on command + s (on save file) and fix and format our code.

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "editor.formatOnSave": true,
  "eslint.alwaysShowStatus": true,
  "files.autoSave": "onFocusChange",
  "[javascript]": {    "editor.formatOnSave": false  },  "[javascriptreact]": {    "editor.formatOnSave": false  }}

So, JSON file it's pretty self explanatory, we activate codeActionsOnSave to run ESLint when that happens and formatOnSave on VSC as well.

Note: From line 6 to 11, we are disabling formatOnSave for .js and .jsx files because sometimes I had issues between Prettier VSC extension and ESLint, basically ESLint first format code as we need but later prettier VSC extension goes and re-format it as it's set it up the in your VSC, so, this is to avoid errors, if you aren't okay with that, you can delete them and see how it goes.

Restart VSC

After all this set up, restar VSC and enjoy, below there are some gifs about the magic that happens after hitting command + s and ESLint and prettier working together to format your code.

Examples

• Reordering imports:

• Fixing string concatenation

• Formatting Code

Conclusion

So, besides allowing you to follow best practices standards, ESLint & Prettier are going to even fix and format your code, just with saving your file and the correct configuration.

I hope this guide was helpful for you and I always love to hear feedback from readers.