【问题标题】：使用 Tailwind-CSS 时如何摆脱这些 SASS linting 错误？
【发布时间】：2020-09-18 22:24:25
【问题描述】：

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

如何消除这些 linting 错误警报？

【问题讨论】：

错误是什么？ This 可能会有所帮助
shinnosuke watanabe 的 stylelint 在 vscode 扩展上不再可用。
@Digvijay 经过一番挖掘后，我能找到的只是...编辑您的 settings.json 文件（您可以通过将此文件放入项目根目录中为每个项目执行此操作）.vscode/settings.json。然后输入{ "scss.validate": false} 你也会丢失所有其他错误检测。 This 答案消除了一些顺风指令上的错误突出显示，但不是全部，也不是像我使用 @apply 后那样依次列出的类名。

标签： css visual-studio-code sass prettier tailwind-css

【解决方案1】：

.css 和 .scss 的解决方案

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

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

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

安装vscode-stylelint 扩展

安装stylelint-config-standard:

npm i stylelint-config-standard -D

在根级别创建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,
  },
};

重启 vsCode

结果：

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

【讨论】：

太棒了！这对我来说非常有用。我在 ignoreAtRules 数组中添加了“扩展”。我为“.container”添加了一个 polyfill，因为在 SCSS 中使用 tailwind 时不允许您 @apply 一些响应式类。如果我做错了，请纠正我。不过，再次感谢您！
不客气。是的，您可以根据需要修改stylelint.config.js 文件rules。正如您所提到的，这是example 和extend。从示例中，请注意，如果没有 ignoreAtRules["tailwind"...]，您将在配置 Tailwind 时获得 Unexpected unknown at-rule "@tailwind"，例如@tailwind base;
为什么会这样？这是 vscode 的错误吗？

【解决方案2】：

.css 和 .scss 的快速解决方案（不推荐）

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

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

{
  "css.validate": false
}

结果：

您在使用 Tailwind-CSS 时摆脱了这些 SASS linting 错误，但您禁用了 CSS 验证。

【讨论】：

工作就像一个魅力！

【解决方案3】：

您可以告诉 VS Code 的 CSS linter 忽略“Unknown At Rules”（如 @tailwind）。这将使您的 CSS 验证的其余部分保持不变：

VS 代码 -> 命令面板 -> 工作区设置 -> 搜索：CSS Unknown At Rules
设置为ignore

VS Code 还可以使用 CSS > Lint: Valid Properties 将特定的 CSS 属性列入白名单，但似乎还不支持将特定的“at 规则”列入白名单。

【讨论】：

这实际上是最好的解决方案，因为关闭整个 scss linting 并不是一个好主意。

【解决方案4】：

vscode 的 settings.json 中的一行修复

"scss.lint.unknownAtRules": "ignore"

【讨论】：

【解决方案5】：

你必须得到一个 VSCode 的代码格式化程序来解决它。

我建议您在link 上下载 Beautify。

【讨论】：

Beautify 没有帮助消除错误。我启用了 Beautify 和 Prettier 这两个扩展，但都没有运气。

【解决方案6】：

如果您使用 VS Code，那么您可以在 Visual Studio Code 中添加对现代和实验性 CSS 的支持，方法是安装以下插件来修复使用 Tailwind CSS 指令时出现的错误。

https://marketplace.visualstudio.com/items?itemName=csstools.postcss

【讨论】：

【解决方案7】：

其他答案是热核的。就连孔子也停了下来……

这是为我做的。

重现：设置 -> 搜索“无效的顺风指令”，将此规则的值更新为“忽略”。瞧。

【讨论】：