Integrations

ESLint integrates with many development tools and workflows. This page covers the most popular integrations maintained by the community.

The projects on this page are community-maintained and not officially supported by the ESLint team. For issues with specific integrations, please contact the integration maintainers.

Editor Integrations

Visual Studio Code

ESLint Extension

Official ESLint extension for VS Code with real-time feedback

Install Extension

Search for “ESLint” in VS Code Extensions marketplace

code --install-extension dbaeumer.vscode-eslint

Configure Settings

Add to your VS Code settings:

settings.json

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true
}

Verify

Open a JavaScript file with linting errors and see inline feedback

Features:

Real-time linting as you type
Auto-fix on save
Quick fixes for violations
Rule documentation on hover
Flat config support (eslint.config.js)

JetBrains IDEs

WebStorm, IntelliJ IDEA, PyCharm, RubyMine

Built-in ESLint support in JetBrains IDEs

Enable ESLint

Go to: Settings → Languages & Frameworks → JavaScript → Code Quality Tools → ESLintCheck “Automatic ESLint configuration”

Configure

Select Node.js interpreter
Choose ESLint package location
Enable “Run eslint —fix on save”

Features:

Automatic detection of eslint.config.js
Inline error highlighting
Auto-fix on save
Code completion for config files
Integration with VCS

Sublime Text

SublimeLinter-eslint

SublimeLinter-eslint provides ESLint integration for Sublime Text 3/4.Installation:

# Install SublimeLinter first
# Then install SublimeLinter-eslint via Package Control

Features:

Inline error markers
Status bar information
Configurable highlighting
Auto-fix support

Build Next

Build Next runs ESLint as a build system.Usage:

Tools → Build System → ESLint
Ctrl/Cmd + B to lint

Vim/Neovim

ALE
Syntastic
nvim-lspconfig
nvim-lint

ALE (Asynchronous Lint Engine)

.vimrc

" Enable ESLint
let g:ale_linters = {
\   'javascript': ['eslint'],
\   'typescript': ['eslint'],
\}

" Auto-fix on save
let g:ale_fixers = {
\   'javascript': ['eslint'],
\   'typescript': ['eslint'],
\}
let g:ale_fix_on_save = 1

Features:

Asynchronous linting
Auto-fix support
Multiple linters
LSP integration

Syntastic

.vimrc

" Enable ESLint checker
let g:syntastic_javascript_checkers = ['eslint']
let g:syntastic_typescript_checkers = ['eslint']

" Auto-fix
let g:syntastic_javascript_eslint_args = '--fix'

Classic syntax checking plugin with ESLint support.

nvim-lspconfig

init.lua

require('lspconfig').eslint.setup({
  on_attach = function(client, bufnr)
    vim.api.nvim_create_autocmd("BufWritePre", {
      buffer = bufnr,
      command = "EslintFixAll",
    })
  end,
})

LSP integration for Neovim.

nvim-lint

init.lua

require('lint').linters_by_ft = {
  javascript = {'eslint'},
  typescript = {'eslint'},
}

vim.api.nvim_create_autocmd({ "BufWritePost" }, {
  callback = function()
    require("lint").try_lint()
  end,
})

Emacs

Flycheck

On-the-fly syntax checking for Emacs

Configuration:

.emacs

;; Enable Flycheck
(add-hook 'after-init-hook #'global-flycheck-mode)

;; Use ESLint for JavaScript
(setq-default flycheck-disabled-checkers
  (append flycheck-disabled-checkers
    '(javascript-jshint)))

;; Use eslint with web-mode
(flycheck-add-mode 'javascript-eslint 'web-mode)

The javascript-eslint checker is built into Flycheck.

Other Editors

Eclipse Orion

ESLint is the default linter

Eclipse IDE

Tern ESLint linter

TextMate 2

eslint.tmbundle or javascript-eslint.tmbundle

Brackets

Brackets ESLint

Visual Studio

Linting JavaScript in VS

Build Tool Integrations

Webpack

eslint-webpack-plugin

ESLint plugin for Webpack

Install

npm install --save-dev eslint-webpack-plugin

Configure

webpack.config.js

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new ESLintPlugin({
      extensions: ['js', 'jsx', 'ts', 'tsx'],
      fix: true,  // Auto-fix during build
      failOnError: true,  // Fail build on errors
      failOnWarning: false,
      cache: true,
      cacheLocation: '.eslintcache'
    })
  ]
};

Options:

