- What is ESLint?
- Setting Up ESLint
- Running ESLint
- Customizing ESLint Rules
- Advanced ESLint Features
- Running ESLint Automatically
- Best Practices for Using ESLint
- ESLint in a Team Environment
- Advanced Customization
- ESLint and TypeScript
- ESLint in Monorepos
- ESLint for Different Environments
- Utilizing ESLint in CI/CD Pipelines
- Conclusion
Writing clean, maintainable code is essential for any successful software project. In the world of JavaScript, ESLint is a powerful tool that helps developers achieve this goal by identifying and fixing problems in their code. ESLint not only enforces coding standards but also helps catch potential bugs early, improving overall code quality and reducing the likelihood of issues down the road.
This guide will walk you through the process of setting up and using ESLint in your JavaScript projects. We’ll cover everything from basic installation to advanced configurations, ensuring you have the tools and knowledge needed to maintain high-quality code. Let’s dive into the details of using ESLint effectively.
What is ESLint?

The Purpose of ESLint
ESLint is a static code analysis tool for JavaScript. Its main purpose is to identify problematic patterns found in JavaScript code. This includes potential errors, coding style violations, and other suboptimal practices.
By integrating ESLint into your development workflow, you can catch issues early and maintain a consistent coding style across your team.
How ESLint Works
ESLint scans your JavaScript files and compares the code against a set of rules defined in a configuration file. These rules can range from enforcing coding conventions to detecting potential bugs.
When ESLint encounters code that violates these rules, it reports the issue, allowing you to correct it before it becomes a problem.
Setting Up ESLint

Installation
To get started with ESLint, you first need to install it. ESLint can be installed globally or locally within a project. Installing it locally is generally recommended to ensure consistency across different environments.
To install ESLint locally, navigate to your project directory and run the following command:
npm install eslint --save-dev
Initial Configuration
Once ESLint is installed, you need to create a configuration file. This file tells ESLint which rules to enforce and how to apply them. You can generate this file automatically by running:
npx eslint --init
This command will prompt you with a series of questions to help set up your configuration file. You’ll be asked about the type of project you’re working on, which module system you’re using, and whether you want to enforce a particular coding style or use a popular style guide like Airbnb, Google, or Standard.
Basic Configuration Example
After running the initialization command, you’ll have an .eslintrc
file in your project directory. Here’s a basic example of what it might look like:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"indent": ["error", 2],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "double"],
"semi": ["error", "always"]
}
}
This configuration sets the environment to recognize browser globals and ES2021 features. It extends the recommended ESLint rules and React-specific rules, and it specifies some basic style rules for indentation, linebreaks, quotes, and semicolons.
Running ESLint
Command Line Usage
With ESLint configured, you can start using it to analyze your code. The simplest way to run ESLint is from the command line. Navigate to your project directory and run:
npx eslint yourfile.js
You can also lint an entire directory of files:
npx eslint src/
Integrating with Build Tools
For a smoother workflow, you can integrate ESLint with your build tools. If you’re using a task runner like Gulp or Grunt, or a module bundler like Webpack, you can configure these tools to run ESLint automatically as part of your build process.
Using Gulp

Here’s how you can integrate ESLint with Gulp:
- First, install the necessary packages:
npm install gulp-eslint --save-dev
- Then, add the following task to your
gulpfile.js
:
const { src } = require('gulp');
const eslint = require('gulp-eslint');
function lint() {
return src(['**/*.js'])
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError());
}
exports.lint = lint;
Using Webpack
To use ESLint with Webpack, follow these steps:

- Install the ESLint loader:
npm install eslint-loader --save-dev
- Add the ESLint loader to your
webpack.config.js
:
module.exports = {
// other configuration settings
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['eslint-loader']
}
]
}
};
Customizing ESLint Rules

Understanding ESLint Rules
ESLint rules define the coding standards and practices that your codebase should follow. Each rule can be configured to throw an error, show a warning, or be turned off entirely. Customizing these rules allows you to enforce specific coding styles and practices that align with your project’s requirements.
Configuring Rules
Rules can be configured in your .eslintrc
file. Each rule can have one of three settings: “off” (0), “warn” (1), or “error” (2). For example, if you want to enforce a rule that requires the use of single quotes for strings, you would configure it as follows:
"rules": {
"quotes": ["error", "single"]
}
You can also add additional parameters to some rules. For example, to enforce two-space indentation and allow the use of tabs for alignment, you could configure the indent
rule like this:
"rules": {
"indent": ["error", 2, { "SwitchCase": 1 }]
}
Popular ESLint Rule Sets
Airbnb Style Guide

