ESLint, the Configurable Next-Gen (ES6, JSX) JavaScript Linter
ESLint is a next-gen JS linter executable that allows you to configure linting on a project by project basis. It supports ES6 and JSX syntax.
Unlike most packages installed via npm
, it makes most sense to install eslint globally: npm install -g eslint
. Running eslint --init
in a project directory will prompt you to pick a popular style guide or answer a series of questions to generate your .eslintrc.*
file (YAML, JS, or JSON).
This file differentiates eslint
from other linters like jshint
or pyflakes
: eslint
won’t even run without it. If gives you fine-grained control of what should raise an error, what should raise a warning, and what should be ignored. If there is no .eslintrc.*
file in the current directory, eslint will traverse upward and look for it in the parent directory, until it gets to your home directory. As with many config dotfiles, the default file should go here. This is mine:
module.exports = {
"rules": {
"indent": [
1,
2
],
"quotes": [
1,
"single"
],
"linebreak-style": [
2,
"unix"
],
"semi": [
1,
"always"
],
"comma-dangle": [
0,
],
"no-unused-vars": [
1,
]
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"extends": "eslint:recommended",
"ecmaFeatures": {
"modules": true,
"jsx": true,
"forOf": true,
"experimentalObjectRestSpread": true
},
"plugins": [
"react"
]
};
By default, I can lint JS written for the browser or written for Node, with general support for ES6, and specific ecmaFeatures
such as jsx
, modules
and forOf
loops enabled.
JSX and Other Syntaxes
If you want to lint JSX, an additional npm package, eslint-plugin-react
. If you want to be sure this is in your path (for example, so that SublimeLinter can see it), install it globally. If you set up a new project with eslint --init
and indicate that you want to lint JSX, eslint will automatically install this plugin locally.
One Linter to Rule Them All
Very few linters offer the customizability of eslint. Back in the day, before the profusion of frameworks, being able to configure a linter might have seemed like overkill. If you don’t like how pyflakes
does things, you just install a different linter, like pep8
. Modern JavaScript, however, is a different beast. It’s used to build nearly anything — single page web apps, servers, APIs, mobile apps, command line tools, etc — and syntax and coding conventions vary accordingly. A linter dealing with these use cases needs to be customizable, and that’s why eslint is the JS linter to rule them all.