extensions - File extensions to lint
fix - Enable auto-fixing
failOnError - Fail build on errors
failOnWarning - Fail build on warnings
cache - Enable caching for performance
exclude - Patterns to exclude
formatter - Output formatter

Rollup

@rollup/plugin-eslint

ESLint plugin for Rollup

Install

npm install --save-dev @rollup/plugin-eslint

Configure

rollup.config.js

import eslint from '@rollup/plugin-eslint';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    eslint({
      fix: true,
      throwOnError: true,
      throwOnWarning: false,
      include: ['src/**/*.js'],
      exclude: ['node_modules/**']
    })
  ]
};

Grunt

grunt-eslint

ESLint task for Grunt

Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    eslint: {
      target: ['src/**/*.js'],
      options: {
        fix: true,
        outputFile: 'reports/eslint.html',
        format: 'html'
      }
    }
  });

  grunt.loadNpmTasks('grunt-eslint');
  grunt.registerTask('default', ['eslint']);
};

Command Line Tools

ESLint Watch

eslint-watchWatch files and run ESLint on changes:

npm install --save-dev eslint-watch

Usage:

# Watch current directory
npx esw .

# Watch specific directories
npx esw src/ lib/

# With auto-fix
npx esw --fix src/

# Custom format
npx esw --format compact src/

Features:

File watching
Auto-fix on save
Custom formatters
Ignore patterns
Debouncing

Code Climate CLI

Code Climate CLIRun Code Climate analysis locally:

# Install
brew tap codeclimate/formulae
brew install codeclimate

# Run ESLint via Code Climate
codeclimate analyze

Integrates ESLint with Code Climate quality analysis.

ESLint Nibble

ESLint NibbleGradually improve code quality:

npm install --save-dev eslint-nibble

Usage:

# Show rules with most violations
npx eslint-nibble src/

# Fix specific rule
npx eslint-nibble --rule no-console src/

Great for tackling large codebases incrementally.

Source Control Integration

Git Hooks

Husky + lint-staged
Git Pre-commit Hook
Overcommit

Recommended approach

Install

npm install --save-dev husky lint-staged
npx husky init

Configure lint-staged

package.json

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "git add"
    ]
  }
}

Add pre-commit hook

.husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

Benefits:

Only lints staged files
Fast execution
Auto-fix before commit
Easy configuration

Manual hook setup

.git/hooks/pre-commit

#!/bin/bash

# Get list of staged JS files
FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\\.jsx?$')

if [ -z "$FILES" ]; then
  exit 0
fi

# Run ESLint on staged files
npx eslint $FILES

if [ $? -ne 0 ]; then
  echo "ESLint failed. Commit aborted."
  exit 1
fi

Make executable:

chmod +x .git/hooks/pre-commit

OvercommitGit hook manager with ESLint support:

.overcommit.yml

PreCommit:
  EsLint:
    enabled: true
    required_executable: 'npx'
    flags: ['--format=compact']
    include:
      - '**/*.js'
      - '**/*.jsx'

CI/CD Integration

GitHub Actions
GitLab CI
CircleCI
Jenkins

.github/workflows/lint.yml

name: ESLint

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  lint:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run ESLint
        run: npm run lint
      
      - name: Generate report
        if: failure()
        run: npx eslint --format json --output-file eslint-report.json src/
      
      - name: Upload report
        if: failure()
        uses: actions/upload-artifact@v3
        with:
          name: eslint-report
          path: eslint-report.json

.gitlab-ci.yml

lint:
  stage: test
  image: node:20
  
  cache:
    paths:
      - node_modules/
      - .eslintcache
  
  script:
    - npm ci
    - npx eslint --format json --output-file gl-code-quality-report.json src/
  
  artifacts:
    reports:
      codequality: gl-code-quality-report.json
    paths:
      - gl-code-quality-report.json
    when: always
    expire_in: 1 week

.circleci/config.yml

version: 2.1

jobs:
  lint:
    docker:
      - image: cimg/node:20.0
    steps:
      - checkout
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package-lock.json" }}
      - run:
          name: Install dependencies
          command: npm ci
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package-lock.json" }}
      - run:
          name: Run ESLint
          command: |
            mkdir -p reports
            npx eslint --format json --output-file reports/eslint.json src/
      - store_artifacts:
          path: reports
      - store_test_results:
          path: reports

workflows:
  version: 2
  test:
    jobs:
      - lint

Jenkinsfile

