Jak zainstalować i używać Prettier i ESLint w projekcie Vue 3

Cześć! W tym wpisie opowiem o tym, jak zainstalować i skonfigurować Prettier i ESLint w projekcie Vue 3. Jako programistka, zawsze staram się utrzymać kod w najlepszym porządku, a te narzędzia są w tym nieocenione.

Zdecydowanie nie wyobrażam sobie pracy bez Prettier i ESLint. Prettier to mój osobisty asystent do formatowania kodu - dba o to, aby wszystko wyglądało schludnie i jednolicie. To jak mieć stylistę dla mojego kodu. ESLint natomiast jest jak mądry mentor, który pilnuje mnie podczas kodowania, wyłapując błędy i przypominając o najlepszych praktykach. Dzięki nim moja praca jest szybsza, efektywniejsza i mniej stresująca. To jak mieć niezawodny zespół wsparcia, który zawsze stoi za mną.

1. Rozpoczęcie pracy z Vue 3

Załóżmy, że masz już ustawiony projekt Vue 3. Jeśli nie, możesz łatwo utworzyć nowy projekt za pomocą Vue CLI. Wystarczy zainstalować Vue CLI globalnie, a następnie utworzyć nowy projekt:

npm install -g @vue/cli
vue create moj-projekt

2. Instalacja ESLint

W terminalu wpisujemy

cd moj-projekt
npm install eslint --save-dev

Następnie zainicjuj konfigurację ESLint:

npx eslint --init

Podczas inicjalizacji wybierz odpowiednie opcje dla swojego projektu. ESLint zapyta o framework, moduły, używany styl kodowania itp.

W pliku .eslintrc.js umieszczam podstawową konfigurację ESLint:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    // Moje reguły ESLint
  },
};

Ta konfiguracja zapewnia podstawową analizę dla projektów Vue 3.

3. Instalacja Prettier

Prettier to narzędzie do formatowania kodu, które pomaga utrzymać spójny styl. Aby go zainstalować, użyj:

npm install --save-dev prettier

Dodaję również niezbędne pluginy i konfigurację dla ESLint, aby działał z Prettier:

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

Następnie utwórz plik .prettierrc w katalogu głównym projektu, aby dostosować ustawienia formatowania. Oto przykładowa konfiguracja:

{
	"bracketSameLine": true,
	"semi": false,
	"singleQuote": true,
	"trailingComma": "all"
}

Te ustawienia są moimi preferencjami; możesz je dostosować do swoich potrzeb.

4. Integracja ESLint z Prettier

Aby ESLint i Prettier współpracowały bez problemów, załaduj w .eslintrc.js rozszerzenie dodając ten kod:

extends: [
  'plugin:vue/vue3-essential',
  'eslint:recommended',
  'plugin:prettier/recommended' // Dodanie tej linii
],

Krok 7: Testowanie konfiguracji

Czas przetestować naszą konfiguracje, wpisujemy w terminalu:

npx eslint --fix .

To polecenie poprawi automatycznie wszystkie problemy, które mogą być naprawione, i pokaże te, które wymagają mojej ręcznej interwencji.

Aby ułatwić sobie życie, możesz dodać skrypty do package.json, które pozwolą Ci uruchomić linter i formatter jednym poleceniem:

"scripts": {
  "lint": "eslint --fix .",
  "format": "prettier --write ."
}

Teraz masz skonfigurowane Prettier i ESLint w swoim projekcie. Te narzędzia będą nieocenione w utrzymaniu wysokiej jakości Twojego kodu.

Eslint i VS CODE

Oczywiście mozesz użyć też pluginu i konfiguracji do vscode aby wszystko działo się po zapisaniu pliku.

Krok 1: Zainstaluj Wtyczki ESLint i Prettier

Najpierw upewnij się, że masz zainstalowane wtyczki ESLint i Prettier w VSCode. Możesz to zrobić, wyszukując “ESLint” i “Prettier - Code formatter” w zakładce Extensions (Rozszerzenia) w VSCode i klikając “Install” (Zainstaluj) dla każdego z nich.

Krok 2: Utwórz lub Zaktualizuj Plik Konfiguracyjny VSCode

Następnie musisz utworzyć lub zaktualizować plik konfiguracyjny VSCode w Twoim projekcie. Możesz to zrobić, tworząc plik .vscode/settings.json w katalogu głównym Twojego projektu.

Krok 3: Konfiguracja Automatycznego Formatowania

W pliku .vscode/settings.json, dodaj następujące ustawienia, aby VSCode automatycznie uruchamiał Prettier i ESLint podczas zapisywania pliku:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // Możesz dodać więcej języków, jeśli potrzebujesz
}

Te ustawienia sprawią, że ESLint będzie automatycznie naprawiał problemy przy każdym zapisie, a Prettier będzie używany jako domyślny formatter.

Krok 4: Sprawdzenie i Testowanie

Aby upewnić się, że wszystko działa, otwórz plik JavaScript lub Vue w Twoim projekcie, celowo zrób jakiś błąd formatowania lub łamania zasad ESLint, a następnie zapisz plik. VSCode powinien automatycznie sformatować kod zgodnie z Prettier i zastosować poprawki ESLint.

Krok 5: Dostosowywanie Ustawień (Opcjonalnie)

Możesz dostosować te ustawienia według własnych preferencji. Na przykład, jeśli chcesz, aby ESLint nie naprawiał automatycznie, ale tylko pokazywał błędy, możesz zmienić source.fixAll.eslint na false.

Mam nadzieję, że ten przewodnik był pomocny. Powodzenia w kodowaniu!