Angular 11如何配置@angular-eslint/component-selector规则适配指定选择器

配置方法 #

直接修改项目根目录下的.eslintrc.json（或.eslintrc.js）配置文件，在rules节点下添加@angular-eslint/component-selector规则即可，具体配置如下：

{
  "rules": {
    "@angular-eslint/component-selector": [
      "error",
      ["element", "class"],
      "my"
    ]
  }
}

规则说明 #

该规则的三个参数含义如下：

• 第一个参数：校验错误等级，可填"error"（报错阻断提交/构建）、"warn"（仅警告不阻断）、"off"（关闭规则）
• 第二个参数：允许的选择器类型数组，这里同时传入"element"（元素选择器）和"class"（类选择器）即可支持两种写法
• 第三个参数：要求的选择器前缀，填写你的业务前缀"my"即可

配置完成后，以下两种组件选择器写法都可以通过校验：

• 元素类型选择器：selector: "my-app"，对应调用方式为<my-app></my-app>
• 类类型选择器：selector: ".my-app"，对应调用方式为<div class="my-app"></div>

如果是Angular多项目工作区，需要将该规则配置到对应项目的ESLint配置节点下，或直接配置在全局根配置中对所有项目生效。另外请确保你的项目已安装匹配Angular 11版本的@angular-eslint相关依赖，避免规则不生效。

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