eslint plugin vue scoped css

Eslint-Plugin-Vue-Coped-CSS

Eslint-Plugin-vue-Coped-CSS-плагин Eslint для CSS COPED в VUE.JS.

Функции

Этот плагин Eslint обеспечивает правила снятия, связанные с лучшими способами помочь вам избежать проблем при использовании CSS SCOPED в VUE.JS.

• Обеспечивает правила ливни для CSS SCOPED.
• Поддерживает синтаксис CSS, включая селекторы уровня 4.
• Поддерживает <style lang="scss"> .
• Поддерживает <style lang="stylus"> .
• Подставки <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 и выше

Использование

Новая конфигурация ( 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'
    }
  }
] ;

Legacy Config ( .eslintrc )

Используйте .eslintrc.* FILE для настройки правил. См. Также: 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'
  }
} 

Конфигурации

Этот плагин предоставляет некоторые предопределенные конфигурации:

Новая конфигурация ( 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'] - все правила этого плагина включены

Legacy Config ( .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 " ]
}

Идентификатор правила	Описание
VUE-COPED-CSS/TIPSILE-TYPE	применять теги <style> быть простыми или иметь атрибут scoped или module
Vue-Scoped-CSS/без депрессованного Combomnator	Отказ от использования устаревших глубоких комбинаторов	?
VUE-COPED-CSS/NO-PARENT-OF-V-GLOBAL	Отказать в селекторе ::v-global
Vue-Scoped-CSS/NOPARSINGERROR	Отбросить ошибки разбора в <style>
Vue-Scoped-CSS/NO-UN-USE-KEYFRAMES	Отбросьте @keyframes , которые не используются в CSS Scoped
Vue-Scoped-CSS/NO-Un-Uned-Selector	Отключить селекторы, определенные в CSS, которые не используют в <template>
VUE-COPED-CSS/AST-V-DEEP-ARGUMENT	Требуйте, чтобы аргумент селектора был передан по адресу ::v-deep()	?
VUE-COPED-CSS/AST-V-GLOBAL-ARGUMENT	Требуйте, чтобы аргумент селектора был передан ::v-global()
VUE-COPED-CSS/AST-V-Слот-Аргумент	Требуйте, чтобы аргумент селектора был передан по адресу ::v-slotted()

Рекомендуется для vue.js 2.x

Применить все правила в этой категории:

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

или

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

Идентификатор правила	Описание
VUE-COPED-CSS/TIPSILE-TYPE	применять теги <style> быть простыми или иметь атрибут scoped или module
Vue-Scoped-CSS/NOPARSINGERROR	Отбросить ошибки разбора в <style>
Vue-Scoped-CSS/NO-UN-USE-KEYFRAMES	Отбросьте @keyframes , которые не используются в CSS Scoped
Vue-Scoped-CSS/NO-Un-Uned-Selector	Отключить селекторы, определенные в CSS, которые не используют в <template>

Без рубрики

Никакая предустановка не позволяет правила в этой категории. Пожалуйста, включите каждое правило, если хотите.

Например:

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

Идентификатор правила	Описание
Vue-Scoped-CSS/NO-DEPRECATED-V-ENTER-V-LEAVE CLASS	Запретить классы V-Enter и V-Leave.
VUE-COPED-CSS/ARST-SELECTOR-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() стиль	?

Устарел

• ️ Мы собираемся удалить устаревшие правила в следующем крупном выпуске. Пожалуйста, перейдите в преемники/новые правила.
• ? Мы не фиксируем ошибки, которые находятся в устаревших правилах, поскольку у нас недостаточно ресурсов.

Идентификатор правила	Заменен на
Vue-Scoped-CSS/TESS-SCOPED	VUE-COPED-CSS/TIPSILE-TYPE

Внося

Добро пожаловать!

Пожалуйста, используйте проблемы/PRS GitHub.

Инструменты разработки

• npm test запускает тесты и измеряет охват.
• npm run update выполняет выполнение обновления для обновления readme и рекомендуемой конфигурации.

Лицензия

См. Файл лицензии для прав на лицензию и ограничения (MIT).