React Code Style with ESLint + Babel + Webpack

  • ESLint in JavaScript helps you to set up rules and to enforce code style.
  • You can setup rules for JavaScript and React to enforce a unified code style.
  • ESLint rules apply for a lot of different code style use cases.
  • 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.
  • And you can disable a rule in a local file: – – There are a handful of useful style guides in the JavaScript and React community.

You want to setup ESLint in your ReactJs project? But your project includes Babel and Webpack? This article will guide you through all the options with style guides such as Airbnb’s style guide, the setup process for ESLint in React, and more beneficial recommendations to follow styling rules in your project …

January 19, 2018 – Edit this Post on GitHub

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.

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:

Since the project uses Webpack, you have to tell Webpack that you want…

React Code Style with ESLint + Babel + Webpack