@kgabryel-dev/code-quality

v1.0.0

Published

24 days ago

Shared code quality tools

Downloads

177

0High
0Medium
0Low

kgabryel-dev

@kgabryel/code-quality

Współdzielone konfiguracje ESLint, Prettier, Stylelint i TypeScript. Z dedykowanym wsparciem dla ekosystemów Vue 3 i Angular.

Spis treści

Główne założenia

@kgabryel/code-quality powstał z myślą o jednym standardzie jakości kodu w projektach TypeScript - zamiast rozproszonych plików konfiguracyjnych, które trudno trzymać w synchronizacji, pakiet agreguje, unifikuje i automatyzuje działanie czterech kluczowych narzędzi: ESLint, Prettier, Stylelint i TypeScript.

Instalacja i konfiguracja

npm install --save-dev @kgabryel/code-quality
npx code-quality

Skrypt prowadzi przez cały proces konfiguracji krok po kroku: od wyboru frameworka i instalacji zależności, przez kopiowanie plików konfiguracyjnych, po opcjonalne generowanie skryptów pomocniczych w package.json.

Przebieg konfiguracji

Wybór frameworka i środowiska projektu (Vue, Angular lub Base - czysty TypeScript). Determinuje zestaw instalowanych zależności, kształt plików konfiguracyjnych oraz specyfikę skryptów sprawdzania typów.
Wybór modułów (funkcji), czyli narzędzi, które trafią do projektu. Można dowolnie łączyć pozycje z listy: editorconfig, tsconfig, eslint, prettier, stylelint.
Ścieżka docelowa (Base path) - katalog, do którego mają trafić skopiowane konfiguracje (domyślnie katalog główny projektu, .).
Instalacja zależności - pytanie o automatyczne pobranie i instalację pakietów.
Tworzenie plików konfiguracyjnych - skrypt kopiuje gotowe, zoptymalizowane szablony konfiguracji (np. eslint.config.js, tsconfig.json, prettier.config.js wraz z .prettierignore) do projektu. Jeśli w katalogu docelowym istnieje już plik o tej samej nazwie, CLI zapyta o potwierdzenie nadpisania - nadpisywanie poszczególnych plików można też pominąć.
Decyzja o generowaniu skryptów - jeśli wybrano przynajmniej jeden moduł weryfikujący kod (tsconfig, eslint, prettier lub stylelint), skrypt zapyta o wygenerowanie pomocniczych skryptów powłoki (.sh). Odpowiedź przecząca kończy działanie skryptu w tym miejscu.
Środowisko skryptów - wybór miejsca uruchamiania generowanych skryptów: local (bezpośrednio na maszynie lokalnej) lub docker (polecenia zostaną automatycznie opakowane w instrukcję docker exec).
Tworzenie skryptów pomocniczych - generowanie plików wywołujących polecenia zainstalowanych narzędzi. Podobnie jak przy plikach konfiguracyjnych, istniejący już skrypt o tej samej nazwie wymaga potwierdzenia nadpisania, a poszczególne pliki można pominąć.

Opcje CLI

Opcje pozwalają pominąć interaktywne pytania i zautomatyzować konfigurację.

Framework

| Opcja | Opis | |-------------|---------------------------| | --vue | Wybiera framework Vue | | --angular | Wybiera framework Angular |

Instalacja zależności

| Opcja | Opis | |----------------|----------------------------------| | --install | Instaluje zależności bez pytania | | --no-install | Pomija instalację |

Skrypty

| Opcja | Opis | |---------------|---------------------------------------| | --docker | Generuje skrypty w wariancie Docker | | --no-docker | Generuje skrypty w wariancie lokalnym |

Opcje można łączyć dowolnie:

npx code-quality --vue --no-install --docker

Instalowane zależności

Skrypt instaluje tylko zależności potrzebne dla wybranych modułów i frameworka.

| Moduł | Zależności | |------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ESLint (wspólne) | eslint typescript-eslint @eslint/js eslint-config-prettier eslint-plugin-perfectionist eslint-plugin-sonarjs eslint-plugin-unused-imports globals | | ESLint (Vue) | eslint-plugin-vue eslint-plugin-vuetify postcss-html | | ESLint (Angular) | angular-eslint | | Prettier | prettier | | Stylelint | stylelint stylelint-config-standard-scss stylelint-order | | TypeScript | typescript |

Generowane skrypty pomocnicze (.sh)

W zależności od wybranych modułów oraz środowiska skrypt wygeneruje w katalogu bazowym pliki powłoki .sh do automatycznego sprawdzania i naprawiania kodu.

Wariant lokalny (local)

Generuje czyste polecenia uruchamiane przez npx:

| Skrypt | Moduł | Polecenie | |--------------------|----------------------|------------------------------------------------------| | lint.sh | eslint | npx eslint src | | lint-fix.sh | eslint | npx eslint src --fix | | prettier.sh | prettier | npx prettier --write . | | stylelint.sh | stylelint | npx stylelint "src/**/*.vue" "src/**/*.scss" | | stylelint-fix.sh | stylelint | npx stylelint "src/**/*.vue" "src/**/*.scss" --fix | | typecheck.sh | tsconfig (Vue) | npx vue-tsc --noEmit | | typecheck.sh | tsconfig (Angular) | npx tsc --noEmit |

