Spis treści

1. Wybór środowiska i narzędzi programistycznych
   • 1.1. PNPM
   • 1.2. Git
   • 1.3. Node.js 20.2+ i npm 9.6+
2. Visual Studio Code
   • 2.1. Gotowa konfiguracja VSC
   • 2.2. Wtyczki do VSC z których warto korzystać
3. ESLint
   • 3.1. Dostosowanie konfiguracji ESLint
   • 3.2. Instalacja dodatkowych wtyczek do ESLint
   • 3.3. Edycja pliku .eslintrc.json
4. TypeScript - Jak go skonfigurować?
5. Prettier
   • 5.1. Instalacja Prettier
   • 5.2. Konfiguracja Prettier
   • 5.3. Automatyczne formatowanie
6. Wybór środowiska i narzędzi programistycznych
7. Podsumowanie
   • 7.1. Często zadawane pytania

W tym przewodniku zgłębimy kluczowe aspekty konfiguracji środowiska pracy z Next.js 13. Pokażemy, jak efektywnie ustawić narzędzia takie jak PNPM, Git, Node.js i Visual Studio Code, aby Twoje programowanie było jak najbardziej efektywne. Jest to kontynuacja naszego poprzedniego poradnika, w którym omówiliśmy Wprowadzenie do Next.js 13 i jego nowości. Skupimy się na praktycznych aspektach, które pomogą Ci rozpocząć pracę z Next.js w optymalny sposób. W takim razie zaczynajmy!

Wybór środowiska i narzędzi programistycznych

PNPM

W środowisku Node.js istnieje wiele menedżerów pakietów, z których najbardziej znane to NPM (instalowany domyślnie wraz z Node.js), PNPM i Yarn. Mimo że do niedawna Yarn cieszył się większą popularnością niż PNPM, to w 2023 roku trend ten uległ zmianie na korzyść PNPM.Zastanawiasz się pewnie, dlaczego nie skorzystaliśmy z domyślnego NPM? Odpowiedź leży w wydajności. PNPM jest ponad trzykrotnie szybszy niż NPM. Co więcej, PNPM sprytnie zarządza zależnościami – te same pakiety instalowane w różnych projektach nie zajmują dodatkowego miejsca na dysku. Dzieje się tak dzięki wykorzystaniu content-addressable file system, który tworzy centralne miejsce na dysku dla wszystkich zainstalowanych pakietów. W poszczególnych projektach pakiety te są jedynie podlinkowane (za pomocą symlinków lub hardlinków), a nie kopiowane za każdym razem.Jednak to nie wszystko. PNPM oferuje również znakomite wsparcie dla monorepo, co jest szczególnie przydatne w większych projektach i zespołach programistycznych. Ponadto, PNPM ułatwia interaktywną aktualizację zależności, co jest niezwykle ważne w dynamicznie zmieniającym się świecie technologii. Dzięki tej funkcji możemy łatwo i szybko aktualizować pakiety, aby zawsze korzystać z ich najnowszych wersji.W naszym projekcie szczególnie doceniamy te aspekty PNPM. Ich wpływ na wydajność pracy i optymalizację zasobów jest nieoceniony. Wybór PNPM pozwala nam nie tylko zaoszczędzić cenny czas, ale także zapewnia większe bezpieczeństwo i stabilność naszych aplikacji.Instalacja: https://pnpm.io/installation

Git 2.39+

Git to niezbędne narzędzie dla każdego programisty. Aby skorzystać z najnowszych możliwości Git, ważne jest, aby mieć zainstalowaną odpowiednią wersję. Oto jak to zrobić w zależności od Twojego systemu operacyjnego.

Instalacja na różnych systemach:

1. Dla użytkowników MacOS: Git jest zazwyczaj zainstalowany domyślnie w systemie MacOS. Możesz to sprawdzić i ewentualnie zaktualizować do najnowszej wersji.
2. Dla użytkowników Windows Subsystem for Linux (WSL) i dystrybucji Linuxa bazujących na Debianie (takich jak Ubuntu): Wpisz w terminalu poniższe polecenie, aby zainstalować Git.

