ESLint笔记

ESLint 是一个开源的 JavaScript/TypeScript 静态代码分析工具，用于检测代码中的潜在问题和统一代码风格。

ESLint 的核心功能：

错误检查，识别语法错误、未定义变量、无效引用等。

代码风格强制，统一缩进、引号、分号等（可配置 Airbnb、Google 等流行规范），强制使用单引号、箭头函数替代 function。

场景	开发阶段	项目协作阶段
核心目标	实时纠错，提升编码效率	统一团队规范，保障代码质量
使用方式	IDE 实时提示 + 手动运行检查	CI/CD 集成 + Git 提交卡控
典型问题覆盖	语法错误、风格偏差	安全漏洞、性能隐患、规范一致性

 开发环境配置

npm install eslint --save-dev  # 安装 ESLint
npx eslint --init             # 初始化配置文件（选择规范）

 VSCode 插件配置（配置 VSCode 设置settings.json）

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true  // 保存时自动修复
  },
  "eslint.validate": ["javascript", "typescript", "vue"]
}
 

配置文件示例（.eslintrc.js）

module.exports = {
  env: { browser: true, es2021: true },
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  parser: "@typescript-eslint/parser",
  rules: {
    "no-console": "warn",          // 禁止 console
    "quotes": ["error", "single"], // 强制单引号
    "semi": ["error", "always"]    // 强制分号
  }
};
 

 提交卡控（使用 husky + lint-staged）

{
  "scripts": {
    "lint": "eslint . --ext .js,.ts"
  },
  "lint-staged": {
    "*.{js,ts}": ["eslint --fix"]  // 仅检查暂存区文件
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"  // 提交前触发
    }
  }
}