Ukrywanie Plików Boilerplate z Nx w VSCode/Webstorm

Wprowadzenie

Jako deweloperzy spędzamy niezliczone godziny w naszych IDE. Idealnie byłoby, gdyby były one zarówno przyjemne dla oka, jak i łatwe w nawigacji – bez niepotrzebnego scrollowania czy klikania. Jednak narzędzia takie jak Nx często dodają sporo plików szablonowych (tzw. boilerplate), które zaśmiecają drzewo plików. Utrudnia to orientację w projekcie, szczególnie programistom zaczynającym swoją przygodę z Nx.

Jeśli nie wiesz, czym jest Nx, gorąco polecam kompleksowy artykuł autorstwa Luca, który wyjaśnia to potężne narzędzie.

Po przeczytaniu niniejszego artykułu dowiesz się, jak odciążyć widok eksploratora plików ze zbędnych plików szablonowych i odzyskać nawet 30% miejsca w okienku eksploratora. Spójrz tylko na poniższy zrzut ekranu! Niezależnie od tego, czy korzystasz z VS Code, czy z WebStorma, ten poradnik zdecydowanie jest wart Twojego czasu.

Ukrywanie Konfiguracyjnych Plików Boilerplate

Pora ulepszyć nasz codzienny workflow poprzez skonfigurowanie IDE w taki sposób, aby ukryć pliki boilerplate. W tym poradniku wykorzystamy File Nesting – funkcję pozwalającą na zgrupowanie powiązanych plików pod plikiem głównym. Wykorzystamy ją do zgrupowania szablonowych plików Nx pod plikiem project.json. Dzięki temu eksplorator plików będzie wyglądał schludniej i stanie się łatwiejszy w obsłudze.

Konfiguracja File Nesting w VS Code

Aby skonfigurować File Nesting w VS Code, wykonaj następujące kroki:

1.Otwórz Ustawienia użytkownika (JSON):

Naciśnij Ctrl + Shift + P (lub Cmd + Shift + P na Macu), aby otworzyć paletę poleceń
Wpisz Preferences: Open Settings (JSON) i wybierz tę opcję

2.Dodaj konfigurację File-Nesting: Do pliku settings.json dodaj poniższy fragment:

{
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.expand": false,
  "explorer.fileNesting.patterns": {
    "*.ts": "${capture}.js",
    "*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
    "*.jsx": "${capture}.js",
    "*.tsx": "${capture}.ts",
    "tsconfig.json": "tsconfig.*.json",
    "package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lockb",
    "project.json": "*.md, *.ts, *.json, *.js"
  }
}

Ta konfiguracja włącza funkcję File Nesting dla plików takich jak .ts, .js, .jsx i .tsx. Spójrz na sekcję z project.json – to tutaj zagnieżdżamy wszystkie pliki .md, .ts, .json oraz .js pod plikiem project.json – będącym sercem biblioteki Nx.

Po poprawnym zastosowaniu konfiguracji i odświeżeniu widoku eksploratora, pliki szablonowe powinny zostać zgrupowane pod project.json, tak jak pokazano na zrzucie ekranu na początku artykułu.

Konfiguracja File Nesting w WebStorm

Nie byłbym sobą, gdybym zapomniał o użytkownikach WebStorma. Na szczęście WebStorm również oferuje funkcję File Nesting, choć różni się nieco od tej w VS Code i wymaga nieco więcej konfiguracji.

Aby skonfigurować File Nesting w WebStorm, postępuj zgodnie z poniższymi krokami:

1.Otwórz okno dialogowe zasad File Nesting:

- Przejdź do zakładki Project (okno eksploratora plików)
- Kliknij w ikonkę „kebab menu” (trzy pionowe kropki)
- Wybierz Appearance > File Nesting

2. Dodaj konfigurację File Nesting:

- Kliknij ikonę plusa, aby dodać nową regułę
- W polu Parent File Suffix wpisz project.json
- W polu Child File Suffix użyj poniższej wartości. (Uwaga: w razie potrzeby możesz dodać kolejne pliki boilerplate, jeśli nie ma ich na liście)

.eslintrc.json; .stylelintrc.json; README.md; eslint.config.js; jest.config.ts; package.json; tsconfig.json; tsconfig.lib.json; tsconfig.spec.json

3. Zapisz zmiany, klikając OK

Po poprawnym zastosowaniu konfiguracji i odświeżeniu widoku eksploratora plików, pliki szablonowe powinny zostać zgrupowane pod project.json, tak jak pokazano na zrzucie ekranu na początku artykułu. W niektórych przypadkach może być też konieczny restart webstorma, aby zmiany zostały w pełni zastosowane.

Ze względu na to, że WebStorm stosuje zasady File Nesting wyłącznie dla plików o tych samych nazwach, musimy określić każdy plik szablonowy z osobna – nie możemy użyć wyrażeń regularnych tak jak w VS Code.

Jeśli chcesz dowiedzieć się więcej o File Nesting w WebStorm, zajrzyj do oficjalnego poradnika JetBrains: https://www.jetbrains.com/help/idea/file-nesting-dialog.html

Podsumowanie

Mam nadzieję, że ten poradnik pomógł Ci odciążyć drzewo plików w IDE, dzięki czemu zaoszczędzisz cenny czas na niepotrzebnym scrollowaniu 😀. Jest to mój osobisty trik, która sprawia, że IDE działa dla mnie lepiej – mam nadzieję, że i Tobie przyniesie podobne korzyści. Chętnie usłyszę, co myślisz o tym artykule, zwłaszcza że nieco odbiega on od tradycyjnych treści związanych z Angular, jakie zwykle pojawiają się na angular.love. Daj znać, jeśli są inne tematy dotyczące IDE, które chciałbyś, abyśmy poruszyli w przyszłości!