sudo apt install git

Weryfikacja wersji Git: Po zainstalowaniu Git, ważne jest, aby upewnić się, że posiadasz najnowszą wersję. Możesz to zrobić, wpisując w terminalu:bash git --versionPolecenie to wyświetli aktualnie zainstalowaną wersję Git na Twoim komputerze. Upewnij się, że jest to wersja 2.39 lub nowsza.Aby uzyskać szczegółowe instrukcje instalacji dla różnych systemów, odwiedź oficjalną stronę Git: Git - Installing Git. Znajdziesz tam przewodniki krok po kroku dla różnych środowisk, co ułatwi Ci prawidłową instalację.

Node.js 20.2+ i npm 9.6+

Node.js i NPM to kluczowe narzędzia w świecie programowania JavaScript. Aby w pełni wykorzystać ich potencjał, ważne jest, aby zainstalować i zweryfikować ich najnowsze wersje.

1. Instalacja Node.js 20.10+:
   • Node.js jest platformą do uruchamiania aplikacji JavaScript poza przeglądarką.
   • Aby zainstalować Node.js na swoim komputerze, odwiedź oficjalną stronę Node.js i pobierz odpowiednią wersję dla swojego systemu operacyjnego.
2. Instalacja NPM 10.2+:
   • NPM, czyli Node Package Manager, jest domyślnym menedżerem pakietów dla środowiska Node.js
   • Zazwyczaj, NPM jest instalowany razem z Node.js. Po zainstalowaniu Node.js, NPM powinien być dostępny na Twoim komputerze.
3. Weryfikacja wersji Node.js i NPM:
   • Po instalacji, ważne jest, aby sprawdzić, czy posiadasz odpowiednie wersje Node.js i NPM. Otwórz terminal i wpisz:

node --versionbash npm --version

Te polecenia wyświetlą zainstalowane wersje Node.js oraz NPM. Upewnij się, że wersja Node.js to 20.10 lub nowsza, a wersja NPM to 10.2 lub nowsza.Jeśli potrzebujesz bardziej szczegółowych instrukcji dotyczących instalacji, odwiedź oficjalną stronę Node.js i dokumentację NPM. Znajdziesz tam kompletne przewodniki i pomocne wskazówki, które ułatwią Ci instalację i korzystanie z najnowszych wersji tych narzędzi.

Visual Studio Code

Zacznij od pobrania i zainstalowania Visual Studio Code: https://code.visualstudio.com/. Visual Studio Code, często skracane do VS Code, to potężne, wszechstronne i bardzo popularne środowisko programistyczne (IDE) stworzone przez firmę Microsoft.

Gotowa konfiguracja VSC

Warto też skonfigurować VS Code. Polecam następującą konfigurację, którą należy zapisać w pliku .vscode/settings.json:

{
   "typescript.tsdk":"node_modules/typescript/lib",
   "editor.formatOnSave":true,
   "editor.defaultFormatter":"esbenp.prettier-vscode",
   "editor.codeActionsOnSave":{
      "source.fixAll":true
   },
   "graphql-config.dotEnvPath":"./.env",
   "graphql-config.load.configName":"graphql",
   "files.associations":{
      "*.css":"tailwindcss"
   },
   "editor.quickSuggestions":{
      "strings":true
   }
}

Wtyczki do VSC z których warto korzystać

W pasku narzędzi z lewej strony kliknij ikonkę przypominającą klocki, aby otworzyć panel zarządzania wtyczkami.

1. Prettier - Code Formatter
   • Opis: Prettier jest wtyczką do formatowania kodu. Automatycznie formatuje kod przy zapisie, zapewniając spójność stylu i zwiększając czytelność.
   • Dlaczego warto używać: Pomaga utrzymać jednolity styl kodowania w projekcie, co jest szczególnie ważne w pracy zespołowej.
   • Link: Prettier - Code Formatter
