Eslint config
V tomto článku bych vám chtěl ukázat nastavení eslintu, které používáme na našich vue projektech.
/**
* Eslint konfigurace převážně rozšiřující standardjs (eslint-config-standard 14.1.1) - https://standardjs.com/ s několika úpravami
* hlavně pro zlepšení funkcionálního programovacího stylu a datového toku (v logice) a zmírnění pravidel pro styl (style)
*/
module.exports = {
root: true,
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
},
// tento konfig se zakládá na několika setech pravidel níže
extends: [
'standard',
'plugin:nuxt/recommended',
'plugin:vue/strongly-recommended',
'plugin:@typescript-eslint/recommended',
],
rules: {
// == style
// tato pravidla jsou vypnutá a snižují tak přehnanou striktnost eslint-configu-standard
'semi': 'off', // Zakazuje pravidlo, které vyžaduje středníky na konci příkazů
'brace-style': 'off', // Zakazuje pravidlo pro konzistentní umístění složených závorek
'quote-props': 'off', // Zakazuje pravidlo pro konzistentní použití uvozovek v názvech vlastností objektů
'comma-dangle': 'off', // Zakazuje pravidlo vyžadující čárky za poslední položkou v objektech a polích
'func-call-spacing': 'off', // Zakazuje pravidlo pro kontrolu mezery mezi názvem funkce a závorkou při volání funkce
'operator-linebreak': 'off', // Zakazuje pravidlo pro umístění operátorů na nový řádek při zalomení
'object-curly-newline': 'off', // Zakazuje pravidlo pro konzistentní umístění nového řádku uvnitř složených závorek objektů
'array-bracket-spacing': 'off', // Zakazuje pravidlo pro konzistentní mezery kolem hranatých závorek polí
'space-before-function-paren': 'off', // Zakazuje pravidlo pro konzistentní mezery před závorkami ve funkčních deklaracích a výrazech
'no-alert': 'warn', // Varuje při použití funkce `alert`
'camelcase': ['error', { properties: 'always' }], // Vyžaduje camelCase styl pro názvy proměnných a vlastností objektů
'quotes': ['error', 'single', { allowTemplateLiterals: true }], // Vyžaduje jednoduché uvozovky pro řetězce, s výjimkou šablonových literálů
// == import
'import/no-default-export': 'error', // Zakazuje použití exportu `default`
'import/no-cycle': 'error', // Zakazuje importy, které by mohly způsobit cyklické závislosti
// == vue
'vue/html-self-closing': 'off', // Zakazuje pravidlo pro samo-zavírací prvky v HTML šablonách Vue.js
'vue/max-attributes-per-line': 'off', // Zakazuje pravidlo pro maximální počet atributů na jednom řádku
'vue/custom-event-name-casing': 'off', // Zakazuje pravidlo pro konzistentní pojmenování událostí vlastních komponent
'vue/multiline-html-element-content-newline': 'off', // Zakazuje pravidlo pro kontrolu nového řádku mezi obsahem a značkami v multiline HTML elementech
'vue/singleline-html-element-content-newline': 'off', // Zakazuje pravidlo pro kontrolu nového řádku mezi obsahem a značkami v jednořádkových HTML elementech
'vue/this-in-template': ['error', 'never'], // Zakazuje použití this v šablonách Vue.js
'vue/html-indent': ['error', 2, { alignAttributesVertically: false }], // Nastavuje odsazení v HTML šablonách Vue.js na 2 mezery a zakazuje svislé zarovnání atributů
// == logika
'no-case-declarations': 'off', // Zakazuje pravidlo pro kontrolu deklarací proměnných ve větvích příkazu switch
'getter-return': 'error', // Vyžaduje, aby všechny getter funkce měly návratovou hodnotu
'no-return-await': 'error', // Zakazuje zbytečné použití await uvnitř return
'no-nested-ternary': 'error', // Zakazuje zanořené ternární operátory
'array-callback-return': 'error', // Kontroluje, zda callback funkce metody pole má návratovou hodnotu
'no-param-reassign': ['error', {
props: true,
ignorePropertyModificationsFor: [
'vm', // pro manipulaci s Vue instancí, např. v router guardách
'acc', // pro akumulátory metody reduce
'state', // pro Vuex stav
'context', // pro kontext Nuxt
'scaleInstance', // pro manipulaci s grafy ChartJS
],
}], // Zakazuje přiřazování nových hodnot parametrům funkcí
// == tato pravidla jsou pokryta typescript-eslint pravidly, tudíž je v
'no-empty-function': 'off', // Zakazuje prázdné funkce
'no-unused-vars': 'off', // Zakazuje nepoužité proměnné
'no-shadow': 'off', // Zakazuje stínění proměnných
'indent': 'off', // Zakazuje pravidlo pro kontrolu odsazení
// == pravidla pro typescript
'@typescript-eslint/no-shadow': ['error', { allow: ['state'] }], // Zakazuje stínění proměnných, s výjimkou 'state'
'@typescript-eslint/func-call-spacing': ['error'], // Kontroluje mezery mezi názvem funkce a závorkou při volání funkce
'@typescript-eslint/no-explicit-any': 'off', // Zakazuje použití 'any' jako explicitního typu
'@typescript-eslint/no-empty-function': 'off', // Zakazuje prázdné funkce
'@typescript-eslint/no-inferrable-types': 'off', // Zakazuje explicitní typy, které by mohly být odvozeny
'@typescript-eslint/member-delimiter-style': 'off', // Zakazuje pravidlo pro kontrolu oddělovačů členů rozhraní a typových literalů
'@typescript-eslint/explicit-function-return-type': 'off', // Zakazuje pravidlo pro kontrolu explicitních návratových typů funkcí
'@typescript-eslint/explicit-module-boundary-types': 'off', // Zakazuje pravidlo pro kontrolu explicitních typů na hranicích modulů
'@typescript-eslint/no-object-literal-type-assertion': 'off', // Zakazuje použití objektových literálů pro přetypování
'@typescript-eslint/ban-ts-comment': 'warn', // Varuje před použitím @ts-ignore, @ts-nocheck, @ts-check a // @ts-expect-error
'@typescript-eslint/no-unused-vars': 'warn', // Varuje před nepoužitými proměnnými
'@typescript-eslint/indent': ['error', 2], // Nastavuje odsazení na 2 mezery pro TypeScript
// == production
'no-console': 'warn', // Varuje před použitím konzolových příkazů
'no-debugger': 'warn', // Varuje před použitím příkazu debugger
// ==
overrides: [
{
files: '**/*.+(vue)', // Specifikace souborů, na které se budou aplikovat následující pravidla
rules: {
'import/no-default-export': 'off', // Vypíná pravidlo 'import/no-default-export' pro soubory *.vue
}
}
]