stylelint-scss - 有没有办法禁用双斜杠评论？答案

【问题标题】：stylelint-scss - Is there a way to disable double-slash-comments?stylelint-scss - 有没有办法禁用双斜杠评论？
【发布时间】：2020-10-02 09:16:38
【问题描述】：

我使用 style-lint 来检查 Scss 文件和 styled-components（通过使用不同的 styleint.config 文件）。

当有效的 css 被注释掉 (https://github.com/styled-components/stylelint-processor-styled-components/issues/299) 时，Stylint 似乎有一个未解决的问题。

我可以不使用双斜杠 cmets 而是使用块 cmets (/* block comment */)，但我想要一致性：样式组件中的 css 和共享相同 css 语法的 Scss 文件。

我的想法是禁止在样式组件和 Scss 文件中使用双斜杠 cmets。

// file: stylelint.config.styledComponents.js

module.exports = {
  processors: [
    'stylelint-processor-styled-components',
  ],
  extends: [
    'stylelint-config-standard',
    'stylelint-config-styled-components',
  ],
  rules: {
    // enforce block comments
    'no-invalid-double-slash-comments': true,
  },
};

这里是 Scss 文件：

// file: stylelint.config.scss.js

module.exports = {
  extends: [
    'stylelint-config-standard',
  ],
  plugins: [
    'stylelint-scss',
  ],
  rules: {
    //
    // `scss/at-rule-no-unknown` is basically a wrapper around the mentioned core rule,
    //   but with added SCSS-specific @-directives. So if you use the core rule, @if, @extend
    //   and other Sass-y things will get warnings. You must disable stylelint's core rule to
    //   make this rule work
    //
    // source: https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/at-rule-no-unknown/README.md#at-rule-no-unknown
    //
    'at-rule-no-unknown': null,
    'scss/at-rule-no-unknown': true,

    // Report errors for unknown pseudo-classes with exception for :export
    'selector-pseudo-class-no-unknown': [true, {
      ignorePseudoClasses: ['export'],
    }],

    // Override rules to match styles used in styled-components
    //
    // Following rules comes from diffing the print-config results
    //   from styled-components and scss files 
    'no-missing-end-of-source-newline': null,
    'no-empty-source': null,
    'value-no-vendor-prefix': [true],
    'property-no-vendor-prefix': [true],

    // enforce block comments
    'no-invalid-double-slash-comments': true,
  },
};

使用双斜杠 cmets 时，检查 Scss 文件不会出错。有没有办法做到这一点？

【问题讨论】：

标签： styled-components stylelint

【解决方案1】：

no-invalid-double-slash-comments rule 不允许 particular type on double slash comment in CSS。引用the docs:

如果您使用的预处理器允许 // 单行 cmets（例如 Sass、Less、Stylus），则此规则不会抱怨这些。它们被你的预处理器编译成标准的 CSS cmets，所以 stylelint 会认为它们是有效的。

我不认为现有规则禁止 SCSS 双斜杠 cmets。但是，您可以write a simple plugin 执行此操作。我建议您使用stylelint-scss plugin pack 中的comment-no-loud rule 作为蓝图。

【讨论】：