Wariant kontenerowy (docker)

Jeśli wybrano środowisko Docker i podano nazwę kontenera (np. my-app-container), zawartość każdego z powyższych skryptów zostaje automatycznie opakowana w komendę proxy:

# Przykład zawartości pliku lint.sh w wariancie Docker
docker exec -it my-app-container sh -c 'npx eslint src'

ESLint

Konfiguracja ESLint opiera się na wzorcu buildera - createConfig() zwraca instancję buildera właściwego dla danego frameworka, a jego metody można ze sobą łączyć; get() kończy budowanie i zwraca gotową konfigurację.

Konfiguracja

Skrypt CLI kopiuje do projektu dwa pliki: eslint.config.js z konfiguracją dla wybranego typu projektu oraz tsconfig.eslint.json, rozszerzający główny tsconfig.json o pliki konfiguracyjne z katalogu głównego:

// tsconfig.eslint.json
{
  "extends": "./tsconfig.json",
  "include": ["*.ts", "*.js"]
}

Vue:

// eslint.config.js
import { createConfig, vueRules, vueExtends, vuePlugins } from '@kgabryel/code-quality/eslint/VueConfigBuilder';
import tseslint from 'typescript-eslint';
import globals from 'globals';
import { vueOrderConfig } from '@kgabryel/code-quality/eslint/plugins/vue-order/example.config';

const config = createConfig()
  .useTsConfig('./tsconfig.eslint.json')  // wczytywanie plików i reguł ignorowania na podstawie tsconfig, błąd przerywa proces
  .setRules(vueRules)                     // zestaw reguł dla Vue
  .setExtends(vueExtends)                 // zestawy reguł (presety) dla Vue (eslint-plugin-vue, vuetify itp.)
  .setPlugins(vuePlugins(vueOrderConfig)) // przekazanie konfiguracji vueOrderConfig do pluginu vue-order
  .setLanguageOptions({
    globals: {
      ...globals.browser,
    },
    parserOptions: {
      parser: tseslint.parser,
      project: ['./tsconfig.eslint.json'],
      tsconfigRootDir: import.meta.dirname,
      extraFileExtensions: ['.vue'],
    },
  });

export default config.get();

Angular:

// eslint.config.js
import {
  createConfig,
  angularRules,
  angularExtends,
  angularPlugins,
  templateConfig,                        // gotowy blok reguł dla plików **/*.html
} from '@kgabryel/code-quality/eslint/AngularConfigBuilder';
import globals from 'globals';

