如何解决“应该有分号”的警告（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.

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

2. 在你的项目根目录中创建一个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,
  },
};

3. 安装以下扩展到您的 VS Code 安装程序中：

• Stylelint
• Tailwind CSS IntelliSense

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

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

这样，您将“禁用”原生的代码检查功能，但仍然可以使用 Tailwind IntelliSense 插件进行代码检查。

- Chris

---

我需要运行 npx stylelint "**/*.css" --fix 命令来修复被标记出的问题。 - jessems

我的 settings.json 如下所示：{ "emmet.excludeLanguages": [ "markdown" ], "emmet.includeLanguages": { "erb": "html", "html-eex": "html" }, "editor.fontSize": 13, "workbench.iconTheme": "material-icon-theme", "workbench.colorTheme": "Material Theme Darker High Contrast", "json.schemas": [ ] }我应该把这些值放在哪里？ 是放在 json.schemas 中吗？"css.validate": false, "less.validate": false, "scss.validate": false, - rld

谢谢，这似乎是我React/Prettier/SASS项目中最好的解决方案！ - ziale

如果您想让它在2021年11月正常工作，请在您的VS Code设置中添加："stylelint.validate": ["css", "less", "postcss", "vue"]。并在stylelint配置中添加：'"overrides": [ { "files": ["**/*.vue"], "customSyntax": "postcss-html" } ], 您还必须安装 npm install --save-dev postcss-html。 - javifm

Answer 2

禁用Vetur的样式验证

如果警告的图标是Vue标志（在VSCode的“问题”窗格中看到），这些CSS警告可能起源于Vetur扩展程序。

禁用Vetur的样式验证可能会导致失去其他好处，但从长远来看，最好还是依赖于更全面的验证器/代码检查工具而不是该扩展程序。

1. 进入Vetur扩展程序设置，取消样式验证选项。

--- 或 ---

2. 在项目根目录下的.vscode/settings.json文件中设置以下内容，以按项目设置：

   "vetur.validation.style": false

---

Vetur的警告看起来像这样：

- kissu

Answer 3

我发现了另一个解决方案Tailwind与nuxt一起使用会导致奇怪的@apply问题#300

只需在style标签中添加lang="postcss"，通过这个修复，我就没有任何错误了。

<style lang="postcss" scoped>
  .title {
      @apply text-purple-600 font-bold;
  }
</style>

- Ewilan R.

---

我尝试了你的建议，它确实消除了错误信息，但我仍然建议采用得票最高的解决方案并集成stylelint，因为它将增加在CSS中揭示潜在错误的能力。我认为这非常有价值。 - uke5tar

Answer 4

我认为您正在使用Prettier，而当您在一行中使用@apply时，该插件会出现错误，请尝试以下方法：

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

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

- Ali Hosseini

---

阿里·侯赛因尼，我没有使用prettier。不过你的建议有效；但我也想知道如何避免在多行中使用@apply。谢谢！ - Kingsley F.D.

你用的是哪个集成开发环境（IDE）？ - Ali Hosseini

我不熟悉 svcode，也完全不了解它，但如果你是指 vscode，那么请右键单击页面，选择“使用...格式化文档”，并检查你的代码格式化工具（我认为问题在于你的格式化工具）。 - Ali Hosseini

抱歉，我本意是说vscode。不过问题已经解决了。我必须禁用一个使用prettier格式化代码库的特定扩展（vetur）。现在一切都好了。谢谢！ - Kingsley F.D.

谢谢，这个特别适用于使用Prettier进行代码检查和Tailwind的Angular项目。 - J King

Answer 5

2个步骤

1. 将以下行添加到：.vscode>settings.json中

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

2. 安装 StyleLint 扩展

https://marketplace.visualstudio.com/items/shinnn.stylelint

重新开始，这就完成了！

- Pedro Cardoso

---

我正在使用less，我只是在.vscode settings.json文件中添加了"less.validate": false，它起作用了，谢谢！ - Tellisense

Answer 6

尝试添加扩展PostCSS语言支持; 它在Visual Studio Code中添加了对现代和实验性CSS的支持。

- Imane Erguiti

---

这个回答太简短了，而且不够具体。你至少可以添加一个解释和建议包的文档链接。 - Julian Kleine

这更像是一条评论，而不是一个答案。在获得50+声望后，您可以发布评论。有关详细信息，请参见此处。 - costaparas

我编辑了Imane的好回答，以澄清我认为他们的意图是什么。 - Pier-Luc Gendreau

这个扩展对我没有任何作用...因为我收到的警告来自另一个扩展程序。一般的解决方法是：找出哪个扩展程序报告了警告，并处理它。 - Kalnode

请注意，您可能需要将当前语言设置为PostCSS才能正常工作。在我使用之前，这是必要的。 - DeveloperRyan

Answer 7

我曾遇到过Nuxt相同的问题，解决方法是按照这篇博客中的步骤进行操作，简要如下：

1. 安装stylelint vscode扩展
2. 在stylelint.config.js中添加以下配置

rules: {
   'at-rule-no-unknown': [
     true,
     {
       ignoreAtRules: [
         'tailwind',
         'apply',
         'variants',
         'responsive',
         'screen',
       ],
     },
   ],
   'declaration-block-trailing-semicolon': null,
   'no-descending-specificity': null,
 },

3. 在 VSCode 的配置中取消勾选 CSS 验证选项，或者将以下代码添加到你的 VSCode settings.json 文件中："css.validate": false

经过以上步骤，所有东西都会正常工作。

万一出现问题，我曾经遇到过 prettier 格式化方面的问题，并通过在我的 VSCode settings.json 文件中添加以下选项解决了这个问题："vetur.format.defaultFormatter.html": "prettier",

- Oscar Velandia

---

"vetur.validation.style": false 通过修复 stylelint 的设置，为我解决了一些问题。 - Giles Butler

我不知道为什么需要使用stylelint，因为只应用第3步就解决了我的问题。 - JeromeDL30

前两步只是为了防止你的项目使用Stylelint。 - Oscar Velandia

Answer 8

我使用VS Code，并将以下内容添加到我的设置中：

"files.associations": {
  "*.vue": "html"
}

后来，错误消失了。

- mfeyx