使用 Tailwind-CSS 时，您如何摆脱这些 SASS linting 错误？

Question

我在 Gatsby.js 项目中使用 Tailwind。我的环境是 VSCode，使用 Prettier 代码格式化程序。

如何摆脱这些 linting 错误警报？

Answer 1

.css 和 .scss 的解决方案

1. 在项目的根级别，.vscode使用文件更新或创建目录settings.json：

2. 将以下内容添加到 .vscode/settings.json:

{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
}

3. 安装vscode-stylelint扩展

4. 安装stylelint-config-standard：

npm i stylelint-config-standard -D

5. stylelint.config.js在根级别创建一个文件并添加：

module.exports = {
  extends: ['stylelint-config-recommended'],
  rules: {
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
        ],
      },
    ],
    "declaration-block-trailing-semicolon": null,
    "no-descending-specificity": null,
  },
};

6. 重启 vsCode

结果：

使用 Tailwind-CSS 时，您可以摆脱这些 SASS linting 错误，并继续使用 stylelint 进行 css 验证。

Answer 2

您可以告诉 Visual Studio Code 的 CSS linter 忽略“规则未知”（如@tailwind）。这将使其余的 CSS 验证保持不变：

\n

\n
1. Visual Studio Code \xe2\x86\x92 命令面板（例如，菜单视图\xe2\x86\x92命令面板）* \xe2\x86\x92工作区设置\xe2\x86\x92 搜索：CSS 规则未知
\n
2. 设置ignore
\n

\n

\n

Visual Studio Code 还可以使用"CSS > Lint: Valid Properties"将特定的 CSS 属性列入白名单，但看起来尚不支持将特定的“at 规则”列入白名单。

\n