Published Mar 12 2018
Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! ✨
ESLint is a JavaScript linter.
Good question! A linter is a tool that identifies issues in your code.
Running a linter against your code can tell you many things:
It will raise warnings that you, or your tools, can analyze and give you actionable data to improve your code.
ESLint is a linter for the JavaScript programming language, written in Node.js.
It is hugely useful because JavaScript, being an interpreted language, does not have a compilation step and many errors are only possibly found at runtime.
ESLint will help you catch those errors. Which errors in particular you ask?
for
loop conditionsand much more! The full list is available at https://eslint.org/docs/rules/
The growing popularity of Prettier as a code formatter made the styling part of ESLint kind of obsolete, but ESLint is still very useful to catch errors and code smells in your code.
ESLint is very flexible and configurable, and you can choose which rules you want to check for, or which kind of style you want to enforce. Many of the available rules are disabled and you can turn them on in your .eslintrc
configuration file, which can be global or specific to your project.
Using npm.
npm install -g eslint
# create a `.eslintrc` configuration file
eslint --init
# run ESLint against any file with
eslint yourfile.js
npm install eslint --save-dev
# create a `.eslintrc` configuration file
./node_modules/.bin/eslint --init
# run ESLint against any file with
./node_modules/.bin/eslint yourfile.js
The most common use of ESLint is within your editor of course.
ESLint can be configured in tons of different ways.
A common setup is to use the Airbnb JavaScript coding style to lint your code.
Run
yarn add --dev eslint-config-airbnb
or
npm install --save-dev eslint-config-airbnb
to install the Airbnb configuration package, and add in your .eslintrc
file in the root of your project:
{
"extends": "airbnb",
}
Linting React code is easy with the React plugin:
yarn add --dev eslint-plugin-react
or
npm install --save-dev eslint-plugin-react
In your .eslintrc
file add
{
"extends": "airbnb",
"plugins": [
"react"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
}
}
ECMAScript changes version every year now.
The default is currently set to 5, which means pre-2015.
Turn on ES6 (or higher) by setting this property in .eslintrc
:
{
"parserOptions": {
"ecmaVersion": 6,
}
}
{
"parserOptions": {
"ecmaFeatures": {
"impliedStrict": true
}
}
}
A detailed guide on rules can be found on the official site at https://eslint.org/docs/user-guide/configuring
Sometimes a rule might give a false positive, or you might be explicitly willing to take a route that ESLint flags.
In this case, you can disable ESLint entirely on a few lines:
/* eslint-disable */
alert('test');
/* eslint-enable */
or on a single line:
alert('test'); // eslint-disable-line
or just disable one or more specific rules for multiple lines:
/* eslint-disable no-alert, no-console */
alert('test');
console.log('test');
/* eslint-enable no-alert, no-console */
or for a single line:
alert('test'); // eslint-disable-line no-alert, quotes, semi