1. 前言

当使用SonarQube对Vue项目进行代码质量审查时，可能会遭遇因Vue特有的deep选择器（旨在实现样式深度穿透）而触发的错误或警告。由于SonarQube默认并不识别这一Vue特有的语法，这些错误报告可能会成为审查过程中的干扰项。为了优化审查体验，并专注于更实际的代码质量问题，我们可以通过自定义SonarQube的质量配置文件来忽略这些针对deep选择器的错误。

以下是具体的操作步骤，基于SonarQube的通用界面和《How to include a pseudo class selector in Sonar rules (deep - Vue)》社区讨论中的指导。

2. 创建自定义CSS质量配置文件

  1. 登录到SonarQube的Web界面。
  2. 导航到Quality Profiles页面。
  3. 点击页面上的Create按钮，选择Copy an existing quality profile作为创建方式。
  4. 在弹出的对话框中，设置以下选项：
    • Language：选择CSS。
    • Profile to copy：选择Sonar Way作为基础配置文件，因为它包含了SonarQube推荐的CSS最佳实践。
    • Name：输入自定义配置文件的名称，例如CustomVueCSS。
  5. 点击Create完成配置文件的创建。

3. 设置自定义配置文件为默认

  1. 回到Quality Profiles页面，在CSS语言下，你应该能看到刚才创建的CustomVueCSS配置文件。
  2. 在CustomVueCSS配置文件旁的Actions列中，点击Set as Default按钮，将其设置为默认的质量配置文件。

4. 修改配置文件以忽略deep选择器

  1. 在Quality Profiles页面，找到并点击刚设置为默认的CustomVueCSS配置文件名称，进入配置文件的详细设置页面。

  2. 在该页面中，找到并定位到Pseudo-class selectors should be valid这条规则。

  3. 点击这条规则，定位到Quality Profiles，点击CustomVueCSS配置文件名称右侧的Change按钮，进入规则的详细配置界面。

  4. 在ignorePseudoClasses字段中，添加deep作为要忽略的伪类选择器。这样，SonarQube在检查CSS代码时将不再报告deep选择器为无效或错误。

  5. 点击Save按钮保存更改。