React Code Style with ESLint + Babel + Webpack

Code style is an important topic for developers. When you code for yourself, it might be alright to violate best practices. However, in a team of developers you have to have a common code style. You should follow the same rules to make your code look alike. It helps others developers to read your code. It helps people to navigate in a new code base. ESLint in JavaScript helps you to set up rules and to enforce code style.

The article will teach you how to setup ESLint in a React + Babel + Webpack environment. You can setup rules for JavaScript and React to enforce a unified code style. Every violated rule will ping you and your team members in the terminal or developer console in the browser. Additionally you will not only learn about custom rules, but also recommended best practices in the community. You will learn to extend your rules easily with a common set of rules in one line of configuration.

Apart from ESLint for as a code style checker, you should know about the alternatives as well: Prettier and StandardJS.

Table of Contents

ESLint

A linter like ESLint helps you to maintain a consistent JavaScript and React code style in your project. Let’s get started by installing the eslint node package.

From root folder:

npm --save-dev install eslint

Since the project uses Webpack, you have to tell Webpack that you want to use eslint in your build. Therefore you can install eslint-loader.

From root folder:

npm --save-dev install eslint-loader

Now you can use the loader in your Webpack configuration.

webpack.config.js

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

When you start your application now, it will output an error; No ESLint configuration found. You need such a file to define your configuration:

From root folder:

touch .eslintrc

.eslintrc

{
  "rules": {
  }
}

Later on you can specify rules in the file. But first try to start your app again.

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 yet, which you might have enabled via Babel. The import statement is an ES6 feature. Let’s install Babel support that ESLint can interpret the JavaScript code.

ESLint + Babel

You might have already installed the babel-loader to transpile your code with Webpack. Otherwise you can do it by using npm.

npm install --save-dev babel-loader

Now you can use that loader and pair it with the eslint-loader.

webpack.config.js

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

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-loader!babel-loader'
    }
  ]
},
...

Additionally you have to use babel-eslint in your configuration 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 you didn’t specify rules yet.

ESLint Rules

ESLint rules apply for a lot of different code style use cases. You can check the list of available ESLint rules. Let’s add your first rule.

.eslintrc

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

The rule checks the length of the lines of code. When the length is more than 70 characters, you will get an error.

From root folder:

npm start

You might see some errors regarding your lines of code length, because some of your lines are longer than 70 characters. You 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 you need to add the eslint-plugin-react.

From root folder:

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

Now you can use the react plugin and specify your first React rule, which says that you have to specify PropTypes for your React 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: Definition for rule 'prop-types' was not found. You might want to fix them by defining PropTypes for your React components.

These were your first custom JavaScript and React rules. But you can use common recommendations from the community. Such presets, like they exist for React, give you a set of rules that everyone uses.

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

Let’s go one step further with extending the rules by another set of rules.

Extend ESLint Rules

Since you don’t want to specify your own set of rules every time, there are plenty of recommendations out there. You already used one for React. Another one is the Airbnb Style Guide. Airbnb open sourced its own ESLint configuration that everyone can use it in their ESLint configuration.

You have to install the required packages.

From root folder:

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

Now you can add Airbnbs’ ESLint configuration to your ESLint configuration. When you have a look at the installed node packages, you can see that the configuration includes JSX and React rules.

.eslintrc

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

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 according ESLint configuration are very popular and well accepted by developers.

Disable ESLint Rules

Now you are prepared to fix all the ESLint code style violations in your code. Start your application to see all the ESLint errors.

From root folder:

npm start

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

You can disable a rule globally:

.eslintrc

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

And you can disable a rule in a local file:

/*eslint-disable no-unused-vars*/
...some code...
/*eslint-enable no-unused-vars*/

Code Style Alternatives

There are a handful of useful style guides in the JavaScript and React community. It makes sense to read them even though you don’t enforce every aspect in your set of rules in ESLint. As a JavaScript developer, I can highly recommend to read them though.

Another alternative are code formatters. In the JavaScript ecosystem there are two mainly used solutions that enforce an opinionated code style. These solutions will reformat your code on demand. You don’t have to fix the code style violations yourself and you don’t have to set up any rules. There is a default set of rules.

StandardJs is one of these code formatters that is widely known and used in the JavaScript community. Yet recently there was another solution released with the name Prettier.

Both solutions can be installed globally or locally via npm. Afterward you can include these in your projects and reformat the code on demand. You can go one step further and install an editor or IDE plugin for StandardJS or Prettier. In my case, using Sublime as my editor of choice, I installed both plugins to experiment with both approaches. It is convenient to have an automatic code formatter. Finally you can configure your editor to reformat your code style, based on StandardJS or Prettier, whenever you save your file.


The article taught you how to set up ESLint in a React, Babel and Webpack environment. You can now setup custom rules or extend your rules from well maintained open source projects. Additionally, you know about the common style guides to have a better understanding of how to write clean JavaScript and React code. In closing, I recommend you look for ESLint integrations for your editor, so your editor can warn you in real time whenever you violate an ESLint rule.

Build a Hacker News App along the way. No setup configuration. No tooling. No Redux. Plain React in 190+ pages of learning material. Learn React like 12.000+ readers.

Get the Book
comments powered by Disqus

Never miss an article about web development and self-growth.

Take Part

Join 7200+ Developers

Learn Web Development with JavaScript

Tips and Tricks

Access Tutorials, eBooks and Courses

Personal Development as a Software Engineer