The Airbnb style guide is a widely-used set of rules that enforces strict coding standards. To use it, you need to install the ESLint Airbnb configuration:
npx install-peerdeps --dev eslint-config-airbnb
Then, extend the Airbnb configuration in your .eslintrc
file:
"extends": [
"airbnb"
]
Google Style Guide

The Google style guide is another popular rule set that emphasizes readability and simplicity. To use it, install the ESLint Google configuration:
npm install eslint-config-google --save-dev
Extend the Google configuration in your .eslintrc
file:
"extends": [
"google"
]
Advanced ESLint Features
Using Plugins
ESLint supports a wide range of plugins that extend its functionality. Plugins can provide additional rules, integrate with other tools, and offer support for different environments and frameworks.
Installing and Configuring Plugins
To use a plugin, you first need to install it. For example, to use the React plugin, run:
npm install eslint-plugin-react --save-dev
Then, include the plugin in your .eslintrc
file:
"plugins": [
"react"
]
You can then configure the plugin’s rules just like any other ESLint rules:
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
}
Using Custom Parsers
Sometimes, you might need to use a custom parser to support features that ESLint’s default parser doesn’t handle. This is common when working with modern JavaScript syntax or other languages that transpile to JavaScript.
Babel-ESLint
To use ESLint with Babel, install the Babel parser:
npm install @babel/eslint-parser --save-dev
Then, configure your .eslintrc
file to use the Babel parser:
"parser": "@babel/eslint-parser",
"parserOptions": {
"requireConfigFile": false,
"babelOptions": {
"presets": ["@babel/preset-env"]
}
}
Integrating ESLint with IDEs
Using ESLint directly in your integrated development environment (IDE) can provide instant feedback as you write code. This integration helps you catch errors and style issues on the fly, leading to a more efficient workflow.
Visual Studio Code
To integrate ESLint with Visual Studio Code, install the ESLint extension from the marketplace. Once installed, Visual Studio Code will automatically run ESLint on your JavaScript files, highlighting issues directly in the editor.
WebStorm
WebStorm has built-in support for ESLint. To enable it, go to Preferences > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
, and configure it to use the local ESLint package. This will provide real-time linting and autofix suggestions within the editor.
Running ESLint Automatically
Pre-Commit Hooks

Using pre-commit hooks, you can ensure that code adheres to your ESLint rules before it gets committed to your repository. Tools like Husky and lint-staged make this process straightforward.
Setting Up Husky and lint-staged
- Install Husky and lint-staged:
npm install husky lint-staged --save-dev
- Add the following configuration to your
package.json
:
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"eslint --fix",
"git add"
]
}
This configuration will run ESLint on all staged JavaScript files before committing, automatically fixing any issues that can be fixed and adding the changes back to the commit.
Continuous Integration
Integrating ESLint into your continuous integration (CI) pipeline ensures that all code pushed to your repository meets your quality standards. Most CI tools, such as Jenkins, Travis CI, and CircleCI, can be configured to run ESLint as part of the build process.
Example Configuration for Travis CI
Add the following to your .travis.yml
file:
language: node_js
node_js:
- "node"
script:
- npm run lint
This configuration will run your linting script as part of the CI build, ensuring that any issues are caught before the code is merged.
Best Practices for Using ESLint

