Powrót do strony głównejCypressAnywhere.ioO autorze
Powrót

Konfiguracja Cypress - część 1

Instalacja dodatkowych narzędzi ułatwiających pracę z projektem w Cypress

Obecnie nasz Cypress jest zainstalowany, jednak jest to minimalna konfiguracja, którą warto wzbogacić. W tym poście zajmę się:
  1. Konfiguracją sekcji scripts w package.json
  2. Instalacją Prettier
  3. Instalacją ESLint
  4. Instalacją paczki eslint-config-prettier
  5. Konfiguracją VS-Code

1. Konfiguracja sekcji scripts w package.json

Sekcja script w pliku package.json, służy do definiowania skryptów, które ułatwią nam uruchomienie dłuższych poleceń. Dodajmy tam jako pierwszy, następujący skrypt:"cypress:open": "npx run cypress open"

Dzięki niemu, aby uruchomić Cypressa, od tej pory, wydajemy w terminalu polecenie:npm run cypress:open

2. Instalacja Prettier

Prettier to narzędzie do testów statycznych kodu, które poprawia, jak sama nazwa wskazuje, jego wizualny aspekt: wcięcia, spacje, średniki, odstępy itp. Aby go zainstalować, otwórz w terminalu katalog ze swoim projektem i wykonaj poniższe kroki:npm install --save-dev --save-exact prettier

Następnie tworzymy plik .prettierc i umieszczamy w nim następującą zawartość:
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Na koniec dodajemy kolejny skrypt do pliku package.json, który będzie odpowiadał za uruchomienie prettiera:"prettier": "npx prettier -w ."

Od teraz, gdy wydamy w terminalu polecenie:npm run prettierPrettier przeskanuje nasz kod i naprawi wykryte błędy.

3. Instalacja ESLint

ESLint to narzędzie do testów statycznych kodu, które poprawia nasz kod pod względem zgodności ze standardami i dobrymi praktykami w JavaScript. Aby go zainstalować, otwórz w terminalu katalog ze swoim projektem i wykonaj poniższe kroki:npm install eslint --save-dev

Następnie wykonaj polecenie:npx eslint --initTeraz trzeba odpowiedzieć na kilka prostych pytań, które pojawią się w terminalu. Odpowiadając kolejno:

  • To check syntax and find problems
  • JavaScript modules (import/export)
  • None of these
  • No
  • Node
  • JSON

W głównym katalogu projektu, został dodany automatycznie, plik konfiguracyjny .eslintrc.json, do którego dodajemy linię "root":true, aby zawartość pliku wyglądała następująco:

{
  "root": true,
  "env":
  {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions":
  {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules":
  {
  }
}

Na koniec dodajemy kolejny skrypt do pliku package.json, który będzie odpowiadał za uruchomienie ESLinta."lint": "npx eslint --fix"

Od teraz, gdy wydamy w terminalu polecenie:npm run lintESLint przeskanuje nasz kod i naprawi wykryte błędy.

4. ESLint Config Prettier

Twórcy Prettier zalecają użycie paczki eslint-config-prettier, jeżeli korzystamy jednocześnie z ESLint oraz Prettier. Aby to zrobić, wykonujemy kroki:npm install --save-dev eslint-config-prettier

Następnie w pliku .eslintrc.json do tablicy extends, dodajemy pole "prettier" oraz pole (wraz z jego wartością) "no-undef": 0, aby finalnie plik wyglądał następująco:
{
  "root": true,
  "env":
  {
    "browser": true,
    "es2021": true
  },
  "extends":
  [
    "eslint:recommended",
    "prettier"
  ],
  "parserOptions":
  {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules":
  {
    "no-undef": 0
  }
}

Reguła "no-undef": 0 pełni istotną rolę. Dodanie jej spowoduje, że ESLint nie będzie pokazywał nam nieprawidłowych błędów undefined, dotyczących komend Cypressa, jak np. describe, it, xit, cy itp.

4. Konfiguracja VS Code

Zaczniemy od kodowania plików.

Jeżeli na dolnym pasku programu, w miejscu w którym widnieje UTF-8, masz inne kodowanie, to kliknij je. Następnie wybierz 'Save with encoding' i wybierz 'UTF-8'.

Teraz przechodzimy do integracji z Prettier. Najpierw należy zainstalować wtyczkę "Prettier - Code formatter". Następnie przechodzimy do 'File/Preferences/Settings' i wyszukujemy frazę 'format'. Teraz w 'Editor: Default Formatter' wybieramy 'esbnp.prettier-vscode' i zaznaczamy opcję 'Editor: Format On Save'. Możemy napisać linię kodu, w której np. niepoprawnie użyjemy spacji, zapisać zmianę, by potwierdzić działanie narzędzi - jeśli wszystko zrobiliśmy poprawnie, po kliknięciu ctrl+s, odstępy automatycznie zostaną poprawione. Powodzenia