Today we are going to learn how we can set up ESLint for a project that uses React and React Native with JavaScript or TypeScript.
This will allow us to recognize errors that appear in our code and configure the type of error we want.
First of all, we need to install ESLint:
npm install eslint --global
Once installed, we install it in our project.
npm install --save-dev eslint
And now let’s configure it:
eslint --init
It will ask us what we are going to use ESLint for:
In my case, I select the default option “To check syntax and find problems”.
Now select JavaScript modules:
The framework type in this case is React:
If we are not using TypeScript, select No.
In my case, I run with Node, since I use React Native, then we select Node
The configuration format, we can choose whichever we want, in my case JavaScript.
It will ask us if we want to install it and we select Yes. And using NPM in my case.
Once installed, it will have created a file called .eslintrc.js
I recommend installing the VSCode plugin ESLint.
To have ESLint tell you what to import when it finds an import error, you can use the eslint-plugin-import plugin. This plugin provides a number of rules related to imports in JavaScript, including import error detection.
npm install eslint-plugin-import --save-dev
And we can add it in the .eslintrc.js file
"plugins": ["import"],
"rules": {
"import/no-unresolved": "error"
}
