DEV Community

Cover image for Configure the ESLint
Edson Junior de Andrade
Edson Junior de Andrade

Posted on • Edited on

1

Configure the ESLint

To start, we must use the following command:

yarn add eslint -D
Enter fullscreen mode Exit fullscreen mode

And then we've already initialized it with:

npx eslint --init
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then choose what kind of modules the project uses, in the example I choose the first option React:

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

In the next step, we select which framework we are using, in the example I will follow the previous step React:

? Which framework does your project use? ...
▸ React
  Vue.js
  None of these
Enter fullscreen mode Exit fullscreen mode

The next question is about TypeScript, in the example I won't use it, so I selected ** No **:

? Does your project use TypeScript? » No / Yes
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 for the configuration made above:

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'],
  },
};
Enter fullscreen mode Exit fullscreen mode

Install the ESLint extension for VS Code.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs