eslint plugin vue scoped css

Eslint-Plugin-vue-scoped-CSS

Eslint-Plugin-vue-Scoped-CSS是vue.js中的scoped css的ESLINT插件。

特征

此ESLINT插件提供了覆盖规则，涉及更好的方法，以帮助您在vue.js中使用范围CSS时避免问题。

• 为范围CSS提供伸长规则。
• 支持CSS语法，包括4级选择器。
• 支持<style lang="scss"> 。
• 支持<style lang="stylus"> 。
• parses <style> ， <template>和<script>块。

您可以检查在线演示。

文档

请参阅文档。

安装

npm install --save-dev eslint eslint-plugin-vue-scoped-css vue-eslint-parser

要求

• Eslint V6.0.0及以上
• node.js v12.22.x，v14.17.x，v16.x及以上

用法

新config（ eslint.config.js ）

使用eslint.config.js文件来配置规则。另请参阅：https：//eslint.org/docs/latest/use/configure/configuration-files-new。

示例eslint.config.js ：

 import eslintPluginVueScopedCSS from 'eslint-plugin-vue-scoped-css' ;
export default [
  // add more generic rule sets here, such as:
  // js.configs.recommended,
  ... eslintPluginVueScopedCSS . configs [ 'flat/recommended' ] ,
  {
    rules : {
      // override/add rules settings here, such as:
      // 'vue-scoped-css/no-unused-selector': 'error'
    }
  }
] ;

传统配置（ .eslintrc ）

使用.eslintrc.*文件以配置规则。另请参阅：https：//eslint.org/docs/latest/use/configure/。

示例.eslintrc.js ：

 module . exports = {
  extends : [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue-scoped-css/vue3-recommended'
  ] ,
  rules : {
    // override/add rules settings here, such as:
    // 'vue-scoped-css/no-unused-selector': 'error'
  }
} 

配置

该插件提供了一些预定义的配置：

新config（ eslint.config.js ）

• *.configs['flat/base'] - 启用此插件的设置和规则
• *.configs['flat/recommended'] - /base ，加上更好的方法来帮助您避免vue.js 3.x的问题
• *.configs['flat/vue2-recommended'] - /base ，以及更好的方法来帮助您避免vue.js 2.x的问题
• *.configs['flat/all'] - 包含此插件的所有规则

传统配置（ .eslintrc ）

• plugin:vue-scoped-css/base设置和规则以启用此插件
• plugin:vue-scoped-css/recommended - /base ，加上更好的方法来帮助您避免vue.js 2.x的问题
• plugin:vue-scoped-css/vue3-recommended /base ，以及更好的方法，以帮助您避免vue.js 3.x的问题
• plugin:vue-scoped-css/all包含此插件的所有规则

规则

命令行上的--fix选项会自动解决具有扳手的规则报告的问题？以下。

推荐用于vue.js 3.x

在此类别中执行所有规则：

 export default [
  ... eslintPluginVueScopedCSS . configs [ 'flat/recommended' ] ,
]

或者

{
  "extends" : [ " plugin:vue-scoped-css/vue3-recommended " ]
}

规则ID	描述
vue-Scoped-CSS/强制型式型	强制执行<style>标签是纯正的或具有scoped或module属性
vue-scoped-css/no deprected-Deep-Combinator	禁止使用弃用的深层组合者	？
VUE-SCOPED-CSS/no-Parent-V-Global	禁止::v-global伪元素的家长选择器
vue-scoped-css/no-parsing-error	禁止<style>中的解析错误
vue-scoped-css/nounus-unused-keyframes	禁止在CSS中不使用的@keyframes
vue-scoped-css/no-Unust-Selector	禁止在<template>中不使用的范围CSS中定义的选择器
vue-scoped-css/require-v-deep-argument	需要将选择器参数传递到::v-deep()	？
vue-scoped-css/require-v-Global-argument	需要将选择器参数传递到::v-global()
vue-scoped-css/require-v-slotted-argument	需要将选择器参数传递到::v-slotted()

推荐用于vue.js 2.x

在此类别中执行所有规则：

 export default [
  ... eslintPluginVueScopedCSS . configs [ 'flat/vue2-recommended' ] ,
]

或者

{
  "extends" : [ " plugin:vue-scoped-css/recommended " ]
}

规则ID	描述
vue-Scoped-CSS/强制型式型	强制执行<style>标签是纯正的或具有scoped或module属性
vue-scoped-css/no-parsing-error	禁止<style>中的解析错误
vue-scoped-css/nounus-unused-keyframes	禁止在CSS中不使用的@keyframes
vue-scoped-css/no-Unust-Selector	禁止在<template>中不使用的范围CSS中定义的选择器

未分类

没有预设可以启用此类别中的规则。如果需要，请启用每个规则。

例如：

{
  "rules" : {
    "vue-scoped-css/no-deprecated-v-enter-v-leave-class" : " error "
  }
}

规则ID	描述
vue-scoped-css/no-deprected-v-enter-v-leave-class	禁止V-Enter和V-Leave类。
vue-scoped-css/recire-selecter-selecter-sunded-inside	禁止定义的选择器在<template>中未使用的选择器
vue-Scoped-CSS/V-Deep-Pseudo风格	强制:deep() / ::v-deep()样式	？
vue-scoped-css/v-Global-PSEUDO风格	强制:global() / ::v-global()样式	？
vue-scoped-css/v-slotted-pseudo风格	强制:slotted() / ::v-slotted()样式	？

弃用

• 配x我们将在下一个主要版本中删除弃用规则。请迁移到继任/新规则。
• ？由于我们没有足够的资源，因此我们没有修复弃用规则中的错误。

规则ID	取代
vue-scoped-css/reciretscoped	vue-Scoped-CSS/强制型式型

贡献

欢迎贡献！

请使用GitHub的问题/PR。

开发工具

• npm test进行测试和测量范围。
• npm run update运行是为了更新readme和建议的配置。

执照

有关许可权和限制（MIT），请参见许可证文件。