Ionic 3代码在SonarQube检测中出现unknown type selector问题，求解决方法

我之前帮不少开发者搞定过SonarQube扫描Ionic 3代码时的这个报错，核心原因其实很简单：SonarQube默认的CSS规则不认识Ionic 3那一堆自定义组件选择器（比如ion-content、ion-header、ion-button这些），会把它们当成“未知类型选择器”来标记。下面是几个亲测有效的解决办法，按优先级排序：

1. 用stylelint配置忽略Ionic自定义选择器（推荐） #

SonarQube的CSS代码检查大多基于stylelint，所以我们可以在项目里自定义stylelint规则，让它忽略以ion-开头的选择器。

• 在项目根目录创建.stylelintrc文件，写入以下配置：

  {
    "rules": {
      "selector-type-no-unknown": [true, {
        "ignoreTypes": ["^ion-"]
      }]
    }
  }
  

• 然后在你的sonar-project.properties文件里添加一行，告诉SonarQube使用这个自定义配置：

  sonar.css.stylelint.configPath=.stylelintrc
  

  这样SonarQube扫描时就会自动跳过所有Ionic的组件选择器，不会再报这个错了。

2. 在SonarQube服务器端添加规则例外 #

如果你有权限操作SonarQube服务器，可以直接修改“Unknown type selector”规则的配置：

• 登录SonarQube后台，找到质量规则页面，搜索“Unknown type selector”（属于CSS规则）
• 进入规则详情，点击编辑，在“参数”里的“忽略的类型选择器”中添加^ion-（或者具体列出你用到的Ionic组件，比如ion-header, ion-content）
• 保存后重新扫描项目，这个报错就会消失。

3. 排除第三方Ionic样式文件 #

如果SonarQube不小心扫描到了node_modules里的Ionic内置CSS文件，也会出现大量这类报错。可以在sonar-project.properties里排除这些文件：

sonar.css.exclusions=**/node_modules/ionic-angular/**/*.css, **/node_modules/ionicons/**/*.css

这样SonarQube只会扫描你自己写的样式代码，不会碰第三方库的文件。

4. 升级SonarCSS插件 #

有些旧版本的SonarCSS插件对框架自定义标签的支持不够友好，升级到最新版本的SonarCSS插件，有时候能自动识别常见的框架组件，或者提供更灵活的配置选项。

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