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 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
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
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
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 theyarn.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'],
},
};
Install the ESLint extension for VS Code.
Top comments (0)