寻求适配特定需求的Vue项目ESLint预设方案

1. 安装必要依赖 #

在项目根目录执行以下命令，安装ESLint及Vue专属插件，同时整合你之前用的Prettier避免规则冲突：

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

2. 创建/修改ESLint配置文件 #

在项目根目录新建或修改.eslintrc.js文件，填入以下配置，每项规则对应你的需求：

module.exports = {
  // 指定运行环境，让ESLint识别Vue组件中的全局变量
  env: {
    browser: true,
    es2021: true,
    node: true,
    'vue/setup-compiler-macros': true
  },
  // 继承官方推荐规则 + Prettier整合规则
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended', // Vue2项目替换为'plugin:vue/vue2-recommended'
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  // 核心规则配置
  rules: {
    // 需求1：自动为script中data/props属性添加this.前缀
    'vue/require-this-in-methods': 'error', // 强制methods中用this访问组件属性，支持自动修复
    'no-undef': 'error', // 识别未加this的组件属性为未定义，自动补全this.
    // 需求2：自动补全多行对象/数组末尾的逗号
    'comma-dangle': ['error', 'always-multiline'],
    // 需求3：使用TAB缩进替代空格
    'indent': ['error', 'tab'], // JS代码缩进规则
    'vue/html-indent': ['error', 'tab'], // Vue模板HTML缩进规则
    // 同步Prettier使用TAB缩进
    'prettier/prettier': ['error', { useTabs: true }]
  }
}

3. 配置一键修复脚本 #

在package.json的scripts字段中添加以下命令，方便批量修复代码：

"scripts": {
  // ... 保留原有脚本
  "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix"
}

关键规则说明 #

• this.自动补全：vue/require-this-in-methods强制methods中必须用this.访问组件属性，no-undef会把未加this.的data/props属性判定为未定义变量，ESLint自动修复时会补上this.。
• 逗号补全：comma-dangle仅对多行对象/数组生效，单行对象不会强制加逗号，兼顾代码整洁性。
• TAB缩进：同时配置了JS代码和Vue模板的缩进规则，同步Prettier设置避免两者冲突。

注意事项 #

• 若项目是Vue2版本，需调整extends中的Vue规则集。
• 若公司已有ESLint配置，直接将上述规则合并到已有文件即可，无需完全替换。
• 运行npm run lint即可自动修复所有符合规则的代码问题。

内容的提问来源于stack exchange，提问作者user13698713