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

Question

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

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

<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>

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 设置中：

• 样式线
• Tailwind CSS 智能感知

4. 最后但并非最不重要的一点是，调整您的本地或全局 VS Codesettings.json文件以包括：

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

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

Answer 2

禁用 Vetur 的样式验证

此类 CSS 警告可能源自 Vetur 扩展，如果警告的图标（如 VSCode 的“问题”窗格中所示）是 Vue 徽标，则情况很可能就是这种情况。

通过禁用 Vetur 的样式验证，您可能会失去其他好处。尽管从长远来看，依赖功能更全面的验证器/linter 可能比这个扩展更好。

1. 转到 Vetur 扩展设置并取消选中样式验证选项。

- - 或者 - -

2. .vscode/settings.json在项目根目录的文件中设置每个项目的选项，如下所示：

   "vetur.validation.style": false

Vetur警告看起来像：

Answer 3

我找到了另一个解决方案使用带有 nuxt 的 Tailwind 导致奇怪的 @apply 问题#300

只需添加lang="postcss"到style标签并使用此修复程序，我没有任何错误。

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

Answer 4

我认为您正在使用更漂亮的插件并且当您@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>

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

重启，大功告成！

Answer 6

我在 Nuxt 上遇到了同样的问题，解决方案是按照此博客中的步骤操作，TL:DR 是：

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 validate 选项或将其添加到您的 vscode settings.json 文件中 "css.validate": false

有了这些步骤，一切都会完美无缺。

以防万一，我也遇到了更漂亮的格式问题，并且在我的 vscode settings.json 文件中使用此选项进行了修复"vetur.format.defaultFormatter.html": "prettier",

Answer 7

尝试添加扩展PostCSS Language Support；它在 Visual Studio Code 中增加了对现代和实验性 CSS 的支持。