Question

如何正确配置Tailwind CSS和VS Code，以至少禁用VueJS单个文件组件（vue-cli）中的规则错误和空标签错误？

<template>
...
</template>

<style lang="scss">
  body {
    // } expected
    @apply font-source pt-4;
  } // at-rule or selector expected

  h5,h4,h3,h2,h1 {
    // } expected
    @apply font-pt font-bold;
  } // at-rule or selector expected
</style>

Answer 1

我在guide

的帮助下工作了

TLDR

安装VS Code插件stylelint（发布者名称：stylelint）
对项目禁用scss / css验证。点击F1并搜索“设置json”。

settings.json

"scss.validate": false
"css.validate": false

添加并配置stylelint插件。将以下文件和内容添加到项目根目录。

stylelint.config.js

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

（可选）您可能需要重启vs代码才能看到更改

Answer 2

也许删除lang =“ scss”或直接在模板中使用该类应该起作用？

Answer 3

请考虑使用postcss作为CSS语言而不是SCSS。像这样将postcss添加为lang：

<style lang="postcss">
// styles...
</style>

Tailwind CSS + VueJS单个文件组件和VS Code集成

3 个答案: