Edytor Visual Studio Code: funkcje, 12+ polecane wtyczki i motywy

Edytor Visual Studio Code

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.

 

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

14 myśli na “Edytor Visual Studio Code: funkcje, 12+ polecane wtyczki i motywy”

    1. 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.

  1. Cześć Kuba,
    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.

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

  3. Cześć Kuba, dzięki za listę dobrych wtyczek.
    Jaką wtyczkę polecasz która dobrze formatuje kod PHP oraz HTML znajdujący się w jednym pliku?

    1. Bunkrów Nie Ma

      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

      1. Kuba, moze bedziesz wiedzial. Jak zrobic cos takiego, (w vsc i brackets, ewentualnie w pycharm) zeby edytujac z tego samego katalogu plik css podpowiadaly sie zmienne z pliku html. Np jak w html mam <div id="cos" to jak edytuje css i wpisze # zeby sie podpowiadaly zmienne z htmla. ?
        Ogolnie najchetniej popracowalbym w jednym narzedziu a ucze sie kodowac w html/css pod wordpress i w python pod wszystko inne i wolalbym uzywac jedno narzedzie ;/

        1. Ja w VS Code korzystam z „HTML CSS Support”, „CSS Peek” i „IntelliSense for CSS class names in HTML”. Może któraś z nich Ci pomoże.
          One pomagają dla HTMLa rozpoznawać to, co znajduje się w pliku .css, ale nie jestem pewien czy działa to w odwrotną stronę, czyli tak jak oczekujesz.

  4. Czy kolorowanie wybranych elementów składni powinno działać automatycznie ? już trochę próbuję działać w VSC ale cały tekst w edytorze jest koloru białego, nie tak jak na filmach które widziałem..instalowałem kilka wtyczek jednak dalej nic to nie zmienia..

    1. Biały tekst może oznaczać, że nie zapisałeś pliku z żadnym rozszerzeniem ani nie wybrałeś go z listy w prawym dolnym rogu. W tej sytuacji VS Code nie ma pojęcia jak ten kod podświetlić.
      Druga opcja: piszesz kod w języku, którego VS Code jeszcze nie wspiera – wtedy poszukaj wtyczki na liście.

  5. Cześć Kuba, pytanie o Lessy i Sassy i ich zmienne. Czy jest wtyczka, która pomaga poruszać się w zadeklarowanych już zmiennych. Przykładowo klikam na użytą zmienną i dostaje podgląd z czego składa sie zmienna. Zmienne zadeklarowane są w osobnym pliku.

  6. Cześć
    Po zainstalowaniu VSC i próbie zainstalowania wtyczek pojawia się komunikat
    „we cannot connect to the Extensions Marrketplace at this time please try again later”
    Próbowałem przeinstalować, ale nie pomogło.
    Czy ktoś miał podobny problem
    Będę wdzięczny za informację

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *