Henrique Tavares

Configuring ESlint and Prettier on ReactJS and React Native

August 11, 2019 • ☕️ 7 min read

Heeeeey Coders!!

Note: this settings have been teste on VSCode only.

So, unless you have the intent to do a Hello World using ReactJS or React Native, I’m sure you always use a code pattern in your projects, am I right?

So that’s where ESLint comes in, and Prettier.

But before, do you know what these strange names mean?

What the hell is this ESLint?


Doubts (Cena de algum filme aí)

To summarize, ESLint is a pluggable linter tool for JavaScript and JSX.

  • “But Henrique, what is linter ???? You are not helping like that! 🤬”

You’re right, my dear coder, linter is nothing more than a code watcher, that is, it will analyze what you have typed and suggest improvements to that code. Is it better now?

It’s basically the same as underlining we see in Microsoft Word when we write something wrong, for example.

Word

This makes it easy for you to make your standardized code not just for you, but for your entire development team, see an example in ReactJS:

Pre ESLint Code

PreEsLint

Post ESLint Code

PosEsLint

See that code result is amazing!

Prett … what? Prettier?


You thought the conceptual part was over, right?

Social Network


I’ll be fast, I promise!

No, Prettier is not a French dish, Prettier is basically a code formatter. It enforces a consistent style by parsing your code and formatting it with your own rules.

So, you can tell that he ESLint and Prettier, although they don’t need each other to work, it’s quite useful to use both together, right?!

Configuring ESLint


No more concept, time to code!

Bill-Gates


First you add it to your project:

yarn add eslint -D

So you start it:

yarn eslint --init

Now will open in your terminal some options, let’s go to them:

Step 1: To begin with is asked how you want to use ESLint, we choose the third option that says: To check syntax, find problems, and enforce code style.

Step1

Step 2: Now we are asked what kind of module our project uses, and as we already know, ReactJS and React Native works with import / export, so we select the first option.

Step2

Step 3: Well this is easy right? Which framework does our project use? Vue.js React is logical.

Step3

Step 4: Here you are asked where our project runs, if you are configuring for ReactJS select Browser.

Step4

Step 4.1: But if you are configuring for React Native, use Spacebar to uncheck the Browser, and leave it empty and move on, because in React Native we do not necessarily use the Browser.

Step4.1

Step 5: Here questions how we prefer to define the style for our project, we select the first option: Use a popular style guide, we will use a popular style, already existing.

Step5

Step 6: Let’s choose Airbnb’s style, in a moment I’ll explain why, calm down, and let’s move on.

Step6

Step 7: In this step we select JavaScript so that it creates the ESLint configuration file inJS format.

Step7

Step 8: Finally he asks if you want to install via npm, unfortunately we have no choice, give a yes (Y).

Step8

That’s it?

No

After the installation is complete, it will create a package-lock.json file, in the last step when you accept it to install withnpm, it installs, but creates that file, so …

Step 9: Delete the package-lock.json file and run theyarn command to add the dependencies again, but this time through yarn.

Step 10: Finally, install Prettier dependencies, plus Prettier dependencies with ESLint:

yarn add prettier eslint-config-prettier eslint-plugin-prettier babel-eslint -D

Oh Yeah!!

We’re almost there, now just edit the configuration files!

Settings Files


Did you see that at the root of your project came a file called .eslintrc.js?

Homiranha

Yeah, it’s this little friend that we’re going to change, open it, and paste this code:

// .eslintrc.jsmodule.exports = {
  env: {
    browser: true,
    es6: true
  },
  extends: ["airbnb", "prettier", "prettier/react"],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly",
    __DEV__: 'readonly'
  },
  parser: "babel-eslint",
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: "module"
  },
  plugins: ["react", "prettier"],
  rules: {
    "prettier/prettier": "error",
    "react/jsx-filename-extension": ["warn", { extensions: [".jsx", ".js"] }],
    "import/prefer-default-export": "off",
    "no-param-reassign": "off",
    "no-console": ["error", { allow: ["tron"] }]
  }
}

I won’t go into much detail, but this code basically sets up for your Prettier and ESLint to work together, that is, in the rules there we are saying that:

  • “prettier/prettier”: “error” - Prettier will point out any rules it does not find as an error;
  • “react/jsx-filename-extension”: [“warn”, { extensions: [“.jsx”, “.js”] }] - basically allow us to write jsx code in filesjs;
  • “import/prefer-default-export”: “off” - This rule says that when you have only one export inside a file, it isexport default, I disable it because there are cases, which not necessarily, I want it to be default.
  • “no-param-reassign”: “off” - This is not a mandatory rule, but sometimes I need to disable ESLint to allow me to assign variables that I passed as a parameter to a function.
  • “no-console”: [“error”, { allow: [“tron”] }] - With this rule ESLint recognizes the Reactotron “tron”.

That’s it, your ESLint is already set up, ready to use, and to finish, just make a quick setup for Prettier.

Create a file at the root of your project called: .prettierrc

Copy the code below into this file:

// .prettierrc{
  "singleQuote": true,
  "trailingComma": "es5"
}

This code basically says that we’ll use single quotes in the project, and that’s all to make Prettier and Style Guide for Airbnb better communicate.

Okay, all set up, if that’s all you wanted, we close here, until next time, now for the curious, I will explain, as promised, why I chose the Style Guide of Airbnb.

Airbnb Style Guide


The Airbnb style guide is one of the most famous in the world, is used and supported by big companies, including React himself, who recommends it. Their style of code is one of the most acclaimed in the community, so it is the most famous in the world. It’s like the English language in the world, it’s a world standard, and when it comes to the world standard, there’s no discussion.

Finishing


I think it was clear then of the importance of a linter in your code, right?! So, although the steps are long to make the settings, it turns out to be a very easy and smooth process!

So coders, that’s it! See you!

think-different