如何配置ESLint仅输出校验提示 不阻断Vue项目编译流程

1. 调整构建工具的ESLint校验逻辑 #

Vue项目默认会将ESLint的error级问题判定为编译错误，直接阻断构建，首先修改该配置：

• 若使用Vue CLI，修改vue.config.js：

module.exports = {
  // 开发环境下ESLint报错仅输出警告，不阻断编译
  lintOnSave: process.env.NODE_ENV === 'production' ? 'error' : 'warning',
  // 保留原有其他配置
}

• 若使用Vite，修改vite.config.js中ESLint插件的配置：

import eslintPlugin from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
    eslintPlugin({
      // 开发环境下不把ESLint错误作为编译错误抛出
      failOnError: process.env.NODE_ENV === 'production',
      failOnWarning: false,
    }),
    // 保留原有其他插件
  ]
})

2. 调整ESLint规则等级 #

将风格类规则从error降为warn，开发阶段仅输出提示，不触发错误。修改你的.eslintrc.js的rules字段：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'camelcase': 'off',
    // 风格类规则统一降为警告，开发阶段不阻断
    'semi': 'warn',
    'keyword-spacing': 'warn',
    'quotes': 'warn',
    'prefer-const': 'warn',
    // 其他需要调整的风格规则均可按该格式修改
  }
}

配置完成后，开发阶段运行代码，行尾加分号、if后无空格这类问题只会在控制台输出警告，不会阻断编译，可正常调试运行。

3. 配置代码提交前的强制校验 #

若需要保证提交到仓库的代码符合规范，可通过husky+lint-staged配置pre-commit钩子，提交代码时强制校验，不通过不允许提交：

安装依赖 #

npm install husky lint-staged -D

启用husky钩子 #

npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

项目根目录新增.lintstagedrc配置文件 #

{
  "*.{js,ts,vue}": [
    "eslint --max-warnings 0"
  ]
}

其中--max-warnings 0参数会将所有ESLint警告视为错误，提交时只要存在不符合规范的代码，就会直接终止提交，保证仓库代码符合统一规范。

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