Consistent Code Style
Maintaining a consistent code style across your project is crucial for readability and collaboration. ESLint helps enforce these styles, making your codebase more uniform and easier to maintain.
Enforcing Consistency
Define and stick to a single style guide for your project. Whether you choose the Airbnb, Google, or your custom rules, ensure everyone on the team uses the same configuration. This avoids unnecessary code style conflicts and keeps your codebase clean.
In your .eslintrc
file, ensure you extend a chosen style guide:
"extends": [
"airbnb"
]
Customize additional rules as needed to fit your specific preferences or requirements.
Regular Code Reviews
Integrating ESLint into your code review process ensures that all code meets your standards before it is merged into the main branch. Automated linting checks can be part of pull request validations, but human reviews are also essential for maintaining high-quality code.
Code Review Tools
Use tools like GitHub Actions, GitLab CI/CD, or Bitbucket Pipelines to automate lint checks on pull requests. Set up these tools to run ESLint and report any issues directly in the pull request conversation, making it easy to spot and address problems before merging.
For example, with GitHub Actions, create a workflow file .github/workflows/lint.yml
:
name: Lint
on: [pull_request]
jobs:
eslint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v1
with:
node-version: '14'
- run: npm install
- run: npx eslint . --ext .js,.jsx
Refactoring and Legacy Code
When integrating ESLint into an existing project, dealing with legacy code can be challenging. ESLint can help refactor and improve the quality of older codebases incrementally.
Handling Existing Issues
Start by running ESLint on the entire codebase to identify issues. You may find a large number of errors and warnings. Addressing all of these at once might be overwhelming, so prioritize the most critical issues first. Use ESLint’s ability to automatically fix certain problems by running:
npx eslint . --fix
For issues that require manual intervention, create a plan to address them over time. Set up regular refactoring sessions where the team focuses on cleaning up parts of the codebase.
Gradual Adoption
Introduce ESLint rules gradually to avoid overwhelming the team. Start with the most important rules, such as those that catch potential errors, and gradually add style and best practice rules. This approach makes the transition smoother and helps the team adapt to the new standards.
ESLint in a Team Environment
Collaboration and Communication
For effective collaboration, ensure that everyone on the team understands the importance of ESLint and how to use it. Hold training sessions or workshops to familiarize team members with ESLint’s capabilities and the specific rules you have implemented.
Shared Configuration
Maintain a shared ESLint configuration file in your project’s repository. This ensures that everyone on the team uses the same rules. Update the configuration file as needed and communicate any changes to the team.
Version Control Integration
Integrate ESLint with your version control system to ensure that all code checked into the repository meets your quality standards. Using pre-commit hooks, as mentioned earlier, is an effective way to enforce linting on every commit.
Advanced Customization
Creating Custom Rules
Sometimes, the built-in rules and available plugins may not cover all your needs. ESLint allows you to create custom rules to enforce specific coding practices unique to your project.
Writing Custom Rules
To create a custom rule, add a new file in your project directory and define the rule logic. Here’s a simple example that enforces a specific naming convention for variables:
module.exports = {
create: function(context) {
return {
VariableDeclarator(node) {
if (!/^myPrefix/.test(node.id.name)) {
context.report({
node,
message: "Variable names must start with 'myPrefix'."
});
}
}
};
}
};
Register this rule in your ESLint configuration:
"rules": {
"my-custom-rule": "error"
},
"overrides": [
{
"files": ["**/*.js"],
"rules": {
"my-custom-rule": "error"
}
}
]
Performance Optimization
Running ESLint on large codebases can sometimes be slow. Optimizing ESLint performance ensures that linting does not become a bottleneck in your development workflow.
Caching
Use ESLint’s caching feature to improve performance by only linting files that have changed since the last run. Enable caching by adding the --cache
option:
npx eslint . --cache
Config File Optimization
Keep your ESLint configuration file as lean as possible. Avoid using too many extends and plugins if they are not necessary. Review and remove any redundant or unused rules to streamline the linting process.
Keeping ESLint Up to Date
ESLint and its plugins are regularly updated with new features, performance improvements, and bug fixes. Keeping ESLint and related packages up to date ensures that you benefit from these improvements.
Regular Updates
Regularly check for updates and upgrade ESLint and its plugins to the latest versions. Use tools like npm-check-updates to simplify this process:
npx npm-check-updates -u
npm install
ESLint and TypeScript

Introduction to TypeScript
TypeScript is a popular superset of JavaScript that adds static typing. It helps catch errors early and provides robust tooling capabilities. Integrating ESLint with TypeScript ensures that your TypeScript code adheres to the same high-quality standards as your JavaScript code.
Setting Up ESLint with TypeScript
To get started, you need to install some additional packages:
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
Configuring ESLint for TypeScript
Create or update your .eslintrc
file to include the TypeScript parser and plugin:
{
"parser": "@typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"plugins": [
"@typescript-eslint"
],
"rules": {
"@typescript-eslint/no-unused-vars": ["error"],
"@typescript-eslint/explicit-function-return-type": ["warn"]
}
}
This configuration sets up ESLint to parse TypeScript code and apply TypeScript-specific linting rules.
Advanced TypeScript Rules
For more advanced TypeScript projects, you may want to enable stricter rules to enforce type safety and coding conventions. For example, the @typescript-eslint/strict-boolean-expressions
rule ensures that only boolean values are used in conditional expressions:
"rules": {
"@typescript-eslint/strict-boolean-expressions": "error"
}
Using ESLint with TypeScript helps maintain code quality by enforcing consistent practices and catching potential errors before they become issues.
ESLint in Monorepos

