Use ESLint Like a Pro with ES6 and React – Zsolt Nagy

Use ESLint like a pro with ES6 and #ReactJS:

  • The file .eslintrc is a JSON file responsible for configuring your individual linting rules.
  • Each import would result in a linting error.
  • Using the “translate_tabs_to_spaces” key neutralizes the default linting rule “no-mixed-spaces-and-tabs” .
  • As our code is guarded by linting rules, we are guaranteed to produce consistent code, increasing maintainability.
  • The site uses cookies More info

ESLint helps us catch mistakes by enforcing consistent standards and best practices. As our code is guarded by linting rules, we are guaranteed to produce consistent code, increasing maintainability.

@ReactiveConf: Use ESLint like a pro with ES6 and #ReactJS:

In this article, we will extend our application setup with linting.

If you have not read my article on setting up a JavaScript application with React, I highly recommend reading it first.

ESLint helps us catch mistakes by enforcing consistent standards and best practices. As our code is guarded by linting rules, we are guaranteed to produce consistent code, increasing maintainability.

. This plugin is responsible for linting React code. First, let’s install ESLint via npm:

npm script in the next section of this article.

is a JSON file responsible for configuring your individual linting rules. When it comes to React, the following keys and values are recommended so that ESLint works with React smoothly:

key is responsible for enabling the React plugin.

was a top level key. Regardless of the version, this is the section where you can enable ESLint.

would result in a linting error.

etc when writing your automated tests.

npm module. It’s time to use it.

in order to watch linting. Once you save a file, the linter displays all the errors and warnings.

You need to run

Later, you may run an automated testing tool as well.

package to handle executing multiple scripts:

, both scripts are executed in parallel. You will get all the compilation errors and linting errors in one window. Whenever you save a file, all the compilation and linting errors will be printed in the terminal.

You can also configure the linter in Sublime Text 3. Open the Package Control, and install the following two packages:

Red and yellow dots appear next to the line numbering, indicating warnings and errors respectively. Error messages appear at the bottom of your editor.

If you are using Atom, VS Code, or WebStorm, configuration is different. Check out the ESLint integrations guide for more information.

If you prefer configuring your own rules, you have to know what your options are. In this section, we will set up custom linting rules. These rules reflect my own opinion on how coding works the best for me.

As you can see from the comment, the first argument of the rule setting describes the enforcement level of the rule:

. There are two valid reasons:

Let’s see some clarification why I chose these settings. Warning: you will read my opinion, not the ultimate truth.

You can look up the documentation of any ESLint rules by pasting the name of the rule in the search bar of eslint.org.

is a property of the global object, and the value of this property is not changeable.

The following rules are only warnings, as there are cases when it makes sense to violate them:

For a complete list of React/JSX linting rules, check out the npm documentation.

Your editor can also help you get rid of some linting errors. I use the following configuration in Sublime Text:

. Your configuration is a JSON file. If you like the above keys, add them to your configuration.

Check out the code of the React Chat Example tutorial.

You can download or fork the correct branch of my GitHub repository here.

Set up the linter based on this article, and correct linting errors to get a feel for using ESLint. Try out using ESLint both in the terminal and in your favorite IDE or text editor.

Use ESLint Like a Pro with ES6 and React – Zsolt Nagy