Skip to main content

ESLint

ESLint 是一个用于识别和报告 JavaScript/TypeScript 代码中发现的模式的工具，目标是使代码更加一致并避免错误。

安装​

npm install eslint --save-dev

配置文件​

在项目根目录创建 .eslintrc.js 文件：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    // 自定义规则
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

常用规则​

  • no-console: 禁止使用 console
  • no-debugger: 禁止使用 debugger
  • semi: 强制使用分号
  • quotes: 强制使用单引号或双引号
  • indent: 强制使用一致的缩进

与 Prettier 集成​

为了避免 ESLint 和 Prettier 的规则冲突，可以使用以下配置：

npm install --save-dev eslint-config-prettier

然后在 .eslintrc.js 中添加：

{
  "extends": [
    // 其他扩展...
    "prettier" // 必须放在最后
  ]
}

VS Code 集成​

  1. 安装 ESLint 插件
  2. 在 settings.json 中添加：
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}