Your code more organized with Eslint and Prettier

• The walkthrough below was reproduced in a next.js project

To start, we must use the following command:

yarn add eslint -D

And then we've already initialized it with:

npx eslint --init

Now that we've started setting up ESLint, the first question concerns how we're going to use ESLint in our system:

  To check syntax only
  To check syntax and find problems
▸ To check syntax, find problems, and enforce code style

Then choose what kind of modules our project uses, in this case how we are dealing with React is the first option:

? What type of modules does your project use? ...
▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

In the next step, we select which structure we are using, again, it will be the first option:

? Which framework does your project use? ...
▸ React
  Vue.js
  None of these

The next question is about TypeScript, since we are not configuring the project with it, just select
No:

? Does your project use TypeScript? » No / Yes

In the next step, we must select where our code will run:

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
  Node

Now we are asked to choose a style to be used in the project, we must choose between an existing one, create a style or use our own, I always choose to use an existing one and choose to use AirBNB:

? How would you like to define a style for your project? ...
▸ Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

And finally, we chose the format of our configuration file, again a personal choice:

? What format do you want your config file to be in? ...
▸ JavaScript
  YAML
  JSON

Once the settings are complete, ESLint will ask you if you want to install the dependencies using ** npm *, as our project is using * yarn ** here you have two options:

• select ** Yes **, delete the package.lock.json file generated after installation and runyarn to install the dependencies into the yarn.lock file
• select ** No **, copy the list of dependencies described and install them using yarn add ... (don't forget to add -D if you choose this option)

Now that we have our .eslintrc file, we assume the following settings:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['airbnb', 'plugin:react/recommended'],
  parser: 'babel-eslint',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    'react/jsx-filename-extension': ['warn', { extensions: ['.js', '.jsx'] }],
    'import/prefer-default-export': 'off',
    'jsx-quotes': ['error', 'prefer-single'],
  },
};

Install the ESLint extension for VS Code.

Prettier

Here we will install two dependencies to configure Prettier along with ESLint, the first disables the conflicting rules between Prettier and ESLint and the second transforms Prettier and its settings into ESLint rules, so we can integrate the two, come on:

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

Now let's update our .eslintrc file again, let's leave our extends, plugins and rules keys like this:

extends: [
  "next",
  "next/core-web-vitals",
  "eslint:recommended",
  "prettier/react",
  "airbnb",
  "plugin:react/recommended",
  "plugin:prettier/recommended"
],
plugins: ['react', 'prettier'],
rules: {'prettier/prettier':  'error'}

Finally, create a .prettierrc.json file and configure it as follows:

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true
}