VSCode: rozszerzenia, Emmet i skróty
Instaluj niezbędne rozszerzenia, używaj skrótów Emmet do natychmiastowego pisania HTML i CSS oraz poznaj skróty klawiaturowe przyspieszające edycję.
VSCode: rozszerzenia, Emmet i skróty to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Dlaczego VSCode?
Visual Studio Code to najpopularniejszy edytor kodu używany we frontendzie. Jest bezpłatny, open source, szybki i ma ogromny ekosystem rozszerzeń. Większość zespołów frontendowych standaryzuje na tym edytorze.
Niezbędne rozszerzenia
Niezbędne rozszerzenia do pracy frontendowej: ESLint (lintowanie bezpośrednio w kodzie), Prettier (automatyczne formatowanie), GitLens (git blame bezpośrednio w kodzie), Path Intellisense (autouzupełnianie ścieżek plików) oraz Auto Rename Tag (zmiana nazw sparowanych tagów HTML).
Rozszerzenia zależne od języka
TypeScript: TypeScript and JavaScript Language Features (wbudowane). React: ES7+ React/Redux snippets. Vue: Volar (oficjalne). Tailwind: Tailwind CSS IntelliSense.
Czym jest Emmet?
Emmet jest wbudowany w VSCode. Wpisz skrót i naciśnij Tab, aby rozwinąć go do pełnego kodu HTML lub CSS. Znacznie przyspiesza to pisanie znaczników.
<!-- Type then press Tab: -->
nav>ul>li*3>a{Link $}
<!-- Expands to: -->
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>Popularne skróty Emmet
Warto poznać te skróty Emmet: ! → szkielet HTML, div.container → div z klasą, ul>li*5 → lista z 5 elementami, input:email → pole wejściowe adresu e-mail, form:post → formularz z method=post.
<!-- type: div.card>img+h3{Title}+p{Description} → -->
<div class="card">
<img src="" alt="">
<h3>Title</h3>
<p>Description</p>
</div>Niezbędne skróty klawiaturowe
Skróty, które najbardziej oszczędzają czas: Ctrl/Cmd+P (szybkie otwieranie pliku), Ctrl/Cmd+Shift+P (paleta poleceń), Alt+Click (wiele kursorów), Ctrl/Cmd+D (zaznaczenie kolejnego wystąpienia), Ctrl/Cmd+/ (przełączanie komentarza).
Edycja za pomocą wielu kursorów
Alt+Click dodaje kursory. Ctrl+Alt+Up/Down dodaje kursory powyżej lub poniżej. Ctrl+D zaznacza kolejne wystąpienie zaznaczonego tekstu. Przy wielu kursorach wszystkie zmiany są wykonywane jednocześnie — świetnie sprawdza się to przy zmianie nazw zmiennych w niewielkich zakresach.
Zintegrowany terminal
Otwórz terminal w VSCode za pomocą Ctrl+` (backtick). Możesz go podzielić, aby uruchomić serwer deweloperski w jednym panelu, a testy w drugim, bez opuszczania edytora.
Ustawienia obszaru roboczego
Utwórz w projekcie plik .vscode/settings.json, aby ustawić opcje specyficzne dla projektu, które zastąpią ustawienia użytkownika. Zatwierdź ten plik w repozytorium, aby wszyscy członkowie zespołu mieli takie same ustawienia: formatowanie przy zapisie, rozmiar tabulatora i kolumny linijki.
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}IntelliSense i automatyczne importy
IntelliSense w VSCode zapewnia autouzupełnianie, podpowiedzi parametrów i dokumentację wyświetlaną po najechaniu kursorem. W projektach TypeScript automatycznie importuje także symbole po zaakceptowaniu podpowiedzi — nie trzeba dodawać importu ręcznie.
Przejście do definicji i odwołań
Kliknij dowolny symbol z wciśniętym klawiszem Ctrl (lub naciśnij F12), aby przejść do jego definicji. Shift+F12 pokazuje wszystkie odwołania. Ctrl+Shift+F przeszukuje wszystkie pliki. Są to niezbędne narzędzia do poruszania się po dużych bazach kodu.
Panel Problems
Panel Problems (Ctrl+Shift+M) wyświetla wszystkie błędy i ostrzeżenia ESLint oraz TypeScriptu w otwartych plikach. To najszybszy sposób, aby sprawdzić, co należy poprawić przed zatwierdzeniem zmian.
Szybkie sprawdzenie
Do czego rozwija się skrót Emmet ul>li*3 w VSCode?
Podsumowanie: praca w VSCode
Zainstaluj ESLint, Prettier i rozszerzenia zależne od używanego języka. Używaj Emmet do szybkiego pisania HTML/CSS. Naucz się skrótów klawiaturowych (Cmd+P, Cmd+Shift+P, Cmd+D). Ustaw formatOnSave w pliku .vscode/settings.json. Używaj wielu kursorów przy powtarzalnych zmianach. Korzystaj z funkcji Go to Definition do poruszania się po kodzie.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „VSCode: rozszerzenia, Emmet i skróty” jest bezpłatna?
Tak — pełny tekst „VSCode: rozszerzenia, Emmet i skróty” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „VSCode: rozszerzenia, Emmet i skróty”?
Instaluj niezbędne rozszerzenia, używaj skrótów Emmet do natychmiastowego pisania HTML i CSS oraz poznaj skróty klawiaturowe przyspieszające edycję. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „VSCode: rozszerzenia, Emmet i skróty”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Chrome DevTools: Elements, Console, Network
- VSCode: rozszerzenia, Emmet i skróty
- Konfiguracja Prettier i ESLint
- Zgodność przeglądarek i caniuse.com