2. ESLint
   • Opis: ESLint to narzędzie do analizy statycznej kodu JavaScript/TypeScript, które pomaga wykrywać problemy i poprawiać jakość kodu.
   • Dlaczego warto używać: Wspiera dobre praktyki kodowania i pomaga unikać typowych błędów, co jest kluczowe dla utrzymania wysokiej jakości kodu.
   • Link: ESLint
3. GraphQL: Language Feature Support
   • Opis: Ta wtyczka oferuje wsparcie dla języka GraphQL w VS Code, włączając w to składnię, podpowiedzi i formatowanie.
   • Dlaczego warto używać: Ułatwia pracę z GraphQL, szczególnie gdy pracujesz nad projektami wykorzystującymi tę technologię do zarządzania danymi.
   • Link: GraphQL
4. Tailwind CSS IntelliSense
   • Opis: Tailwind CSS IntelliSense udostępnia inteligentne podpowiedzi dla frameworka Tailwind CSS, w tym klas i ich atrybutów.
   • Dlaczego warto używać: Znacznie ułatwia pracę z Tailwind CSS, oferując szybkie podpowiedzi i zmniejszając ryzyko błędów.
   • Link: Tailwind CSS IntelliSense
5. GitHub Copilot
   • Opis: GitHub Copilot to narzędzie oparte na AI, które podpowiada fragmenty kodu i całe funkcje w czasie rzeczywistym.
   • Dlaczego warto używać: Może znacząco przyspieszyć proces kodowania, oferując inteligentne sugestie i inspirując do nowych rozwiązań.
   • Link: GitHub Copilot
6. Material Icon Theme
   • Opis: Ta wtyczka oferuje zestaw ikon ułatwiających orientację w strukturze projektu.
   • Dlaczego warto używać: Poprawia estetykę interfejsu użytkownika i ułatwia nawigację po plikach projektu.
   • Link: Material Icon Theme
7. Monokai Pro
   • Opis: Monokai Pro to motyw kolorystyczny dla VS Code, który oferuje przyjemną dla oka paletę kolorów i ikony.
   • Dlaczego warto używać: Zapewnia estetyczny i czytelny wygląd edytora, co może zwiększyć komfort pracy.
   • Link: Monokai Pro

Każda z tych wtyczek wnosi unikalne funkcje, które mogą zwiększyć produktywność i jakość pracy w Visual Studio Code, czyniąc proces programowania bardziej efektywnym i przyjemnym.

ESLint

ESLint to wysoce konfigurowalne narzędzie do statycznej analizy kodu, które jest szczególnie popularne w projektach JavaScript i TypeScript. Jego głównym zadaniem jest identyfikowanie i raportowanie wzorców występujących w kodzie, które są uznane za błędy lub złe praktyki.

Dostosowanie konfiguracji ESLint

Zacznijmy od ulepszenia naszego środowiska programistycznego, koncentrując się na ESLint, narzędziu do statycznej analizy kodu. Najpierw zmodyfikujmy domyślną komendę lint:

next lint --fix --dir src

Opcja --fix automatycznie koryguje wykryte błędy, gdzie to możliwe, a --dir src nakazuje ESLint sprawdzić wszystkie pliki w folderze src.

Instalacja dodatkowych wtyczek do ESLint

Zainstalujmy kilka dodatkowych wtyczek, które wzmocnią nasze narzędzie ESLint, szczególnie przy pracy z TypeScriptem:

pnpm add -D \\@typescript-eslint/eslint-plugin \\@typescript-eslint/parser \\eslint-plugin-import \\eslint-config-prettier

@typescript-eslint/eslint-plugin: To wtyczka do ESLint zapewniająca zbiór reguł specyficznych dla TypeScript, ułatwiająca identyfikację i poprawę problemów związanych ze specyficzną dla TypeScript składnią i praktykami. Umożliwia bardziej szczegółowe i skuteczne analizowanie kodu TypeScript. Jest kluczowa dla projektów wykorzystujących TypeScript w celu zapewnienia wysokiej jakości kodu i przestrzegania najlepszych praktyk.

