VSC Visual Studio Code

VSC lub VS Code to nie tylko edytor kodu czy tekstu, ale również masa innych dodatkowych udogodnień, takich jak:

• kolorowanie składni
• usprawnienie formatowania
• podpowiedzi kodu – po wpisaniu pierwszych znaków pojawia się propozycja autouzupełnienia, którą zatwierdzamy Enterem
• skróty klawiszowe
• szablony kodu, które możemy stworzyć samodzielnie i następnie wykorzystać do łatwiejszego kodowania
• automatyzacja czynności – jak automatyczny zapis pliku co ustalony czas czy automatyczne odświeżenie strony po wprowadzeniu zmian

Początek

Po otwarciu pustego katalogu projektu w edytorze po lewej stronie mamy zakładkę EXPLORER, w której możemy dodawać pliki projektu i widzimy cała jego strukturę.
Klikamy ikonę New File, podajemy nazwę pliku wraz z rozszerzeniem, np. index.html i klikamy enter.
Tak samo tworzymy podfoldery projektu, tylko tu klikamy w ikonę New Folder, podajemy nazwę folderu np app i klikamy enter.

Oznaczenia plików

• biała kropka przy nazwie zakładki oznacza, że w pliku zostały wprowadzone zmiany ale nie zostały one zapisane,
• nazwa pliku kolorem czerwonym informuje, że w pliku znajduje się kod niezgodny ze standardami rozszerzenia danego pliku

Wyszukiwanie

• klikamy ikonę SEARCH z lewego menu (lub skrót klawiaturowy Shift + Ctrl/Cmd + F) – w polu wyszukiwania wprowadzamy szukaną frazę
• możemy ograniczyć wyszukiwanie do określonego rodzaju plików przez wprowadzenie rozszerzenia w polu: files to include
• możemy wykluczyć pewne pliki z wyszukiwania w polu: files to exclude
• rozwijając strzałkę z lewej strony pola wyszukiwania, mamy drugie pole w którym możemy wpisać wyrażenie jakim chcemy zastąpić wyrażenie wpisane w polu wyszukiwania, zatwierdzamy klikając ikonę obok (Replace All) lub skrótem Ctrl/Cmd + Alt + Enter

Emmet

Emmet to wtyczka do edytorów tekstu, która znacząco usprawnia pracę z HTML i CSS. Wprowadzamy odpowiedni kod i zatwierdzamy klawiszem enter lub tab. Dzięki plik temu wypełnia się całym kodem.

section>div>ul>li*3 – otrzymamy section z divem w środku, a nim listę ul z trzema elementami li

• znak ! – podstawowe otwarcie i zamknięcie pliku .html z elementami head i body
• znak . – po elemencie daje jej nazwę klasy która jest wpisana zaraz po znaku
• znak *3 – i po nim cyfra – tyle razy wystąpi dany element
• znak > – zagnieżdżenie elementów które wystąpią po znaku w elemencie który jest przed znakiem
• znak |bem – filtr o nazwie bem na koniec całego wyrażenia – nazwy klas beda zgodne z wymogami BEM
• znak lorem5 – wstawia podana w cyfrze ilość wyrazów z tekstu Lorem ipsum

Rozszerzenia – extensions

Dodatkowe moduły, rozszerzające funkcjonalność VSC i dzięki temu znacznie ułatwiające prac nad kodem.

• Live Server – automatycznie odświeża przeglądarkę po modyfikacji plików, dokumentacja
  1. Open a project and click to Go Live from the status bar to turn the server on/off.
  2. Right click on a HTML file from Explorer Window and click on Open with Live Server.
  3. Open a HTML file and right-click on the editor and click on Open with Live Server.
  4. Hit (alt+L, alt+O) to Open the Server and (alt+L, alt+C) to Stop the server (You can change the shortcut form keybinding). [On MAC, cmd+L, cmd+O and cmd+L, cmd+C]
  5. Open the Command Pallete by pressing F1 or ctrl+shift+P and type Live Server: Open With Live Server to start a server or type Live Server: Stop Live Server to stop a server.
• GitHub Markdown Preview – wyświetla podgląd plików z rozszerzeniem .md, dokumentacja
• Live Share Extension Pack – pozwala na współdzielenie kodu poprzez połączenie z innym VSC
  1. utworzenie sesji poprzez otrzymany lub wygenerowany link
  2. zalogowanie na koncie na GitHub
  3. widzimy kod drugiej osoby a ona widzi nasz kod
  4. podczas aktywnej sesji zmienia się kolor panelu VSC
• Prettier – dodatek do formatowania kodu. Wymusza spójny styl poprzez analizowanie kodu i ponowne drukowanie go przy użyciu własnych reguł, które uwzględniają maksymalną długość linii, zawijając kod w razie potrzeby, dokumentacja
• Dev Containers
• Quokka.js – idealne do szybkiego prototypowania JavaScript / TypeScript. Wartości uruchomieniowe są aktualizowane i wyświetlane w IDE obok kodu podczas pisania

ustawienia

Otwieramy przez kliknięcie ikona zębatki w dolnym lewym rogu i stamtąd wybranie Settings.

• jednoczesna edycja tagu zamykającego i otwierającego – wpisujemy w wyszukiwarce ustawień „Linked Editing” – odznaczamy checkbox

Git

Po inicjalizzacji git komendą git init pliki w panelu Explorer są zaznaczone na zielono

kolory oznaczeń plików

• zielony –
• jasny pomarańczowy – plik zmodyfikowany, modified względem ostatniego commita