如何配置Angular项目在lint校验时始终输出错误而非警告

你没有遗漏官方公开的配置入口。Angular CLI 从设计层面对内置的 Webpack 构建配置做了封装，确实没有直接暴露 eslint-loader / 新版 eslint-webpack-plugin 的 emitError 配置项，无法通过原生 Angular 配置直接修改该参数。

方案1：通过自定义Webpack配置直接修改参数 #

如果必须要使用emitError配置项，可以通过自定义构建器扩展Angular的Webpack配置，步骤如下：

• 安装和本地Angular版本匹配的自定义构建依赖：执行命令 npm i -D @angular-builders/custom-webpack
• 修改项目根目录下的angular.json文件，将原有构建、本地启动服务对应的builder替换为自定义构建器：
  • 构建任务将@angular-devkit/build-angular:browser替换为@angular-builders/custom-webpack:browser
  • 本地启动任务将@angular-devkit/build-angular:dev-server替换为@angular-builders/custom-webpack:dev-server
  • 在对应构建任务的配置项中新增customWebpackConfig字段，指向你自定义的Webpack配置文件路径，比如"customWebpackConfig": {"path": "./webpack.extra.config.js"}
• 编写自定义Webpack配置文件，注意新版Angular ESLint已经弃用eslint-loader，改用eslint-webpack-plugin实现，配置示例：

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  plugins: [
    new ESLintPlugin({
      emitError: true, // 开启需要的emitError配置
      extensions: ['ts', 'html'],
      exclude: ['node_modules']
    })
  ]
}

如果你使用的是老版本Angular，仍在使用eslint-loader，可以在配置的module.rules中匹配.ts、.html文件的eslint-loader规则，在options中添加emitError: true即可。

方案2：无额外依赖的替代实现 #

如果不想引入自定义构建依赖，可以直接通过ESLint规则级别+Angular Lint构建参数实现同等效果：

• 在项目的ESLint配置文件（.eslintrc.json等）中，把需要阻断构建的规则级别设置为"error"，提示类规则设置为"warn"
• 在angular.json的lint任务配置中添加参数"max-warnings": 0，执行lint或者生产构建时，只要存在任意ESLint错误、警告就会直接阻断流程，和开启emitError: true的效果完全一致，且不需要修改底层构建配置，侵入性更低。

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