@typescript-eslint/parser: Jest to analizator składni (parser) dla ESLint, umożliwiający parsowanie kodu TypeScript. Parser ten jest niezbędny do prawidłowego działania reguł eslint-plugin dla TypeScript, ponieważ umożliwia ESLint zrozumienie i analizę specyficznej składni TypeScript.

eslint-plugin-import: Wtyczka ta zapewnia zestaw reguł ESLint służących do weryfikacji poprawności importów i eksportów w kodzie JavaScript oraz TypeScript. Pomaga w utrzymaniu porządku i spójności w importach, zapobiegając problemom takim jak duplikaty, brakujące lub niepotrzebne importy.

eslint-config-prettier: Jest to konfiguracja ESLint, która wyłącza reguły mogące kolidować z Prettier, narzędziem do formatowania kodu. Zapewnia, że ESLint i Prettier mogą współpracować bez konfliktów, umożliwiając jednoczesne korzystanie z zaawansowanej analizy kodu i automatycznego formatowania.

Edycja pliku .eslintrc.json

Teraz czas na edycję pliku .eslintrc.json, gdzie skonfigurujemy nasze reguły ESLint. Poniżej wklejam gotowe ustawienia ESLint wraz z opisem każdej linii.

{
   "plugins":[
      "@typescript-eslint",
      "import"
   ],
   "parserOptions":{
      "project":"tsconfig.json"
   },
   "extends":[
      "plugin:@typescript-eslint/recommended",
      "plugin:@typescript-eslint/recommended-requiring-type-checking",
      "plugin:import/recommended",
      "plugin:import/typescript",
      "prettier",
      "next/core-web-vitals"
   ],
   "rules":{
      "import/order":"error",
      "import/no-mutable-exports":"error",
      "import/no-cycle":"error",
      "import/no-default-export":"error",
      "@typescript-eslint/ban-types":[
         "error",
         {
            "types":{
               "{}":false
            }
         }
      ],
      "@typescript-eslint/consistent-type-imports":[
         "error",
         {
            "prefer":"type-imports",
            "fixStyle":"inline-type-imports",
            "disallowTypeAnnotations":false
         }
      ],
      "import/no-duplicates":[
         "error",
         {
            "prefer-inline":true
         }
      ],
      "import/namespace":[
         "off"
      ],
      "no-empty-pattern":"off",
      "@typescript-eslint/no-empty-interface":"off",
      "@typescript-eslint/no-empty-function":"off",
      "@typescript-eslint/require-await":"off",
      "@typescript-eslint/return-await":[
         "error",
         "in-try-catch"
      ],
      "@typescript-eslint/no-unused-vars":[
         "error",
         {
            "argsIgnorePattern":"^_",
            "varsIgnorePattern":"^_"
         }
      ],
      "@typescript-eslint/restrict-template-expressions":[
         "error",
         {
            "allowNumber":true,
            "allowBoolean":true
         }
      ]
   },
   "overrides":[
      {
         "files":[
            "src/app/**/*.ts?(x)"
         ],
         "rules":{
            "import/no-default-export":"off"
         }
      }
   ],
   "ignorePatterns":[
      "*.js",
      "*.jsx"
   ]
}

Na koniec warto przeprowadzić weryfikację konfiguracji, aby upewnić się, że ESLint działa poprawnie:

pnpm lint

TypeScript - Jak go skonfigurować?

Konfiguracja TypeScripta w pliku tsconfig.json ma kluczowe znaczenie dla poprawnego działania projektu. Pozwala określić, jak TypeScript ma kompilować kod źródłowy do JavaScript oraz jakie reguły i zasady mają być stosowane podczas analizy kodu. Poniżej gotowa konfiguracja pliku oraz krótkie wyjaśnienie najważniejszych opcji tej konfiguracji:

