eslint plugin vue scoped css
v2.9.0
Eslint-Plugin-Vue-Scoped-CSS ist eslint-Plugin für Scoped CSS in Vue.js.
Dieses Eslint -Plugin bietet Lining -Regeln, die sich auf bessere Möglichkeiten beziehen, um Probleme bei der Verwendung von CSS in Vue.js.
<style lang="scss"> .<style lang="stylus"> .<style> , <template> und <script> Blöcke.Sie können die Online -Demo überprüfen.
Siehe Dokumente.
npm install --save-dev eslint eslint-plugin-vue-scoped-css vue-eslint-parserAnforderungen
- Eslint v6.0.0 und höher
- Node.js v12.22.x, v14.17.x, v16.x und höher
eslint.config.js ) Verwenden Sie die Datei eslint.config.js , um Regeln zu konfigurieren. Siehe auch: https://eslint.org/docs/latest/use/configure/configuration-files-new.
Beispiel 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 ) Verwenden Sie .eslintrc.* Datei, um Regeln zu konfigurieren. Siehe auch: https://eslint.org/docs/latest/use/configure/.
Beispiel .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'
}
} Dieses Plugin bietet einige vordefinierte Konfigurationen:
eslint.config.js )*.configs['flat/base'] - Einstellungen und Regeln, um dieses Plugin zu aktivieren*.configs['flat/recommended'] - /base plus Regeln für bessere Möglichkeiten, um Ihnen dabei zu helfen, Probleme für VUE.JS 3.x zu vermeiden*.configs['flat/vue2-recommended'] - /base sowie Regeln für bessere Möglichkeiten, um Ihnen dabei zu helfen, Probleme für VUE.JS 2.x zu vermeiden*.configs['flat/all'] - Alle Regeln dieses Plugins sind enthalten.eslintrc )plugin:vue-scoped-css/base -Einstellungen und Regeln, um dieses Plugin zu aktivierenplugin:vue-scoped-css/recommended /base sowie Regeln für bessere Möglichkeiten, um Ihnen dabei zu helfen, Probleme für VUE.JS 2.x zu vermeidenplugin:vue-scoped-css/vue3-recommended /base sowie Regeln für bessere Möglichkeiten, um Ihnen dabei zu helfen, Probleme für VUE.JS 3.x zu vermeidenplugin:vue-scoped-css/all -Alle Regeln dieses Plugins sind enthalten Die Option --fix in der Befehlszeile behebt automatisch Probleme, die nach Regeln gemeldet wurden, die einen Schraubenschlüssel haben? unten.
Erzwingen Sie alle Regeln in dieser Kategorie mit:
export default [
... eslintPluginVueScopedCSS . configs [ 'flat/recommended' ] ,
]oder
{
"extends" : [ " plugin:vue-scoped-css/vue3-recommended " ]
}| Regel id | Beschreibung | |
|---|---|---|
| VUE-SCOPED-CSS/Durchsetzungsstil-Typ | <style> scoped module | |
| VUE-SCOPED-CSS/NICHT-DEPRECATED-TEP-COMBINATOR | mit veralteten tiefen Kombinatoren nicht zulassen | ? |
| VUE-SCOPED-CSS/NO-NO-ELTER-OF-V-GLOBAL | Verlassen Sie den übergeordneten Selektor für ::v-global Pseudo-Element | |
| VUE-SCOPED-CSS/NO-PARSING-ERROR | Parsing -Fehler in <style> nicht zulassen | |
| VUE-SCOPED-CSS/NO-ANUTED-KEINE-TRAMMEN | Nicht zulässt @keyframes , die nicht in Scoped CSS verwendet werden | |
| VUE-SCOPED-CSS/NO-ANUTTIERUNGSWELT | Nicht zulässigen Selektoren, die in Scoped CSS definiert sind, die in <template> nicht verwendet werden | |
| VUE-SCOPED-CSS/ERFORDERUNG-V-TEP-Argument | Fordern Sie das Auswahlargument an ::v-deep() | ? |
| VUE-SCOPED-CSS/ERFORDERUNG-V-GLOBAL-Argument | Fordern Sie das Auswahlargument an ::v-global() | |
| VUE-SCOPED-CSS/ERFORDERUNG-V-SLETTED-ARGUMENT | Fordern Sie das Auswahlargument an ::v-slotted() |
Erzwingen Sie alle Regeln in dieser Kategorie mit:
export default [
... eslintPluginVueScopedCSS . configs [ 'flat/vue2-recommended' ] ,
]oder
{
"extends" : [ " plugin:vue-scoped-css/recommended " ]
}| Regel id | Beschreibung | |
|---|---|---|
| VUE-SCOPED-CSS/Durchsetzungsstil-Typ | <style> scoped module | |
| VUE-SCOPED-CSS/NO-PARSING-ERROR | Parsing -Fehler in <style> nicht zulassen | |
| VUE-SCOPED-CSS/NO-ANUTED-KEINE-TRAMMEN | Nicht zulässt @keyframes , die nicht in Scoped CSS verwendet werden | |
| VUE-SCOPED-CSS/NO-ANUTTIERUNGSWELT | Nicht zulässigen Selektoren, die in Scoped CSS definiert sind, die in <template> nicht verwendet werden |
Kein Voreingang ermöglicht die Regeln in dieser Kategorie. Bitte aktivieren Sie jede Regel, wenn Sie möchten.
Zum Beispiel:
{
"rules" : {
"vue-scoped-css/no-deprecated-v-enter-v-leave-class" : " error "
}
}| Regel id | Beschreibung | |
|---|---|---|
| VUE-SCOPED-CSS/NO-Deprecated-V-Enter-V-Leave-Klasse | V-Enter- und V-Leave-Klassen nicht zulassen. | |
| VUE-SCOPED-CSS/ERFORDERUNGSELSELSECTION-UND-INSIDE | Selektoren definiert, die in <template> nicht verwendet werden, wird nicht verwendet | |
| Vue-Scoped-CSS/V-Deep-Pseudo-Stil | Durchsetzung :deep() / ::v-deep() Stil | ? |
| VUE-SCOPED-CSS/V-GLOBAL-PSEUDO-Stil | Durchsetzung :global() / ::v-global() Stil | ? |
| VUE-SCOPED-CSS/V-SLOTTED-PSEUDO-Stil | Durchsetzung :slotted() / ::v-slotted() Stil | ? |
| Regel id | Ersetzt durch |
|---|---|
| VUE-SCOPED-CSS/ERFORDERUNG SCOPED | VUE-SCOPED-CSS/Durchsetzungsstil-Typ |
Willkommen beizutragen!
Bitte verwenden Sie Githubs Probleme/PRs.
npm test führt Tests aus und misst die Abdeckung.npm run update wird ausgeführt, um ReadMe und empfohlene Konfiguration zu aktualisieren. Siehe die Lizenzdatei für Lizenzrechte und Einschränkungen (MIT).
