This tutorial is a component 3 of three within the collection.
On this tutorial I need to stroll you thru establishing ESLint for React. It is best to undergo the earlier tutorials so as to study concerning the primary setup for Webpack and ESLint although. It’ll additionally inform you about all the advantages that include the code fashion enhancements which ESLint is giving your initiatives.
Webpack and Babel for React ESLint
First, you have to make it possible for your .babelrc (or bundle.json if that is the place the place you might have your Babel configuration) helps JSX and the Webpack plugin for ESLint from the earlier tutorials acquired put in as properly. It is necessary that ESLint is used inside your Webpack construct to implement your code fashion for each of your npm scripts which run Webpack. Additionally Webpack must learn about React (JSX) in any respect.
...
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
guidelines: [
jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
]
...
plugins: [new ESLintPlugin()],
...
};
That is all the pieces you have to introduce your first ESLint guidelines for React.
ESLint Guidelines for React
Beforehand, you might have learn that there are pre-configured ESLint configurations on the market. Maybe you might have used the Airbnb configuration which already comes with guidelines for React. If not, a quick recap on how you’d introduce the Airbnb fashion information to your ESLint configuration. First, set up the Airbnb configuration along with all its peer dependencies:
npx set up-peerdeps --dev eslint-config-airbnb
Afterward, you’ll be able to introduce it in your .eslintrc configuration file for ESLint:
{
"parser": "@babel/eslint-parser",
"extends": ["airbnb"]
}
That is it. After operating your npm begin script which makes use of Webpack, it’s best to see all of the ESLint violations, concerning React but additionally JavaScript, in your command line. When you have put in an IDE/editor extension/plugin, it’s best to see the ESLint violations there as properly.
Airbnb’s ESLint config is just one of many standard pre-configured units of ESLint guidelines. For those who simply need to double down on React, it’s possible you’ll need to try the ESLint plugin for React. It comes with a lot of suggestions from the React group. Nevertheless, if you happen to want a full-blown ESLint resolution for React along with JavaScript, you might be good to go together with Airbnb’s code fashion suggestions.
This tutorial is a component 1 of three within the collection.