{
   "$schema":"https://json.schemastore.org/tsconfig",
   "compilerOptions":{
      "target":"es2022",
      "lib":[
         "dom",
         "dom.iterable",
         "esnext"
      ],
      "allowJs":true,
      "skipLibCheck":true,
      "strict":true,
      "forceConsistentCasingInFileNames":true,
      "noEmit":true,
      "esModuleInterop":true,
      "module":"esnext",
      "moduleResolution":"node",
      "resolveJsonModule":true,
      "isolatedModules":true,
      "jsx":"preserve",
      "incremental":true,
      "plugins":[
         {
            "name":"next"
         }
      ],
      "paths":{
         "@/*":[
            "./src/*"
         ]
      }
   },
   "include":[
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx",
      ".next/types/**/*.ts"
   ],
   "exclude":[
      "node_modules"
   ]
}{
   "$schema":"https://json.schemastore.org/tsconfig",
   "compilerOptions":{
      "target":"es2022",
      "lib":[
         "dom",
         "dom.iterable",
         "esnext"
      ],
      "allowJs":true,
      "skipLibCheck":true,
      "strict":true,
      "forceConsistentCasingInFileNames":true,
      "noEmit":true,
      "esModuleInterop":true,
      "module":"esnext",
      "moduleResolution":"node",
      "resolveJsonModule":true,
      "isolatedModules":true,
      "jsx":"preserve",
      "incremental":true,
      "plugins":[
         {
            "name":"next"
         }
      ],
      "paths":{
         "@/*":[
            "./src/*"
         ]
      }
   },
   "include":[
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx",
      ".next/types/**/*.ts"
   ],
   "exclude":[
      "node_modules"
   ]
}

Prettier

Prettier to wiodące narzędzie służące do automatycznego formatowania plików źródłowych. Jego główną zaletą jest możliwość lekkiego dostosowania do własnych preferencji, a następnie automatyczne formatowanie kodu w projekcie. W ten sposób można zachować spójność formatowania i zwiększyć czytelność kodu.

Instalacja Prettier

Aby rozpocząć korzystanie z Prettier, pierwszym krokiem jest zainstalowanie go w projekcie razem z niezbędnymi zależnościami. Możemy to zrobić za pomocą polecenia:

pnpm add -D \\prettier \\prettier-plugin-tailwindcss

Konfiguracja Prettier

Następnie, aby dostosować zachowanie Prettier do naszych preferencji, tworzymy plik konfiguracyjny prettier.config.js w głównym folderze projektu. Poniżej znajduje się przykład konfiguracji:

{
   "$schema":"https://json.schemastore.org/eslintrc.json",
   "plugins":[
      "@typescript-eslint",
      "import"
   ],
   "parserOptions":{
      "project":"tsconfig.json"
   },
   "extends":[
      "plugin:@typescript-eslint/recommended",
      "plugin:@typescript-eslint/recommended-requiring-type-checking",
      "plugin:import/recommended",
      "plugin:import/typescript",
      "prettier",
      "next/core-web-vitals"
   ],
   "rules":{
      "import/order":"error",
      "import/no-mutable-exports":"error",
      "import/no-cycle":"error",
      "import/no-default-export":"error",
      "@typescript-eslint/ban-types":[
         "error",
         {
            "types":{
               "{}":false
            }
         }
      ],
      "@typescript-eslint/consistent-type-imports":[
         "error",
         {
            "prefer":"type-imports",
            "fixStyle":"inline-type-imports",
            "disallowTypeAnnotations":false
         }
      ],
      "import/no-duplicates":[
         "error",
         {
            "prefer-inline":true
         }
      ],
      "import/namespace":[
         "off"
      ],
      "no-empty-pattern":"off",
      "@typescript-eslint/no-empty-interface":"off",
      "@typescript-eslint/no-empty-function":"off",
      "@typescript-eslint/require-await":"off",
      "@typescript-eslint/return-await":[
         "error",
         "in-try-catch"
      ],
      "@typescript-eslint/no-unused-vars":[
         "error",
         {
            "argsIgnorePattern":"^_",
            "varsIgnorePattern":"^_"
         }
      ],
      "@typescript-eslint/restrict-template-expressions":[
         "error",
         {
            "allowNumber":true,
            "allowBoolean":true
         }
      ]
   },
   "overrides":[
      {
         "files":[
            "src/app/**/*.ts?(x)"
         ],
         "rules":{
            "import/no-default-export":"off"
         }
      }
   ],
   "ignorePatterns":[
      "*.js",
      "*.jsx"
   ]
}

