Zpět

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
    }
  }
]