const config = createConfig()
  .useTsConfig('./tsconfig.eslint.json') // wczytywanie plików i reguł ignorowania na podstawie tsconfig, błąd przerywa proces
  .setRules(angularRules)                // zestaw reguł dla Angulara
  .setExtends(angularExtends)            // zestawy reguł (presety) dla Angulara (angular-eslint itp.)
  .setPlugins(angularPlugins)            // pluginy dla Angulara (perfectionist, sonarjs, unused-imports)
  .setLanguageOptions({
    globals: { ...globals.browser },
    parserOptions: {
      project: ['./tsconfig.eslint.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  })
  .setPrefixes(['app'])                  // dozwolone prefiksy dla selektorów komponentów i dyrektyw
  .addOverride(templateConfig);          // reguły dla **/*.html - zalecane, niewymagane

export default config.get();

Pominięcie addOverride(templateConfig) sprawi, że pliki **/*.html nie będą sprawdzane przez ESLint.

Base:

// eslint.config.js
import { createConfig, baseRules, baseExtends, basePlugins } from '@kgabryel/code-quality/eslint/BaseConfigBuilder';
import globals from 'globals';

const config = createConfig()
  .useTsConfig('./tsconfig.eslint.json') // wczytywanie plików i reguł ignorowania na podstawie tsconfig, błąd przerywa proces
  .setRules(baseRules)                   // zestaw reguł dla TypeScript
  .setExtends(baseExtends)               // bazowe zestawy reguł (eslint, typescript-eslint, prettier)
  .setPlugins(basePlugins)               // pluginy (perfectionist, sonarjs, unused-imports)
  .setLanguageOptions({
    globals: { ...globals.browser },
    parserOptions: {
      project: ['./tsconfig.eslint.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  });

export default config.get();

Pełny opis reguł jest w sekcjach Reguły Vue, Reguły Angulara i Reguły Base.

Builder

| Metoda | Opis | |-------------------------------|------------------------------------------------------------------------------| | addOverride(config) | Dodaje dodatkowy blok konfiguracyjny dla wybranego zestawu plików | | removeRule(rule) | Usuwa regułę z zestawu | | setExtends(config) | Ustawia tablicę presetów | | setIgnoresFiles(ignores) | Ustawia pliki i katalogi ignorowane przez ESLint | | setLanguageOptions(options) | Ustawia opcje języka (globals, parserOptions) | | setPlugins(plugins) | Ustawia obiekt z pluginami | | setRule(rule, config) | Dodaje lub nadpisuje pojedynczą regułę bez zmiany pozostałych | | setRules(rules) | Zastępuje cały zestaw reguł | | setWatchedFiles(files) | Ustawia pliki sprawdzane przez ESLint | | useTsConfig(configPath) | Ustawia sprawdzane i ignorowane pliki i katalogi na podstawie pliku tsconfig | | get() | Zwraca finalną tablicę obiektów flat config |

AngularConfigBuilder - dodatkowa metoda:

| Metoda | Opis | |-------------------------|--------------------------------------------------------------------------------------------------------------------------------------------| | setPrefixes(prefixes) | Ustawia dozwolone prefiksy selektorów komponentów (@angular-eslint/component-selector) i dyrektyw (@angular-eslint/directive-selector) |

Dostosowanie

Reguły

Dodawanie i nadpisywanie - setRule zostawia pozostałe reguły bez zmian:

createConfig()
  .setRules(vueRules)
  .setRule('max-lines', ['warn', { max: 300 }]) // nadpisanie
  .setRule('no-alert', 'error');                // nowa reguła

Usuwanie:

createConfig()
  .setRules(vueRules)
  .removeRule('no-console');                    // usuwa regułę no-console

Overrides

addOverride dodaje osobny blok konfiguracyjny dla wybranego zestawu plików - działa dokładnie tak samo jak templateConfig w konfiguracji Angulara:

createConfig()
  .setRules(vueRules)
  // ...
  .addOverride({
    files: ['**/*.spec.ts'],
    rules: {
      'max-lines': 'off',
      'no-console': 'off',
    },
  });

Plugin vue-order

Plugin vue-order pilnuje kolejności bloków kodu w plikach .vue (<script setup>) i .ts - composables, store Pinia, serwisy. Konfigurację przekazuje się przez vuePlugins:

import { vueOrderConfig } from '@kgabryel/code-quality/eslint/plugins/vue-order/example.config';

.setPlugins(vuePlugins(vueOrderConfig))

Bez argumentów vuePlugins() korzysta z pustej konfiguracji, co wyłącza plugin vue-order i automatycznie usuwa powiązane z nim reguły. Pełna dokumentacja: vue-order/README.md.

Prettier

Skrypt CLI kopiuje do projektu dwa pliki: prettier.config.js z importem odpowiedniej konfiguracji oraz .prettierignore z domyślną listą wykluczeń.

// prettier.config.js
import vueConfig from '@kgabryel/code-quality/prettier/vue';

export default {
  ...vueConfig,
};

Importowana konfiguracja zawiera gotowy zestaw opcji Prettiera. Warianty base i angular konfiguruje się tak samo

wystarczy zmienić ścieżkę importu na @kgabryel/code-quality/prettier/base lub @kgabryel/code-quality/prettier/angular. Pełny opis reguł oraz zawartość .prettierignore są w sekcjach Reguły Vue, Reguły Angulara i Reguły Base.

Dostosowanie

Opcje

Dodawanie i nadpisywanie - klucz podany po rozwinięciu ma pierwszeństwo nad oryginałem:

import vueConfig from '@kgabryel/code-quality/prettier/vue';

export default {
  ...vueConfig,
  printWidth: 120,               // nadpisanie
  vueIndentScriptAndStyle: true, // nowa reguła
};

Usuwanie:

import baseConfig from '@kgabryel/code-quality/prettier/base';

const config = { ...baseConfig }; // usunięcie z oryginału (delete) zmodyfikowałoby importowany moduł
delete config.printWidth;

export default config;

Overrides

Dodawanie i nadpisywanie - overrides to tablica, więc rozszerza się ją przez spread, zamiast zastępować w całości:

import vueConfig from '@kgabryel/code-quality/prettier/vue';

export default {
  ...vueConfig,
  overrides: [
    ...vueConfig.overrides,
    {
      files: '*.json',
      options: {
        printWidth: 80,
        tabWidth: 2,
      },
    },
  ],
};

Prettier stosuje nadpisania overrides po kolei. Ostatni pasujący wzorzec nadpisuje poprzednie. Dopisanie reguły na końcu gwarantuje jej priorytet nad wpisami bazowymi. Istniejące nadpisanie modyfikuje się tak samo, wskazując ten sam wzorzec files.

Stylelint

Skrypt CLI kopiuje do projektu plik stylelint.config.js, rozszerzający odpowiednią konfigurację.

// stylelint.config.js
export default {
  extends: ['@kgabryel/code-quality/stylelint/vue'],
};

Warianty base i angular konfiguruje się tak samo - wystarczy zmienić ścieżkę w tablicy extends na @kgabryel/code-quality/stylelint/base lub @kgabryel/code-quality/stylelint/angular. Pełny opis reguł jest w sekcjach Reguły Vue, Reguły Angulara i Reguły Base.

Dostosowanie

Reguły

Dodawanie i nadpisywanie - klucz w rules podany po extends ma pierwszeństwo:

export default {
  extends: ['@kgabryel/code-quality/stylelint/vue'],
  rules: {
    'max-nesting-depth': 5,       // nadpisanie istniejącej
    'color-no-invalid-hex': true, // dodanie nowej
  },
};

Usuwanie - w Stylelint do wyłączania reguły służy oficjalnie wartość null:

export default {
  extends: ['@kgabryel/code-quality/stylelint/vue'],
  rules: {
    'block-no-empty': null,
  },
};

TypeScript

Skrypt CLI kopiuje do projektu plik tsconfig.json, rozszerzający odpowiednią konfigurację.

Vue:

// tsconfig.json
{
  "extends": "@kgabryel/code-quality/tsconfig/vue.json",
  "compilerOptions": {
    "baseUrl": ".",                                        // katalog główny projektu jako baza ścieżek, wymagane przy używaniu paths
    "paths": {
      "@/*": ["./src/*"]                                  // tylko dla TypeScript i IDE, wymaga też aliasu w vite.config.ts
    }
  },
  "include": ["src/**/*.ts", "src/**/*.vue", "env.d.ts"], // pliki uwzględniane przy kompilacji
  "exclude": ["node_modules", "dist"]                     // katalogi pomijane przy kompilacji
}

Angular:

// tsconfig.json
{
  "extends": "@kgabryel/code-quality/tsconfig/angular.json",
  "compilerOptions": {
    "baseUrl": ".",                               // katalog główny projektu jako baza ścieżek, wymagane przy używaniu paths
    "paths": {
      "@/*": ["./src/*"]                          // alias @/... → src/...
    }
  },
  "include": ["src/**/*.ts"],                     // pliki uwzględniane przy kompilacji
  "exclude": ["node_modules", "dist", ".angular"] // katalogi pomijane przy kompilacji
}

Base:

// tsconfig.json
{
  "extends": "@kgabryel/code-quality/tsconfig/base.json",
  "compilerOptions": {
    "baseUrl": "."                    // katalog główny projektu jako baza ścieżek
  },
  "include": ["src/**/*.ts"],         // pliki uwzględniane przy kompilacji
  "exclude": ["node_modules", "dist"] // katalogi pomijane przy kompilacji
}

Pełny opis opcji kompilatora jest w sekcjach Reguły Vue, Reguły Angulara i Reguły Base.

Dostosowanie

Dodawanie i nadpisywanie - opcje w compilerOptions projektu mają pierwszeństwo przed tymi z extends:

{
  "extends": "@kgabryel/code-quality/tsconfig/vue.json",
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ES2020",   // nadpisanie
    "paths": {
      "@/*": ["./src/*"]  // dodanie
    }
  }
}

Wyłączanie flag - TypeScript nie pozwala usunąć opcji odziedziczonej po extends, można ją jedynie nadpisać:

{
  "extends": "@kgabryel/code-quality/tsconfig/base.json",
  "compilerOptions": {
    "baseUrl": ".",
    "noUnusedLocals": false,
    "noUncheckedIndexedAccess": false
  }
}

Reguły Vue

ESLint

| Preset | |------------------------------------------------------------------------------------------------| | eslint/recommended | | typescript-eslint/recommended | | typescript-eslint/stylistic | | eslint-config-prettier | | eslint-plugin-vue/flat/recommended | | eslint-plugin-vuetify/flat/base | | eslint-plugin-vuetify/flat/recommended |

Aktywne

| Reguła | Opis | |----------------------------------------------------|---------------------------------------------------------------------------------------------------------| | @typescript-eslint/ban-ts-comment | Zabrania komentarzy @ts-ignore, @ts-nocheck i podobnych | | @typescript-eslint/consistent-type-imports | Wymaga import type dla importów zawierających wyłącznie typy | | @typescript-eslint/explicit-function-return-type | Jawny typ zwracany funkcji, bez wnioskowania | | @typescript-eslint/no-deprecated | Zgłasza błąd przy API oznaczonym jako @deprecated | | @typescript-eslint/no-duplicate-enum-values | Zabrania definiowania tych samych wartości dla różnych kluczy wewnątrz jednego enuma | | @typescript-eslint/no-empty-function | Zabrania pustych funkcji bez ciała | | @typescript-eslint/no-empty-object-type | Zabrania tworzenia pustych interfejsów oraz typów obiektowych (zapobiega niebezpiecznemu używaniu {}) | | @typescript-eslint/no-explicit-any | Zabrania użycia any | | @typescript-eslint/no-floating-promises | Każdy Promise musi być obsłużony (await, .catch, void) | | @typescript-eslint/no-unused-vars | Błąd przy nieużywanych zmiennych; zmienne z prefiksem _ są wykluczone | | @typescript-eslint/no-non-null-assertion | Zabrania używania operatora non-null assertion (!), który omija system typów podobnie jak any | | comma-dangle | Wymaga przecinka po ostatnim elemencie w wieloliniowych strukturach | | eol-last | Wymaga pustej linii na końcu każdego pliku | | max-lines | Maksymalnie 200 linii na plik (bez pustych i komentarzy) | | no-console | Zabrania console.log i console.info; dozwolone tylko warn i error | | padding-line-between-statements | Pusta linia: po bloku importów, przed export, przed return, przed blokiem po zmiennej | | perfectionist/sort-enums | Sortuje wartości enumów rosnąco | | perfectionist/sort-exports | Sortuje eksporty z pliku rosnąco | | perfectionist/sort-imports | Sortuje bloki importów rosnąco | | perfectionist/sort-objects | Sortuje klucze obiektów literałowych rosnąco | | quotes | Wymaga pojedynczych cudzysłowów | | semi | Wymaga średników na końcu instrukcji | | sonarjs/cognitive-complexity | Maksymalna złożoność kognitywna funkcji: 10 | | spaced-comment | Wymaga spacji po // i /* w komentarzach | | unused-imports/no-unused-imports | Błąd przy nieużywanych importach | | @typescript-eslint/typedef | Jawne adnotacje typów dla parametrów arrow function, zmiennych, właściwości i parametrów metod | | vue-order/vue-order | Wymusza skonfigurowaną kolejność bloków w <script setup> i plikach .ts | | vue/block-order | Kolejność bloków SFC: <script> → <template> → <style> | | vue/component-name-in-template-casing | Nazwy komponentów w szablonach muszą być w PascalCase | | vue/no-unused-vars | Błąd przy nieużywanych zmiennych w dyrektywach v-for i v-slot | | vue/no-v-html | Zabrania v-html (ryzyko XSS) | | vue/order-in-components | Wymagana kolejność opcji w komponentach Options API | | vue/padding-line-between-blocks | Wymaga pustej linii między blokami <script>, <template>, <style> |

Wyłączone

| Reguła | Opis | |------------------------------------------|---------------------------------------------------------------| | @typescript-eslint/no-inferrable-types | Jawne adnotacje typów przy inferowanych wartościach dozwolone |

Prettier

| Opcja | Wartość | Opis | |------------------------------|---------------|--------------------------------------------------------------------------| | arrowParens | 'always' | Nawiasy wokół parametru arrow function zawsze: (x) => x | | bracketSameLine | false | Zamykający > znacznika JSX/HTML w nowej linii | | bracketSpacing | true | Spacje wewnątrz nawiasów klamrowych: { foo: bar } | | embeddedLanguageFormatting | 'auto' | Automatyczne formatowanie języków osadzonych (SQL, CSS w JS itp.) | | endOfLine | 'lf' | Końce linii w stylu Unix (LF) | | htmlWhitespaceSensitivity | 'ignore' | Białe znaki w HTML ignorowane przy formatowaniu | | jsxSingleQuote | false | Podwójne cudzysłowy w atrybutach JSX | | printWidth | 120 | Maksymalna długość linii | | proseWrap | 'preserve' | Zawijanie tekstu w Markdown pozostawione bez zmian | | quoteProps | 'as-needed' | Cudzysłowy przy kluczach obiektów tylko gdy konieczne | | semi | true | Średniki na końcu instrukcji | | singleAttributePerLine | true | Każdy atrybut HTML/JSX w osobnej linii | | singleQuote | true | Pojedyncze cudzysłowy w JS/TS | | tabWidth | 2 | Wcięcia o szerokości 2 spacji | | trailingComma | 'all' | Przecinek po ostatnim elemencie we wszystkich wieloliniowych strukturach | | useTabs | false | Spacje zamiast tabulatorów |

| Ignorowane pliki | |-------------------| | node_modules | | dist | | package-lock.json |

Stylelint

| Reguła | Wartość | Opis | |---------------------------------------------|-----------------|----------------------------------------------------------------------| | stylelint-config-standard-scss | preset | Standardowe reguły SCSS (nomenklatura, formatowanie, kompatybilność) | | block-no-empty | true | Zabrania pustych bloków CSS/SCSS | | color-hex-length | 'short' | Wymaga skróconej formy hex: #fff zamiast #ffffff | | declaration-block-no-duplicate-properties | true | Zabrania powtarzania tej samej właściwości w jednym bloku | | max-nesting-depth | 3 | Maksymalne zagłębienie selektorów: 3 poziomy | | order/properties-alphabetical-order | true | Właściwości CSS/SCSS muszą być posortowane alfabetycznie | | scss/at-mixin-pattern | ^[a-z0-9\-]+$ | Nazwy mixinów: tylko małe litery, cyfry i myślniki | | scss/dollar-variable-pattern | ^[a-z0-9\-]+$ | Zmienne SCSS: tylko małe litery, cyfry i myślniki | | scss/load-no-partial-leading-underscore | true | Zabrania podkreślnika w ścieżkach @use i @forward | | scss/percent-placeholder-pattern | ^[a-z0-9\-]+$ | Placeholder selektory (%name): tylko małe litery, cyfry i myślniki | | selector-class-pattern | null | Wyłączone, konwencja nazewnictwa klas CSS nie jest wymuszana | | selector-pseudo-class-no-unknown | true | Zezwala na :deep, :global, :slotted (pseudoklasy Vue) | | selector-pseudo-element-no-unknown | true | Zezwala na ::deep, ::global, ::slotted (pseudoklasy Vue) |

TypeScript

| Opcja | Wartość | Opis | |--------------------------------------|-------------------------------------|---------------------------------------------------------------------------| | target | "ES2022" | Cel kompilacji, generowany kod zgodny z ES2022 | | moduleResolution | "bundler" | Rozwiązywanie modułów przez bundler (Vite, webpack) | | alwaysStrict | true | Tryb strict ECMAScript aktywny w każdym pliku | | strict | true | Włącza wszystkie flagi strict TypeScript | | declaration | false | Nie generuje plików deklaracji .d.ts | | esModuleInterop | true | Interoperacyjność importów CommonJS i ESM | | exactOptionalPropertyTypes | true | Właściwości opcjonalne (?) nie mogą być jawnie ustawione na undefined | | forceConsistentCasingInFileNames | true | Spójna wielkość liter w importowanych nazwach plików | | noFallthroughCasesInSwitch | true | Błąd przy brakującym break lub return w switch | | noImplicitAny | true | Zgłasza błąd, gdy typ niejawnie przyjmuje wartość any | | noImplicitReturns | true | Funkcja musi zwracać wartość we wszystkich ścieżkach kodu | | sourceMap | true | Generuje pliki .map dla debugowania | | noImplicitOverride | true | Nadpisane metody muszą być oznaczone słowem override | | noUnusedLocals | true | Błąd przy nieużywanych zmiennych lokalnych | | noUncheckedIndexedAccess | true | Dostęp przez indeks (arr[i]) może zwrócić undefined | | noPropertyAccessFromIndexSignature | true | Właściwości z index signature wymagają notacji nawiasowej | | module | "ESNext" | Format modułów ESNext | | lib | ["ES2022", "DOM", "DOM.Iterable"] | Dostępne biblioteki typów, ES2022 + DOM | | allowSyntheticDefaultImports | true | Domyślne importy z modułów bez export default | | jsx | "preserve" | Zachowuje JSX bez transpilacji (Vue obsługuje go własnym kompilatorem) | | isolatedModules | true | Każdy plik traktowany niezależnie (wymagane przez Vite/esbuild) | | skipLibCheck | true | Pomija sprawdzanie typów w plikach .d.ts | | useDefineForClassFields | true | Pola klasy definiowane przez Object.defineProperty |

Reguły Angulara

ESLint

Reguły dla plików .ts:

| Preset | |--------------------------------------------------------------------------------------------| | eslint/recommended | | typescript-eslint/recommended | | typescript-eslint/stylistic | | eslint-config-prettier | | angular-eslint/tsRecommended |

Aktywne

| Reguła |----------------------------------------------- | @typescript-eslint/ban-ts-comment | @typescript-eslint/consistent-type-imports | @typescript-eslint/explicit-function-ret | @typescript-eslint/no-deprecated | @typescript-eslint/no-duplicate-enum-values | @typescript-eslint/no-empty-function | @typescript-eslint/no-empty-object-type | @typescript-eslint/no-explicit-any | @typescript-eslint/no-floating-promises | @typescript-eslint/no-non-null-assertion | @typescript-eslint/no-unused-vars | comma-dangle | eol-last | max-lines | no-console | padding-line-between-statements | perfectionist/sort-enums | perfectionist/sort-exports | perfectionist/sort-imports | perfectionist/sort-objects | quotes | semi | sonarjs/cognitive-complexity | spaced-comment | unused-imports/no-unused-imports | @angular-eslint/component-selector | @angular-eslint/directive-selector | @angular-eslint/no-empty-lifecycle-method | @angular-eslint/use-lifecycle-interface | @typescript-eslint/explicit-member-acces | @typescript-eslint/member-ordering | @typescript-eslint/typedef | sonarjs/no-duplicate-string | Opis | -----|---------------------------------------------------------------------------------------------------------| | Zabrania komentarzy @ts-ignore, @ts-nocheck i podobnych | | Wymaga import type dla importów zawierających wyłącznie typy | urn-type | Jawny typ zwracany funkcji, bez wnioskowania | | Zgłasza błąd przy API oznaczonym jako @deprecated | | Zabrania definiowania tych samych wartości dla różnych kluczy wewnątrz jednego enuma | | Zabrania pustych funkcji bez ciała | | Zabrania tworzenia pustych interfejsów oraz typów obiektowych (zapobiega niebezpiecznemu używaniu {}) | | Zabrania użycia any | | Każdy Promise musi być obsłużony (await, .catch, void) | | Zabrania używania operatora non-null assertion (!), który omija system typów podobnie jak any | | Błąd przy nieużywanych zmiennych; zmienne z prefiksem _ są wykluczone | | Wymaga przecinka po ostatnim elemencie w wieloliniowych strukturach | | Wymaga pustej linii na końcu każdego pliku | | Maksymalnie 200 linii na plik (bez pustych i komentarzy) | | Zabrania console.log i console.info; dozwolone tylko warn i error | | Pusta linia: po bloku importów, przed export, przed return, przed blokiem po zmiennej | | Sortuje wartości enumów rosnąco | | Sortuje eksporty z pliku rosnąco | | Sortuje bloki importów rosnąco | | Sortuje klucze obiektów literałowych rosnąco | | Wymaga pojedynczych cudzysłowów | | Wymaga średników na końcu instrukcji | | Maksymalna złożoność kognitywna funkcji: 10 | | Wymaga spacji po // i /* w komentarzach | | Błąd przy nieużywanych importach | | Komponenty (elementy) muszą mieć prefiks app i styl kebab-case | | Dyrektywy atrybutowe muszą mieć prefiks app i styl camelCase | | Zabrania pustych metod lifecycle Angulara | | Wymaga implementacji interfejsów lifecycle (OnInit, OnDestroy itp.) | sibility | Jawny modyfikator dostępu (public, private, protected) dla każdego członka klasy | | Kolejność w klasie: pola statyczne → z dekoratorem → instancji → konstruktor → metody | | Jawne typy wyłącznie dla parametrów arrow function (pozostałe adnotacje wyłączone) | | Błąd przy zduplikowanych literałach tekstowych w kodzie |

Wyłączone

Reguły dla plików **/*.html (przez templateConfig):

| Preset | |--------------------------------------------------------------------------------------------| | angular-eslint/templateRecommended | | angular-eslint/templateAccessibility |

Aktywne

| Reguła | Opis | |--------------------------------------------------|--------------------------------------------------------------------------| | @angular-eslint/template/cyclomatic-complexity | Maksymalna złożoność cyklomatyczna szablonu: 10 | | @angular-eslint/template/eqeqeq | Wymaga === zamiast == w wyrażeniach szablonu | | @angular-eslint/template/no-any | Zabrania rzutowania $any() w szablonach | | @angular-eslint/template/no-negated-async | Zapobiega błędnej negacji obiektów Observable przed użyciem async pipe |

Wyłączone

| Reguła | Opis | |---------------------------------------------------------|------------------------------------------------------| | @angular-eslint/template/click-events-have-key-events | Klawiaturowe odpowiedniki kliknięć nie są wymagane | | @angular-eslint/template/interactive-supports-focus | Fokus na interaktywnych elementach nie jest wymagany | | @angular-eslint/template/no-inline-styles | Style inline są dozwolone |

Prettier

Dedykowane nadpisania (Overrides)

| Pliki | Opcja | Wartość | Opis | |--------------------|----------|-------------|----------------------------------------------------------------------| | *.component.html | parser | 'angular' | Wymusza użycie parsera Angulara do poprawnego formatowania szablonów |

| Ignorowane pliki | |-------------------| | node_modules | | dist | | package-lock.json | | .angular |

Stylelint

| Reguła | Wartość | Opis | |---------------------------------------------|-----------------|----------------------------------------------------------------------| | stylelint-config-standard-scss | preset | Standardowe reguły SCSS (nomenklatura, formatowanie, kompatybilność) | | block-no-empty | true | Zabrania pustych bloków CSS/SCSS | | color-hex-length | 'short' | Wymaga skróconej formy hex: #fff zamiast #ffffff | | declaration-block-no-duplicate-properties | true | Zabrania powtarzania tej samej właściwości w jednym bloku | | max-nesting-depth | 3 | Maksymalne zagłębienie selektorów: 3 poziomy | | order/properties-alphabetical-order | true | Właściwości CSS/SCSS muszą być posortowane alfabetycznie | | scss/at-mixin-pattern | ^[a-z0-9\-]+$ | Nazwy mixinów: tylko małe litery, cyfry i myślniki | | scss/dollar-variable-pattern | ^[a-z0-9\-]+$ | Zmienne SCSS: tylko małe litery, cyfry i myślniki | | scss/load-no-partial-leading-underscore | true | Zabrania podkreślnika w ścieżkach @use i @forward | | scss/percent-placeholder-pattern | ^[a-z0-9\-]+$ | Placeholder selektory (%name): tylko małe litery, cyfry i myślniki | | selector-class-pattern | null | Wyłączone, konwencja nazewnictwa klas CSS nie jest wymuszana | | selector-pseudo-class-no-unknown | true | Zezwala na :ng-deep | | selector-pseudo-element-no-unknown | true | Zezwala na ::ng-deep |

TypeScript

| Opcja | Wartość | Opis | |----------------------------------------------------------|---------------------|---------------------------------------------------------------------------| | target | "ES2022" | Cel kompilacji, generowany kod zgodny z ES2022 | | moduleResolution | "bundler" | Rozwiązywanie modułów przez bundler (Vite, webpack) | | alwaysStrict | true | Tryb strict ECMAScript aktywny w każdym pliku | | strict | true | Włącza wszystkie flagi strict TypeScript | | declaration | false | Nie generuje plików deklaracji .d.ts | | esModuleInterop | true | Interoperacyjność importów CommonJS i ESM | | exactOptionalPropertyTypes | true | Właściwości opcjonalne (?) nie mogą być jawnie ustawione na undefined | | forceConsistentCasingInFileNames | true | Spójna wielkość liter w importowanych nazwach plików | | noFallthroughCasesInSwitch | true | Błąd przy brakującym break lub return w switch | | noImplicitAny | true | Zgłasza błąd, gdy typ niejawnie przyjmuje wartość any | | noImplicitReturns | true | Funkcja musi zwracać wartość we wszystkich ścieżkach kodu | | sourceMap | true | Generuje pliki .map dla debugowania | | noImplicitOverride | true | Nadpisane metody muszą być oznaczone słowem override | | noUnusedLocals | true | Błąd przy nieużywanych zmiennych lokalnych | | noUncheckedIndexedAccess | true | Dostęp przez indeks (arr[i]) może zwrócić undefined | | noPropertyAccessFromIndexSignature | true | Właściwości z index signature wymagają notacji nawiasowej | | experimentalDecorators | true | Wsparcie dla dekoratorów Angulara (@Component, @Injectable itp.) | | importHelpers | true | Importuje helpery TypeScript z tslib zamiast je inlinować | | module | "ES2022" | Format modułów ES2022 | | lib | ["ES2022", "DOM"] | Dostępne biblioteki typów, ES2022 + DOM | | skipLibCheck | true | Pomija sprawdzanie typów w plikach .d.ts | | useDefineForClassFields | false | Pola klasy przypisywane przez assign (kompatybilność z dekoratorami) | | strictPropertyInitialization | false | Wyłączone, właściwości klasy nie muszą być inicjalizowane w konstruktorze | | angularCompilerOptions.enableI18nLegacyMessageIdFormat | false | Nowy format ID wiadomości i18n | | angularCompilerOptions.strictInjectionParameters | true | Weryfikacja typów parametrów wstrzykiwanych przez DI | | angularCompilerOptions.strictInputAccessModifiers | true | Weryfikacja modyfikatorów dostępu w bindowaniu @Input | | angularCompilerOptions.strictTemplates | true | Pełne sprawdzanie typów w szablonach HTML |

Reguły Base

ESLint

Aktywne

Wyłączone

Prettier

| Ignorowane pliki | |-------------------| | node_modules | | package-lock.json |

Stylelint

TypeScript

| Opcja | Wartość | Opis | |--------------------------------------|-------------|---------------------------------------------------------------------------| | target | "ES2022" | Cel kompilacji, generowany kod zgodny z ES2022 | | moduleResolution | "bundler" | Rozwiązywanie modułów przez bundler (Vite, webpack) | | alwaysStrict | true | Tryb strict ECMAScript aktywny w każdym pliku | | strict | true | Włącza wszystkie flagi strict TypeScript | | declaration | false | Nie generuje plików deklaracji .d.ts | | esModuleInterop | true | Interoperacyjność importów CommonJS i ESM | | exactOptionalPropertyTypes | true | Właściwości opcjonalne (?) nie mogą być jawnie ustawione na undefined | | forceConsistentCasingInFileNames | true | Spójna wielkość liter w importowanych nazwach plików | | noFallthroughCasesInSwitch | true | Błąd przy brakującym break lub return w switch | | noImplicitAny | true | Zgłasza błąd, gdy typ niejawnie przyjmuje wartość any | | noImplicitReturns | true | Funkcja musi zwracać wartość we wszystkich ścieżkach kodu | | sourceMap | true | Generuje pliki .map dla debugowania | | noImplicitOverride | true | Nadpisane metody muszą być oznaczone słowem override | | noUnusedLocals | true | Błąd przy nieużywanych zmiennych lokalnych | | `noUncheckedIn

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@kgabryel/code-quality

Spis treści

Główne założenia

Instalacja i konfiguracja

Przebieg konfiguracji

Opcje CLI

Instalowane zależności

Generowane skrypty pomocnicze (.sh)

Wariant lokalny (local)

Wariant kontenerowy (docker)

ESLint

Konfiguracja

Builder

Dostosowanie

Reguły

Overrides

Plugin vue-order

Prettier

Dostosowanie

Opcje

Overrides

Stylelint

Dostosowanie

Reguły

TypeScript

Dostosowanie

Reguły Vue

ESLint

Prettier

Stylelint

TypeScript

Reguły Angulara

ESLint

Prettier

Stylelint

TypeScript

Reguły Base

ESLint

Prettier

Stylelint

TypeScript