pipeline {
  agent {
    docker {
      image 'node:20'
    }
  }
  
  stages {
    stage('Install') {
      steps {
        sh 'npm ci'
      }
    }
    
    stage('Lint') {
      steps {
        sh 'npx eslint --format json --output-file eslint-report.json src/'
      }
      post {
        always {
          archiveArtifacts artifacts: 'eslint-report.json'
        }
      }
    }
  }
}

Mega-Linter

Linters aggregator for CI, embedding ESLint

.mega-linter.yml

APPLY_FIXES: all
JAVASCRIPT_ES_CONFIG_FILE: eslint.config.js
JAVASCRIPT_ES_FILTER_REGEX_INCLUDE: (src/)
SHOW_ELAPSED_TIME: true

ENABLE:
  - JAVASCRIPT

Features:

70+ linters in one tool
Auto-fix support
Pre-configured for CI
Multi-language support
Report aggregation

Package Scripts

Common ESLint scripts in package.json:

package.json

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "lint:cache": "eslint --cache .",
    "lint:report": "eslint --format html . > reports/eslint-report.html",
    "lint:ci": "eslint --format json --output-file reports/eslint.json .",
    "lint:watch": "esw --watch --clear .",
    "prelint": "echo 'Running ESLint...'",
    "postlint": "echo 'Linting complete!'",
    
    "precommit": "lint-staged",
    "prepush": "npm run lint"
  }
}

Integration Best Practices

Editor Integration

Best practices for editor setup:

Use auto-fix on save

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

Configure proper file associations

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
]

Enable flat config support
"eslint.useFlatConfig": true
Show rule IDs in errors
- Helps when configuring rules
- Makes it easy to disable specific rules

Build Tools

Best practices for build integration:

Cache results

new ESLintPlugin({
  cache: true,
  cacheLocation: '.eslintcache'
})

Fail builds appropriately
- Fail on errors: Production
- Warn on errors: Development
Run before other plugins
- Catch errors early
- Avoid processing invalid code
Use separate CI linting
- Don’t slow down dev builds
- Run full lint in CI/CD

Git Hooks

Best practices for git hooks:

Only lint staged files

"lint-staged": {
  "*.{js,jsx}": ["eslint --fix"]
}

Auto-fix when possible
- Reduces friction
- Keeps commits clean
Provide escape hatch
git commit --no-verify
Make hooks fast
- Use caching
- Lint only changed files

CI/CD

Best practices for CI/CD:

Fail fast
- run: npm run lint if: always()

Cache node_modules and .eslintcache

cache:
  paths:
    - node_modules/
    - .eslintcache

Generate reports

npx eslint --format json --output-file report.json src/

Set max warnings
npx eslint --max-warnings 0 src/

Additional Resources

awesome-eslint

Curated list of ESLint integrations and plugins

Command Line

Learn about CLI options for integrations

Formatters

Choose the right formatter for your integration

Configuration

Configure ESLint for your project

Contributing an Integration

If you’ve created an ESLint integration and would like it to be listed here:

Ensure it works with the latest ESLint version
Provide clear documentation
Submit a pull request to the ESLint repository

Core Concepts

Understanding ESLint fundamentals

Configuration

Configure ESLint for your workflow

Command Line

CLI options and usage

Formatters

Output format options

​Integrations

​Editor Integrations

​Visual Studio Code

ESLint Extension

​JetBrains IDEs

WebStorm, IntelliJ IDEA, PyCharm, RubyMine

​Sublime Text

​Vim/Neovim

​Emacs

Flycheck

​Other Editors

Eclipse Orion

Eclipse IDE

TextMate 2

Brackets

Visual Studio

​Build Tool Integrations

​Webpack

eslint-webpack-plugin

​Rollup

@rollup/plugin-eslint

​Grunt

grunt-eslint

​Command Line Tools

​Source Control Integration

​Git Hooks

​CI/CD Integration

​Mega-Linter

Mega-Linter

​Package Scripts

​Integration Best Practices

​Additional Resources

awesome-eslint

Command Line

Formatters

Configuration

​Contributing an Integration

​Related Resources

Core Concepts

Configuration

Command Line

Formatters

Integrations

Editor Integrations

Visual Studio Code

JetBrains IDEs

Sublime Text

Vim/Neovim

Emacs

Other Editors

Build Tool Integrations

Webpack

Rollup

Grunt

Command Line Tools

Source Control Integration

Git Hooks

CI/CD Integration

Mega-Linter

Package Scripts

Integration Best Practices

Additional Resources

Contributing an Integration

Related Resources