css - 无法为 Check this potential box model size issue 设置 stylelint 规则

Question

我正在使用 webpack 开发 Angular2 应用程序。我正在使用 sonarqube 进行代码质量度量。我使用 VS Code 作为 IDE。

下面的 css 给了我一个关于 sonarqube 的警告“检查这个潜在的盒子模型大小问题”，这是正确的。

.popup-dock-button {
  background: url('./app/assets/images/dock.svg') no-repeat;
  background-size: 13px 13px;
  float: left;
  width: 20px;
  height: 20px;
  padding: 3px;
}

但在 VSCode 中，我无法将此代码气味视为警告。下面是我的 stylelintrc.json 文件

{
    "extends": [
        "stylelint-config-standard"
    ],
    "plugins": [
        "stylelint-scss"
    ],
    "rules": {
        "indentation": 4,
        "number-leading-zero": null,
        "declaration-block-no-ignored-properties": true,
        "selector-class-pattern": "^[a-z][-a-z0-9]*$",
        "selector-no-id": true
    },
    "defaultSeverity": "warning"
}

我找不到为解决此问题而设置的规则 ID。

Answer 1

Sonar 和 stylelint 是两种不同的工具。它们都能够进行 CSS 静态分析。但是，它们有不同的规则、选项和配置。 Sonar 似乎是基于 Java 的，而 stylelint 是用 JavaScript 为 Node.js 编写的。

看起来您在 IDE 中将 Sonar 作为 CI 和 stylelint 的一部分运行。这就是为什么 CI 中的警告不同于 IDE 中的警告。

仅供引用，Sonor CSS 规则列表是 here .也许您会在那里找到一个选项来禁用“检查这个潜在的盒子模型尺寸问题”规则。