Linting React JSX with ESLint (in ES6)

Trevor Miller
InstructorTrevor Miller

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 3 years ago

ESLint is a JavaScript linter (static analysis tool) that offers full support for ES6, JSX, and other modern tools via plugins. We walk through setting up ESLint in a project, using the eslint --init CLI tool with the JSX and ES6 options, writing a React component in JSX, and adding some extra react linting rules with a plugin. ESLint is built to be "pluggable" with simple, extendable, modular rules and an API for writing and using plugins. ESLint has many rules which are all turned off by default; you can extend the core "recommended" rules which will catch common JavaScript errors, and you can also turn on stylistic rules for code consistency. You can also use plugin rules which we do in this lesson with the eslint-plugin-react package.

[00:01] To install ESLint, I'm going to jump into my command line and run 'npm install --save-dev eslint'. Now, we can see that in our dev dependencies in our package.json we have ESLint, so that will work locally. Then, we also need ESLint installed globally in order to use the generator that they provide.

[00:20] To do that, I'm going to clear out my command line here and run 'npm install eslint-g'. Now that I have ESLint installed globally, I can run their generator to create a config file for my linting rules. To do that, I'll run 'eslint --init'. This will provide a couple questions here. Let me expand this so you can see it easier.

[00:42] What style of indentation? We're going to pick spaces. The types of quotes we'll use single, and the line endings will be Unix, and I will require semicolons, and I want to use ES6 here. We'll just run this in the browser. You can use Note, as well. Here is a key piece. You can use JSX. We're going to do yes on JSX, and we're also going to say yes on using React.

[01:08] Let's use the JSON format for configuration. I'm going to put my command line over to the side again. When I hit yes in this, you'll see a new file appear. Now we have an ESLint, our C file. If we take a look at this, we can see the rules that have been provided based on the answers that we gave to those questions.

[01:28] Let's take a look at the configurations specific to React and ECMAScript 6. If we go down to our environment object, we have ES6 set to true. In ECMA features, we have JSX set to true. Then, we have the React plugin listed. If you notice, if we hop back over to our package.json, there's this 'eslint-plugin-react' that was automatically installed, as well.

[01:53] Basically, running 'eslint --init' will give you everything that you need out of the box as long as you answer the questions correctly except for one thing, and that is ES6 modules. In order to use ES6 modules, we need to go into our '.eslintrc', go down to the ECMA features, and add '"modules":true'.

[02:13] If we save that, we have full support in our linting for ES6 and React in JSX. Let's create a React component to give this a try. In my root, I will create a new file called app.js. Now, I'm going to write a quick ES6 React component. We have this simple React component written in ES6 that simply renders "Hello world."

[02:41] Currently, there's no linting errors, because we haven't configured any specific rules in the React plugin. If we go back to our package.json, remember that there's the 'eslint-plugin-react'. I'm going to take a look at the documentation for that plugin.

[02:57] You can see here that we've already gone through the configuration steps, but now there's all these rules that you can add for linting your React code. For example, let's say that we wanted to make sure that we always had propTypes. We could take this rule, go into our '.eslintrc' and inside of our rules add react to propTypes.

[03:20] We can either have a one, have it be a warning, or two for it to fail. We'll just keep this as a warning. I'll save this. If we go back to our application and re-save, we're getting a warning here that says that our content is missing props validation. We can see here that content is referring to this propType. This component is expecting.

[03:41] Let's create a propType for that to get rid of this linting error. We'll say 'app.PropTypes' is equal to an object that has content. We'll set this to 'React.PropTypes.string' and we'll make it required. Semicolon there. Now our linting error's gone.

[04:02] Let's look at one more example of adding linting rules for React. One thing that I think would be helpful is to not allow more than one component per file. We can see that there is a rule for that in the documentation. If you scroll down there, they list descriptions, but the one I'm referring to is this 'no-multi-comp' which prevents multiple component definitions in one file.

[04:27] If we grab that guy right here, 'react/no-multi-comp', and we'll go into our '.eslintrc' and add that as another rule. We'll make that as a warning, as well. If we go back to our app and we try to create another component inside of here, we'll just copy this guy and call it 'app2'. Try to save this file. We're getting this warning that says we should only declare one React component per file.