@gd24/eslint-config-vue

@gd24/eslint-config-vue

@gd24/eslint-config plus Vue 3 mit <script setup lang="ts">, Barrierefreiheit und Vitest.

npm install -D eslint @gd24/eslint-config-vue

// eslint.config.mjs
import gd24Vue from '@gd24/eslint-config-vue';

export default [...gd24Vue];

Typgestützt auch in .vue

vueTsConfigs.strictTypeChecked — im Frontend gilt derselbe Typstandard wie im Backend. Der vue-eslint-parser liest die Datei als Ganzes und reicht den <script>-Block an TypeScript weiter.

Komponentenstil

• component-api-style: ['script-setup'] — Composition API mit <script setup> ist der einzige zugelassene Stil.
• Blockreihenfolge script → template → style
• Makroreihenfolge defineOptions → defineModel → defineProps → defineEmits → defineSlots
• define-props-declaration und define-emits-declaration typbasiert, require-typed-ref, multi-word-component-names, component-name-in-template-casing: PascalCase, no-undef-components

Datenfluss

no-mutating-props, require-explicit-emits, no-ref-object-reactivity-loss, no-setup-props-reactivity-loss, no-watch-after-await — Props sind Eingaben, keine lokale State-Ablage.

Sicherheit im Template

no-v-html (der direkte Weg zu XSS), no-template-target-blank, require-v-for-key, no-use-v-if-with-v-for.

Barrierefreiheit

eslint-plugin-vuejs-accessibility in der empfohlenen Fassung. label-has-for ist auf some: ['nesting', 'id'] gesetzt: Der HTML-Standard kennt Verschachtelung und for/id als gleichwertig — die Vorgabe every würde beides gleichzeitig verlangen.

Ausnahmen

Im Browser bleibt no-console eine Warnung — Diagnose-Ausgaben in der Entwicklung sind vertretbar.

MIT