ESLint in React + Babel + Webpack

Datetime:2016-08-23 00:28:09          Topic: React  Webpack           Share

The tutorial builds up on The SoundCloud Client in React + Redux .

The ESLint in React + Babel + Webpack tutorial will teach you how to setup ESLint in a React + Babel + Webpack environment. In addition to the setup of usual code style rules, you will add React rules to enforce a better code style in your React environment as well. Moreover you will learn how to extend your ESLint rules with existing best practices rules of companies like Airbnb.

If you don’t have the outcome of The SoundCloud Client in React + Redux , checkout this repository . Clone the repository and use the Base folder named base-init/ as seed project. The seed project is the same which you would implement when you would step through theinitial tutorial. Next to the Base folder you will find several Extension folders, which will show the outcome of each tutorial which builds up on The SoundCloud Client in React + Redux .

Seed Project?

When you have your own The SoundCloud Client in React + Redux The SoundCloud Client in React + Redux project, you can continue with theand ignore the following instructions.

When you are using the seed project, make sure to clone the repository and navigate into the base-init/ folder. The folder will be seen as the root folder for this project in this tutorial. Moreover make sure that your project starts.

Fromt root folder:

npm install
npm start

Table of Content

ESLint

Why do we want to install ESLint in the first place? A linter like ESLint helps you to maintain a consistent code style in your project. Especially when a project grows and multiple people are involved, you want to enforce some best practices.

Let’s get started by installing the eslint package.

From root folder:

npm --save-dev install eslint

Since we are using Webpack, we have to tell Webpack that we want to use eslint in our build. Therefore we can install eslint-loader .

From root folder:

npm --save-dev install eslint-loader

Now we can use the loader in our Webpack configuration.

webpack.config.js

...
module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel'
    },
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'eslint-loader'
    }
  ]
},
...

Moreover we can either specify our rules within the webpack configuration or follow a best practice to have a dedicated file for the rules. We will do the latter one.

From root folder:

touch .eslintrc

.eslintrc

{
  "rules": {
  }
}

Later on we can specify rules in the file. But first let’s require the file in our Webpack configuration.

webpack.config.js

...
devServer: {
  contentBase: './dist',
  hot: true,
  historyApiFallback: true
},
eslint: {
  configFile: './.eslintrc'
},
plugins: [
...

Now you can start your app.

From root folder:

npm start

You might run into Parsing error: The keyword ‘import’ is reserved , which happens because ESLint does not know about ES6 features (like import) yet, whichwe enabled via Babel.

ESLint + Babel

Previously we already installed the babel-loader to transpile our code with Webpack. Now we can use that loader and pair it with the eslint-loader.

webpack.config.js

...
module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel'
    },
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['babel-loader', 'eslint-loader']
    }
  ]
},
...

Note: An alternative would be to use Webpacks’ preLoaders.

webpack.config.js

...
module: {
  preLoaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'eslint-loader'
    },
  ],
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel'
    }
  ]
},
...

Additionally we have to use babel-eslint to lint all valid ES6 code.

From root folder:

npm install --save-dev babel-eslint

.eslintrc

{
  parser: "babel-eslint",
  "rules": {
  }
}

You should be able to start your app. There are no errors displayed, because we didn’t specify any rules yet.

ESLint Rules

Let’s add our first rule.

.eslintrc

...
"rules": {
  "max-len": [1, 70, 2, {ignoreComments: true}]
}
...

We added a rule to check the length of our lines of code. When the length is over 70 characters, we will get an error.

From root folder:

npm start

You might see some errors regarding of your line of code length, because some of your lines are longer than 70 characters. We can adjust the rule to allow some more characters.

.eslintrc

...
"rules": {
  "max-len": [1, 120, 2, {ignoreComments: true}]
}
...

If you still see errors, it is your first chance to fix them in your codebase.

ESLint Rules for React

Let’s add some code style checking for React. Therefore we need to add the eslint-plugin-react .

From root folder:

npm --save-dev install eslint-plugin-react

Now we can use the react plugin and specify our first rule, which says that we have to specify PropTypes for our components.

.eslintrc

{
  parser: "babel-eslint",
  "plugins": [
    "react"
  ],
  "rules": {
    "max-len": [1, 120, 2, {ignoreComments: true}],
    "prop-types": [2]
  }
}

When you start your app, you might see PropTypes definition errors. You might want to fix them.

Additionally you can use presets which will give you a rule set of recommended React rules. But let’s go one step further by extending our rules.

Extend ESLint Rules

Since we don’t want to specify our own rule set every time, there are plenty of best practices rules out there. One of them is the Airbnb Style Guide . Moreover Airbnb open sourced its own ESLint configuration .

Some of the required packages we already installed, but some are missing:

From root folder:

npm --save-dev install eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y

Now we can add a one-liner to our ESLint configuration to use Airbnbs’ ESLint configuration. When you look back at the packages we installed, you can see that the configuration includes JSX and React rules.

.eslintrc

{
  parser: "babel-eslint",
  "extends": "airbnb",
  "rules": {
    "max-len": [1, 120, 2, {ignoreComments: true}],
    "prop-types": [2]
  }
}

You can see that it is very simple to extend the ESLint rules from someone else. We could use other extensions as well, but at this time the Airbnb Code Style and the ESLint configuration are very popular and well accepted by developers.

Clean Up

Now we are ready to fix all the ESLint errors in our code base!

From root folder:

npm start

You might see a lot of errors in your terminal. Additionally they will appear in the console output when you navigate to your app in the browser. Now you can start to fix the errors. Whenever you are unsure about the error, google it and evaluate whether you want to have this rule in your codebase. You can either fix the error in the mentioned file or disable the rule, when you think you don’t need it.

Here I have one example of disabling a rule globally:

.eslintrc

{
  parser: "babel-eslint",
  "extends": "airbnb",
  "rules": {
    "no-unused-vars": 0,
    "max-len": [1, 120, 2, {ignoreComments: true}],
    "prop-types": [2]
  }
}

But rather than disabling it globally, you can also do it for a specific line in your codebase.

src/index

/*eslint-disable no-unused-vars*/
import SC from 'soundcloud';
/*eslint-enable no-unused-vars*/
import React from 'react';
import ReactDOM from ‘react-dom';
...

That’s it for this tutorial! I hope it helps you to set up ESLint properly in your React + Babel + Webpack project. Your outcome should be the same as the one in the /extension-eslint folder .

Final Words

Have a look again in The SoundCloud Client in React + Redux tutorial for more smaller tutorials which build up on top of the SoundCloud project. All tutorials on top will get released in the repository as well. Follow me on twitter to get updates. Feel free to give me feedback!





About List