Linting JavaScript with ESLint

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 "init" CLI tool, configuring warnings/errors for rules, and adding editor plugins and build integrations. 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.

[00:01] To install ESLint in your project, run npm install, ESLint and then pass at the save-dev flag to store in your package.json devDependencies. ESLint also comes with a command-line tool that lets you easily set up a linting config file. You can install that with "npm install eslint -g."

[00:21] Then, to setup your lint configuration file, run "eslint --init." It will ask you a few questions. It'll ask for what indentation you like to use. I'm going to say "tabs" and then the type of quotes that you prefer.

[00:35] I'll use "single," and the line endings that you want to use, and then if you require semicolons and if you want to use ES6 features, if you're going to run your code in the browser or node or both, if you want to use JSX, and then finally, what configuration format you'd like to use when you use JSON.

[00:56] Now, we have a config file that lists all of these configurations. You can see that it extends the ESLint recommended rules. In the ESLint documentation, you can see which of these rules you're extending with the recommended flag.

[01:13] The recommended rules are generally for possible errors in your code. You can see that the rules that you can use in your ESLint config file can contain these possible errors, as well as best practices and strict-mode variables, some node rules, some purely opinionated style rules, as well as ECMAScript 6 and other environmental rules that apply to other technologies such as JSX.

[01:40] You can use ESLint with any build tool like Gulp, Grunt, or WebPACK. I'm going to use it with npm scripts now. Let's create a lint script and we'll have it run ESLint and lint all of our JavaScript files.

[01:53] Let's create a JavaScript file to test. Call it "mean.js." We will create an example variable and purposely leave off the semicolon and not use the variable. I'm going to run "npm run lint." You can see that we got two errors that the example variable has defined but never used, and that we're missing a semicolon.

[02:14] ESLint has very specific and simple rules that can be easily extended and changed. For example, if I didn't want the no-unused-vars rule to throw an error, but I wanted to throw a warning instead, I could take that rule, place it inside of my configuration-rules object and say, "Grab that rule" and put it in quotes.

[02:37] You can set the value to "zero" if you want it to be completely ignored, "one" if you want it to throw a warning, or "two" if you want it to throw an error. Let's change this to "one" and rerun it and see if it works. You can see now that our no-unused-vars rule is throwing a warning instead of an error.

[02:52] ESLint has integrations from most code editors in build systems. You can find it in the documentation here. You can see I've installed the ESLint plugin from my code editor and it's showing a warning and error in the same way that the command line was showing.