Visual Studio Code to edytor od Microsoftu, który posiada właściwie wszystko, co jest potrzebne do komfortowej pracy z JavaScriptem, Reactem, Angularem i innymi frameworkami czy językami. Dostępny standardowo na Windowsa, Maca i Linuxa.

Pobierz edytor Visual Studio Code

Czym się wyróżnia?

  • IntelliSense, czyli bardzo dobre podpowiadanie składni kodu
  • Wbudowany debugger, gdzie jako Front Endowiec możesz za pomocą wtyczki połączyć VS Code z Chromem i pracować na nich jednocześnie
  • Wbudowany Git
  • Wbudowany Emmet
  • Setki dodatków, motywów i bardzo szybki rozwój idący w dobrym kierunku

Twitter Visual Studio Code (jeśli chcesz być na bieżąco):
https://twitter.com/code

Poradnik dla nowych osób, różne tricki i porady:
https://code.visualstudio.com/docs/getstarted/tips-and-tricks

Czego chcieć więcej? Ludzie przesiadają się do niego z Bracketsa, Sublime Textu, Atoma, Notepada itd. Warto więc przetestować ten edytor u siebie.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Wideo: wprowadzenie do Visual Studio Code i najciekawsze funkcje

Edytor Visual Studio Code – polecane wtyczki i motywy

Wtyczki, które zainstalowałem:

  • Emmet (wbudowany, do szybszego pisania kodu HTML i CSS)
  • Project Manager (do prostego zarządzania projektami w VS Code)
  • vscode-icons (by zmienić domyślne ikonki przy plikach i folderach na ciekawsze)
  • Path IntelliSense (by VS Code uzupełniał mi ścieżki do plików)
  • IntelliSense for CSS class names (w kodzie HTML dostajemy podpowiedzi klas ze stylów CSS)
  • CSS Peek (możesz szybko przenieść się do danego elementu, klasy lub id w stylach CSS, prosto z dokumentu HTML)
  • Open in browser (możesz szybko uruchomić wybrany plik w dowolnej przeglądarce, prosto z Visual Studio Code)
  • Faker (możesz szybko wygenerować losowe dane, takie jak nazwa firmy, pełny adres czy obrazek z danej kategorii)
  • Minify (możliwość generowania zminimalizowanej wersji danego pliku lub folderu)
  • Prettier (aktualnie najpopularniejsze narzędzie do układania/formatowania kodu)
  • Git History (dodaje komendę do wbudowanego Gita, która pozwala w czytelny sposób sprawdzić historię commitów w naszym repozytorium)
  • Git Lens (pokazuje autora danej linii kodu oraz dostajemy kolejną zakładkę w eksploratorze plików, gdzie widać nasze branche oraz ostatnio zmienione/dodane/usunięte pliki)
  • Debugger for Chrome (możliwość debugowania naszego kodu bezpośrednio w Visual Studio Code – i w tym samym czasie także w Chromie, więc szukanie błędów staje się bardzo wygodne)

Lista dodatków:
https://marketplace.visualstudio.com/VSCode

Lista motywów:
https://scotch.io/bar-talk/best-vs-code-themes-of-2017

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

    • Być może spędziłem za mało czasu w workspaces, ale Project Manager wydaje mi się szybszy w obsłudze.
      Wrzucam komendę “List projects…” i od razu mogę się przełączyć. W workspaces muszę dodatkowo wybrać konkretny plik itd.

  • Cześć Jakub,
    Jesteś w stanie przygotować krótki wpis nt. lokalnej instalacji i konfiguracji LESS oraz SASS dla edytora VSC? Potrzebne mi te preprocesory do nauki, ale niestety nie potrafię ich prawidłowo skonfigurować…

    Pozdrawiam.

  • Witam.
    Czy w Visual Studio Code jest możliwość aktywacji informacji na temat zmiennej lub funkcji, po najechaniu kursorem nazwy?

  • Cześć Jakub, dzięki za listę dobrych wtyczek.

    Jaką wtyczkę polecasz która dobrze formatuje kod PHP oraz HTML znajdujący się w jednym pliku?

    • Hej Rafał, nie polecę żadnej, bo chyba jeszcze żadna dobra nie powstała do VS Code, niestety :) Czasem gdy muszę pracować z PHP, to po prostu zmieniam edytor, np. na Bracketsa

  • >