Vue项目配置ESLint：将未使用变量错误改为警告

不用纠结隐藏的webpack配置，Vue CLI已经给我们提供了更简单的方式来调整ESLint的行为，下面是几个实用的方案：

方案1：直接修改package.json中的ESLint规则 #

这是最直接的方法，你只需要在eslintConfig.rules里明确指定no-unused-vars的级别为警告。修改后的eslintConfig应该是这样的：

"eslintConfig": {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  "rules": {
    "no-unused-vars": "warn" // 把未使用变量的规则设为警告
  },
  "parserOptions": {
    "parser": "babel-eslint"
  }
}

保存后重启开发服务，你会发现未使用的Segment导入现在只会显示警告，不会阻断编译了。

方案2：通过Vue CLI配置控制开发时的校验行为 #

如果你希望在开发模式下所有ESLint提示都只作为警告（不影响开发流程），而生产构建时严格校验，可以在项目根目录新建vue.config.js文件，添加以下配置：

module.exports = {
  lintOnSave: 'warning' // 开发时ESLint警告不阻断编译，错误仍会阻断
}

这个配置的好处是不用逐个修改规则，统一把开发时的ESLint校验结果降级为警告，同时保留生产环境的严格校验（避免把未修复的错误带到线上）。

方案3：分环境精细化配置（进阶） #

如果需要更灵活的控制，比如开发环境宽松、生产环境严格，可以改用.eslintrc.js配置文件（代替package.json里的eslintConfig），结合环境变量来切换规则：

首先，删除package.json中的eslintConfig，新建.eslintrc.js：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    // 基础规则
  },
  overrides: [
    {
      files: ["*.js", "*.vue"],
      env: {
        development: true
      },
      rules: {
        "no-unused-vars": "warn",
        // 其他开发环境需要放宽的规则
      }
    },
    {
      files: ["*.js", "*.vue"],
      env: {
        production: true
      },
      rules: {
        "no-unused-vars": "error",
        // 生产环境严格的规则
      }
    }
  ]
}

然后在package.json的scripts里添加环境变量：

"scripts": {
  "serve": "cross-env NODE_ENV=development vue-cli-service serve",
  "build": "cross-env NODE_ENV=production vue-cli-service build"
}

记得先安装cross-env依赖：npm install cross-env --save-dev，这样就能在不同环境下自动应用对应的ESLint规则了。

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