Angular项目中eslint的ignoreUrls、ignoreStrings配置不生效如何解决？

问题根源 #

你配置的是原生ESLint的max-len规则，但Angular HTML模板的行长度校验由@angular-eslint提供的专项规则@angular-eslint/template/max-len负责，原生规则对Angular模板文件不生效。

解决方案 #

将你.eslintrc.json中对应HTML文件的规则配置替换为专项规则即可，修改后的完整配置如下：

{
  "files": ["*.html"],
  "extends": ["plugin:@angular-eslint/template/recommended", "prettier"],
  "rules": {
    "@angular-eslint/template/max-len": [
      "warn",
      {
        "code": 120,
        "ignoreTemplateLiterals": true,
        "ignoreStrings": true,
        "ignoreUrls": true,
        "ignorePattern": "<path([/s/S]*?)/>"
      }
    ]
  }
}

额外注意事项 #

• 请确认Prettier配置中的printWidth参数和此处的code值保持一致，避免两个工具的规则冲突
• 配置修改后需要重启ESLint服务使配置生效，VSCode中可通过快捷键Ctrl+Shift+P唤出命令面板，执行ESLint: Restart ESLint Server即可

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