如何解决“预期分号”警告（css-semicolonexpected）

Question

我正在尝试在 Nuxt.js Vue 文件的 <style> 标签中使用 Tailwindcss @apply 指令。一切正常，但我不断收到一些恼人的红色波浪线。拜托，伙计们，我需要帮助…谢谢！

下面是一个 截图 和一个片段：

 <style scoped>

.title {
  @apply text-orient font-light block text-5xl pt-2;
}

.message {
  @apply font-light pb-4 text-orient text-2xl text-blue-bayoux
}
</style>

原文由 Kingsley F.D. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 VS Code 中没有内置的方法来解决这个问题。解决此问题的推荐方法是使用 Stylelint 扩展来处理您的 CSS linting（& SCSS 和/或 Less 等）。它非常强大，除了为您消除这些错误之外，它还可能会改进您的样式表。

1. 您需要将 styleint 依赖项添加到您的项目中。跑：

 npm install --save-dev stylelint stylelint-config-standard

yarn add -D stylelint stylelint-config-standard

1. 在项目的根目录中创建一个 stylelint.config.js 。 （您的 package.json 存储位置相同）

将此片段放入其中：

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

1. 将这些扩展安装到您的 VS Code 设置中：

• 样式线
• Tailwind CSS 智能感知

1. 最后但同样重要的是，调整您的本地或全局 VS Code settings.json 文件以包括：

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

这样，您将“禁用”本机 linting，但仍确保使用 Tailwind IntelliSense 插件对其进行 linting。

原文由 Chris 发布，翻译遵循 CC BY-SA 4.0 许可协议