Understanding Monorepos
A monorepo is a single repository that contains multiple projects, which might share common dependencies or configurations. Managing ESLint in a monorepo can be challenging due to the complexity and size of the codebase.
Setting Up ESLint in a Monorepo
In a monorepo, you should have a root ESLint configuration that applies to all projects, as well as specific configurations for each project. Start by creating a root .eslintrc
file:
{
"root": true,
"extends": ["eslint:recommended"],
"parserOptions": {
"ecmaVersion": 2021,
"sourceType": "module"
},
"env": {
"node": true
},
"rules": {
"no-console": "warn"
}
}
Then, create project-specific ESLint configurations that extend the root configuration:
{
"extends": ["../../.eslintrc"],
"env": {
"browser": true
},
"rules": {
"no-alert": "error"
}
}
Managing Dependencies
In a monorepo, it’s important to manage ESLint dependencies efficiently. Use tools like Yarn Workspaces or Lerna to manage dependencies across multiple projects. This ensures that all projects use the same version of ESLint and its plugins, avoiding version conflicts.
Running ESLint in a Monorepo
To run ESLint in a monorepo, you can use scripts to target specific projects or run ESLint across the entire repository. In your package.json
, you can add scripts like:
"scripts": {
"lint": "lerna run lint --stream"
}
This command will run the lint
script in each project managed by Lerna, providing a streamlined workflow for maintaining code quality across the entire monorepo.
ESLint for Different Environments
Node.js
When working with Node.js, ESLint can be configured to handle server-side code effectively. Set up your .eslintrc
to include Node.js globals and best practices:
{
"env": {
"node": true,
"es2021": true
},
"extends": "eslint:recommended",
"rules": {
"callback-return": "error",
"global-require": "warn"
}
}
This configuration ensures that ESLint understands Node.js-specific code patterns and enforces practices suitable for server-side development.
Browser
For client-side JavaScript running in the browser, ESLint should be configured to recognize browser globals and enforce security best practices:
{
"env": {
"browser": true,
"es2021": true
},
"extends": "eslint:recommended",
"rules": {
"no-alert": "warn",
"no-eval": "error"
}
}
This setup helps prevent the use of insecure practices like eval
and alerts you to potential issues that could affect browser performance or security.
React
When developing with React, ESLint helps maintain clean, efficient, and error-free code. Install the necessary plugins and extend the recommended configurations:
npm install eslint-plugin-react eslint-plugin-react-hooks --save-dev
Update your .eslintrc
file:
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended"
],
"plugins": ["react", "react-hooks"],
"rules": {
"react/prop-types": "off",
"react/react-in-jsx-scope": "off"
},
"settings": {
"react": {
"version": "detect"
}
}
}
This configuration ensures that ESLint can lint JSX syntax, enforce React-specific best practices, and catch common mistakes in React components.
Utilizing ESLint in CI/CD Pipelines
Continuous Integration
Integrating ESLint into your CI/CD pipeline ensures that code quality checks are automated and consistent. This helps catch issues early in the development process, reducing the likelihood of bugs and maintaining high standards across the codebase.
Example with GitHub Actions
Add a workflow file .github/workflows/lint.yml
to your repository:
name: Lint
on: [push, pull_request]
jobs:
eslint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
- run: npm install
- run: npx eslint . --ext .js,.jsx,.ts,.tsx
This setup runs ESLint on every push and pull request, ensuring that all code meets your quality standards before it is merged.
Continuous Deployment
Incorporate ESLint checks into your deployment pipeline to prevent deploying code with linting issues. This ensures that your production environment remains stable and free of common errors.
Example with Jenkins
In your Jenkins pipeline configuration, add a stage for linting:
pipeline {
agent any
stages {
stage('Lint') {
steps {
script {
sh 'npm install'
sh 'npx eslint . --ext .js,.jsx,.ts,.tsx'
}
}
}
// Other stages such as build, test, deploy
}
}
By integrating ESLint into your deployment pipeline, you ensure that only high-quality code reaches your production environment.
Encouraging Best Practices
ESLint not only helps catch errors but also promotes best practices in JavaScript development. By integrating ESLint into your CI/CD pipeline, you create a culture of quality and consistency within your development team.
Conclusion
Using ESLint for JavaScript code quality is an essential practice for modern development teams. By setting up ESLint, customizing rules, integrating it into your development workflow, and continually optimizing its use, you can ensure that your codebase remains clean, maintainable, and free of common errors. Regular updates and team collaboration further enhance the effectiveness of ESLint, making it an indispensable tool for maintaining high standards in your projects. With these strategies and practices, your business can achieve consistent code quality, leading to better performance, fewer bugs, and a more efficient development process.
Read Next: