ESLint 配置示例（TypeScript + Vue & JS + Vue）

以下是针对 TypeScript + Vue 和 JavaScript + Vue 项目的 ESLint 配置示例，包含详细注释和最佳实践：

TypeScript + Vue 配置

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  parser: 'vue-eslint-parser', // Vue 解析器
  parserOptions: {
    parser: '@typescript-eslint/parser', // TypeScript 解析器
    ecmaVersion: 2021,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended', // TypeScript 推荐规则
    'plugin:vue/vue3-recommended', // Vue 3 推荐规则
    'prettier', // 关闭与 Prettier 冲突的规则
    'prettier/@typescript-eslint', // 关闭 TypeScript 相关冲突规则
    'prettier/vue' // 关闭 Vue 相关冲突规则
  ],
  plugins: ['@typescript-eslint', 'vue'], // 注册插件
  rules: {
    // 基础规则
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    
    // TypeScript 规则
    '@typescript-eslint/no-explicit-any': 'warn', // 警告使用 any
    '@typescript-eslint/no-non-null-assertion': 'off', // 关闭非空断言检查
    '@typescript-eslint/explicit-module-boundary-types': 'off', // 关闭导出类型显式声明
    
    // Vue 规则
    'vue/multi-word-component-names': 'off', // 关闭组件名必须多单词的规则
    'vue/no-mutating-props': 'error', // 禁止修改 props
    'vue/no-unused-components': 'error', // 禁止未使用的组件
    'vue/no-unused-vars': 'error', // 禁止未使用的变量
    'vue/script-setup-uses-vars': 'error', // 确保 script setup 中的变量被使用
    'vue/html-self-closing': ['error', { // 自闭合标签规则
      html: {
        void: 'always',
        normal: 'never',
        component: 'always'
      }
    }]
  },
  settings: {
    'import/resolver': {
      typescript: {}, // 支持 TypeScript 模块解析
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
      }
    }
  }
};

JavaScript + Vue 配置

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  parser: 'vue-eslint-parser', // Vue 解析器
  parserOptions: {
    parser: 'espree', // JavaScript 解析器
    ecmaVersion: 2021,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended', // Vue 3 推荐规则
    'prettier', // 关闭与 Prettier 冲突的规则
    'prettier/vue' // 关闭 Vue 相关冲突规则
  ],
  plugins: ['vue'], // 注册插件
  rules: {
    // 基础规则
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-var': 'error', // 禁止使用 var
    'prefer-const': 'error', // 优先使用 const
    'eqeqeq': 'error', // 强制使用 ===
    'no-unused-vars': 'error', // 禁止未使用的变量
    
    // Vue 规则
    'vue/multi-word-component-names': 'off', // 关闭组件名必须多单词的规则
    'vue/no-mutating-props': 'error', // 禁止修改 props
    'vue/no-unused-components': 'error', // 禁止未使用的组件
    'vue/no-unused-vars': 'error', // 禁止未使用的变量
    'vue/html-self-closing': ['error', { // 自闭合标签规则
      html: {
        void: 'always',
        normal: 'never',
        component: 'always'
      }
    }],
    'vue/attribute-hyphenation': ['error', 'always'], // 属性名强制使用连字符
    'vue/custom-event-name-casing': ['error', 'kebab-case'] // 自定义事件名强制使用连字符
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.vue']
      }
    }
  }
};

安装依赖

TypeScript + Vue 依赖

npm install --save-dev \
  eslint \
  eslint-plugin-vue \
  @typescript-eslint/parser \
  @typescript-eslint/eslint-plugin \
  eslint-config-prettier \
  eslint-plugin-prettier \
  prettier

JavaScript + Vue 依赖

npm install --save-dev \
  eslint \
  eslint-plugin-vue \
  eslint-config-prettier \
  eslint-plugin-prettier \
  prettier

使用方法

添加 npm 脚本

// package.json
{
  "scripts": {
    "lint": "eslint src --ext .js,.jsx,.vue,.ts,.tsx",
    "lint:fix": "eslint src --ext .js,.jsx,.vue,.ts,.tsx --fix"
  }
}

WebStorm 配置

• 打开 Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
• 选择 Automatic ESLint configuration
• 启用 Run eslint --fix on save

忽略文件

创建 .eslintignore 文件：

node_modules/
dist/
public/
*.local

注意事项

Vue 版本差异：

• Vue 2 项目使用 plugin:vue/recommended 而非 plugin:vue/vue3-recommended
• Vue 3 <script setup> 语法需添加 vue/script-setup-uses-vars 规则

Prettier 冲突：

• 确保 eslint-config-prettier 在 extends 数组中最后加载，避免规则冲突。

TypeScript 支持：

TypeScript 项目需安装 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin，并配置 parserOptions.project 指向 tsconfig.json。

自定义规则：

根据团队习惯调整规则，例如：

rules: {
  'vue/html-indent': ['error', 2], // HTML 缩进为 2 空格
  'vue/max-attributes-per-line': [ // 每行最大属性数
    'error',
    {
      singleline: 3,
      multiline: {
        max: 1,
        allowFirstLine: false
      }
    }
  ]
}

根据项目需求调整规则，建议在新项目中使用 npx eslint --init 初始化，然后手动合并上述配置。