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），請參見許可證文件。