A Comprehensive Guide to ESLint: History, Usage, and Project Integration

This article is part of a front‑end knowledge series aimed at giving non‑front‑end developers a systematic overview of web front‑end basics. Chapter five focuses on the essential front‑end engineering tool ESLint, covering its history, usage, and how to build a robust code‑quality “defensive moat” around a repository.

What is ESLint? According to its official site, ESLint “Finds and fixes problems in your JavaScript code”. It was created by Nicholas C. Zakas in June 2013 as a pluggable JavaScript linting tool.

Evolution of lint tools – From the original C‑language lint (1979) to JSLint (2002), JSHint (2011), and finally ESLint (2013). The article explains why each new tool emerged and how ESLint’s AST‑based architecture enables high extensibility.

Installing ESLint

First, create a demo project and initialize npm:

// New demo project directory
npm init
// Install ESLint as a dev dependency
npm i -D eslint
// Initialize ESLint configuration (project‑local)
./node_modules/.bin/eslint --init

During initialization you can choose the “standard” style preset, which installs packages such as eslint-config-standard , eslint-plugin-import , eslint-plugin-node , eslint-plugin-promise , and eslint-plugin-standard .

Generated .eslintrc.js (example)

module.exports = {
  env: {
    es2020: true,
    node: true
  },
  extends: ['standard'],
  parserOptions: {
    ecmaVersion: 11,
    sourceType: 'module'
  },
  rules: {}
};

Running ESLint – Add a script to package.json :

{
  "scripts": {
    "eslint": "eslint src/**"
  }
}

Running npm run eslint will report errors such as “use const instead of let” and undefined variables. To auto‑fix fixable issues, use the --fix flag:

{
  "scripts": {
    "eslint": "eslint src/** --fix"
  }
}

After fixing, src/index.js changes from:

// src/index.js
let a = 10;
let b = 15;
let sum = a + d;
console.log(sum);

to:

// src/index.js
const a = 10;
const b = 15;
const sum = a + d;
console.log(sum);

Advanced configuration

Environment globals (e.g., /* global $ */ or { "globals": { "$": "readonly" } } ).

Extends: official ESLint configs, shared configs (e.g., eslint-config-standard ), and plugin configs.

Plugins: needed for frameworks like Vue ( eslint-plugin-vue ) or TypeScript ( @babel/eslint-parser ).

Editor integration – Install the VS Code ESLint extension to get real‑time linting. Adjust the extension settings to include .vue files.

Automating lint checks with Git hooks

Use husky to run ESLint before commits:

npm i -D husky
// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "eslint src/** --fix"
    }
  }
}

For large legacy projects, combine husky with lint‑staged to lint only staged files:

npm i -D lint-staged
// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": ["eslint --fix", "git add"]
  }
}

Standardizing commit messages

Install commitizen , cz-conventional-changelog , and standard-version to enforce conventional commits:

npm i -D commitizen cz-conventional-changelog standard-version
// package.json (excerpt)
{
  "scripts": {
    "c": "git-cz",
    "version": "standard-version"
  },
  "config": {
    "commitizen": { "path": "cz-conventional-changelog" }
  }
}

Use husky with commitlint to reject non‑conforming commit messages:

npm install --save-dev @commitlint/{config-conventional,cli}
// commitlint.config.js
module.exports = { extends: ['@commitlint/config-conventional'] };
// package.json (excerpt)
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}

By combining ESLint, editor plugins, Git hooks, and commit standards, developers can maintain a clean, consistent codebase and prevent low‑quality code from entering the repository.