Wartości opcji konfiguracyjnych można dostosować według własnych preferencji. Konfiguracja pozwala na definiowanie reguł formatowania, które zostaną zastosowane do kodu źródłowego.

Automatyczne formatowanie

Po zainstalowaniu Prettier i dostosowaniu konfiguracji, możemy automatycznie sformatować wszystkie pliki w projekcie za pomocą polecenia:

pnpm prettier --write

Warto zauważyć, że Prettier domyślnie sformatuje również pliki w ukrytym folderze .next. Jeśli ten folder nie jest istotny dla naszego projektu, można go zignorować, tworząc plik .prettierignore i dodając do niego .next. Dzięki temu folder .next zostanie pominięty podczas formatowania.

Wybór środowiska i narzędzi programistycznych

Oprócz konfiguracji podstawowych narzędzi, ważne jest również zrozumienie roli, jaką odgrywa hosting i środowisko uruchomieniowe w naszych projektach Next.js. W następnym artykule Czym jest Vercel i czy warto go wybrać? - Kilka słów od eksperta omówiliśmy, jak platforma Vercel, twórcy Next.js, idealnie integruje się z tym frameworkiem, oferując wydajne i elastyczne rozwiązania do wdrażania aplikacji. Wybór odpowiedniego hostingu i zrozumienie jego możliwości jest kluczowe dla optymalnego wykorzystania potencjału Next.js.

Podsumowanie

W tym przewodniku przedstawiliśmy kluczowe aspekty konfiguracji środowiska pracy dla projektu Next.js 13. Rozpoczęliśmy od wyboru PNPM, który wyróżnia się jako wydajny menedżer pakietów, zoptymalizowany pod kątem zarządzania zależnościami. Następnie skupiliśmy się na Visual Studio Code, rekomendując je jako środowisko IDE ze względu na jego wszechstronność i dostępność użytecznych wtyczek. Podkreśliliśmy znaczenie narzędzi takich jak ESLint i Prettier w zapewnieniu jakości kodu i spójności stylu programowania.

Często zadawane pytania

1. Jakie są główne zalety używania PNPM jako menedżera pakietów? PNPM oferuje znaczną wydajność dzięki sprytnemu zarządzaniu zależnościami i systemowi content-addressable file system. Pozwala na oszczędność miejsca na dysku oraz oferuje wsparcie dla monorepo, co jest przydatne w większych projektach.
2. Dlaczego warto korzystać z Visual Studio Code? Visual Studio Code jest rekomendowany ze względu na swoją wszechstronność, dostępność przydatnych wtyczek oraz możliwość łatwej konfiguracji, co zwiększa efektywność pracy.
3. Jakie są korzyści z integracji ESLint w projekcie Next.js? ESLint pomaga w identyfikacji i raportowaniu błędów oraz złych praktyk w kodzie JavaScript/TypeScript, co poprawia jakość kodu i wspiera dobre praktyki programowania.
4. Jakie znaczenie ma TypeScript w projektach Next.js? TypeScript umożliwia bardziej zorganizowane i bezpieczne tworzenie aplikacji, oferując silne typowanie oraz bardziej precyzyjną kontrolę nad kodem.
5. Dlaczego Prettier jest ważnym narzędziem? Prettier automatyzuje proces formatowania kodu, zapewniając spójność stylu i zwiększając czytelność kodu, co jest szczególnie ważne w pracy zespołowej.