Visual Studio Code

Jakiś czas temu w warsztacie webmastera pisałem, że używam 2 edytorów: PHPStorm i Sublime Text Editor.
Prowadząc zajęcia staram się nie wyskakiwać z edytorami, których nie używają kursanci.
Idąc za ciosem od jakiegoś czasu zacząłem używać Visual Studio Code – darmowy edytor od Microsoftu.
W tym mini artykule podzielę się z wami kilkoma trikami, które umilą wam pracę z tym narzędziem.

Pluginy

Z lewej strony mamy belkę, na której są ikony.
Wystarczy kliknąć kwadrat, by pokazać boczny panel z rozszerzeniami.

Na górze tego panelu są 3 kropki. Klikając na nie możemy wybrać to co nas interesuje.

Najlepiej zacząć od najbardziej popularnych – Show Popular Extension.
Ja osobiście mam teraz poniższe. Nie będę tutaj dokładnie opisywał jak zainstalować każde rozszerzenie, ponieważ po wybraniu
danego rozszerzenia zawsze pojawia się stosowny opis.

Auto Rename Tag
Plugin, który służy do równoczesnej zmiany nazw tagów w html. Jeżeli zmieniasz nazwę taga otwierającego, automatycznie zmieni się też zamykający. To samo w drugą stronę. Zamieniasz zamykający – zmienia się też otwierający.

Auto Trim
Przy wklejaniu tekstów do edytora bardzo często dodawane są spacje na końcu linii.
Nie jest to problem tylko Visual Studio Code, bo sytuacja ta powtarza się w większości edytorów. Plugin ten ją rozwiązuje.

Babel ES6/ES7
Dodaje kolorowanie składni dla ES6/ES7

Beautify
Automatyczne formatowanie kodu.

Change-case
Zamiana liter na duże/małe. Domyślnie edytor ten nie ma takiej opcji.

Color Hoghlight
Koloruje kolory w kodzie HTML/CSS. Dodatkowo można takie kolory kliknąć by pokazać okienko z wyborem nowego koloru.

FontSize Shortcuts
Pozwala powiększać i zmieniać czcionkę w edytorze za pomocą Ctrl + i Ctrl –

Guides
Dodaje linie pomocnicze do kodu. Dzięki temu o wiele łatwiej ogarnąć w kodzie wcięcia.

IntelliSense for CSS class names
Dodaje podpowiedzi dla klas CSS w HTML

Live Server
Dodaje dynamiczny podgląd stron. Aby ten plugin działał, musimy otworzyć w edytorze folder ze stroną.
Następnie wystarczy kliknąć prawym przyciskiem myszy na dany plik html i wybrać „Open with Live server”.
Otworzy się podgląd strony, który będzie automatycznie odświeżany gdy zmienimy coś w html, css lub js.

Path IntelliSense
Podpowiada w kodzie ścieżki do plików.

Select Line Status Bar
Pokazuje na statusie (dolna belka edytora) ile linii zaznaczyliśmy. Przydatna opcja gdy piszemy artykuły z wykorzystaniem prism.js – szczególnie gdy chcesz użyć w tym pluginie line highlight do wyróżniania kawałków kodu.

Settings Sync
Umożliwia synchronizację ustawień edytora między komputerami. Wymaga konta na github.

Spell Right
Dodaje słownik, i podkreśla błędy w naszym kodzie. Żeby go aktywować klikamy na oczko z prawej strony na dolnej
belce statusu. Po kliknięciu wybieramy język Polski.

TODO Highlight
Podświetla TODO w kodzie

TODO Show
Pokazuje wszystkie TODO w naszym projekcie. Pozwala też przeskoczyć do wskazanego TODO.

View in Browser
Po kliknięciu prawym przyciskiem na nazwę pliku możemy go otworzyć w przeglądarce.

vscode-faker
Generuje przykładowe dane dla użytkowników, adresów itp.

Ustawienia

Domyślne ustawienia tego edytora są całkiem spoko. Jednak kilka rzeczy warto zmienić.
Na dole lewej belki jest kółko zębate. Po jego kliknięciu możemy wybrać sobie skórkę edytora, wygląd ikon w bocznej liście plików czy czy wreszcie przejść do Settings.

Po wybraniu Settings pojawi nam się okno podzielone na 2 części.
Po lewej stronie są wypisane i pogrupowane wszystkie domyślne ustawienia – nie tylko edytora ale też każdego pluginu, który zainstalujemy.
Jeżeli chcemy coś zmienić, musimy dane ustawienie skopiować do ustawień użytkownika, które są po prawej stronie.

Poza zmianą rozmiaru czcionki w edytorze, osobiście zmieniłem coś co mnie bardzo myliło – domyślne
podświetlenie aktywnej zakładki na górze edytora, które to nie wiedzieć czemu jest na odwrót (no ok – wiem jaki był zamysł autorów ale bardzo mnie to męczyło).
Na co dzień używam theme monokai więc moje ustawienia są jak poniżej:


{
    "editor.fontSize": 21,
    "workbench.colorTheme": "Monokai",
    "editor.tabCompletion": true,
    "editor.fontFamily": "Consolas, 'Courier New', monospace",
    "workbench.startupEditor": "newUntitledFile",

    "workbench.colorCustomizations": {
        "activityBar.background": "#000",
        "tab.activeBackground" : "#414339",
        "tab.inactiveBackground" : "#1E1F1C",
        "editor.lineHighlightBorder" : "#272822",
        "editor.lineHighlightBackground" : "#2C2E27",
        "editor.selectionHighlightBackground" : "#414339",
        "terminal.background" : "#111",
        "terminal.foreground" : "#ddd"
    },

    //tutaj naście innych ustawień
}

Emmet

W Sublime Text po zainstalowaniu dodatku Emmet dostajemy kombinację klawiszy Ctrl + Shift + Enter, która otwiera panel, w którym możemy wpisywać składnię Emmeta.
Panel ten nie tylko pozwala pisać skrócony kod, ale też po zaznaczeniu jakiegoś tekstu pozwala okrywać go znacznikami.
Zaznaczamy więc jakiś fragment w kodzie, naciskamy Ctrl + Shift + Enter, wpisujemy szybko strong i mamy objęty fragment strongiem.
Mega ułatwienie.

W Visual Studio Code Emmet jest zainstalowany domyślnie. Użycie Emmeta działa jak wszędzie – czyli piszemy w html skrócony kod – dla przykładu ul>li*10>a{Link $$}, naciskamy Tab i dostajemy w cały kod listy z 10 LI i linkami.
Powyższy film z linku wyjaśnia wszystko. Poza przyśpieszeniem w pisaniu html Emmet umożliwia okrywanie zaznaczonego tekstu znacznikami html.

Trzeba zaznaczyć tekst, wcisnąć Ctrl + Shift + P i wpisać Emmet : Wrap with Abvrevation (na szczęście Visual bardzo podpowiada więc nie trzeba wpisywać dokładnie).
Po wybraniu tej opcji pojawi się okienko, w które wpisujemy znacznik którym chcemy objąć tekst – w naszym przypadku strong.
Żeby ułatwić sobie całą procedurę warto wejść w opcje (trybik w prawym dolnym rogu) i wybrać Keyboard Shortcut.
W oknie które się pojawi wystarczy wyszukać Wrap Individual Lines with Abbreviation i podpiąć pod tą opcję klawisze. Ja podpiąłem to czego używałem w Sublime czyli Ctrl + Shift + Enter. Od teraz zaznaczam tekst, wciskam te klawisze, wpisuję strong i mam objęty strongiem tekst.

Snippety

Snippety czyli wcześniej zdefiniowane kawałki kodu, które możemy wstawiać do kodu.
Wpisujemy ciąg, który ustawimy sobie w snippecie, naciskamy Tab i wstawiony zostanie cały kod snippetu.

Takich snippetów jest cała masa – szczególnie emmet jest tutaj pomocny. Chcesz wstawić do kodu link ze stylami? Żadnego wpisywania z palca <link rel=”…” (bo kto pamiętał wszystkie atrybuty). Wpisujesz w html link i naciskasz tab. Pojawi się cały stosowny kod.

Podobnie jest z naszymi własnymi snippetami.

Żeby stworzyć własne snippety wchodzimy w File->Preferences->User Snippets i wybieramy język którego tyczy się snippet, który chcemy stworzyć.

Ja osobiście stworzyłem sobie podobne snippety co w przypadku Sublime Text. Dla CSS snippet do clearfix, box-sizing czy komentarz sekcji. Dla HTML komentarz zamykający (ułatwia to potem ogarnięcie się w długim kodzie), kod tworzący cały dokument html (trochę się różni od tego z emmeta, który wstawiamy za pomocą zapisu html:5 i Tab) oraz oczywiście snippet wstawiający img placeholder (przy czym takich serwisów istnieje masa, więc można wybrać coś innego – np ten). Opisywałem te snippety już w artykule o warsztacie webmastera.

Moje snippety w chwili pisania tego artykułu to:

html:


{
    "html": {
        "prefix": "html!",
        "body": [
            "<!doctype html>",
            "<html lang=\"pl\">",
            "    <head>",
            "       <meta charset=\"utf-8\">",
            "       <title></title>",
            "       <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">",
            "       <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
            "    </head>",
            "    <body>",
            "        <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></script>",
            "        <script>",
            "            $(function() {",
            "                ",
            "            })",
            "        </script>",
            "    </body>",
            "</html>"
        ],
        "description": "Html"
    },
    "close comment": {
        "prefix": "/e",
        "body": [
            "<!-- e: $1 -->"
        ],
        "description": "Close comment"
    },
    "close comment2": {
        "prefix": "/",
        "body": [
            "<!-- e: $1 -->"
        ],
        "description": "Close comment"
    },
    "php": {
        "prefix": "php",
        "body": [
            "<?php $1 ?>"
        ],
        "description": "php"
    },
    "img placehold": {
        "prefix": "imgp",
        "body": [
            "<img src=\"http://placehold.it/$1x$2\" width=\"$1\" height=\"$2\" alt=\"\" />"
        ],
        "description": "placeholder placehold.it"
    }

}

css:


{
    "clearfix": {
        "prefix": "clearfix",
        "body": [
            ".clearfix:after {",
            "    content: \"\";",
            "    display: table;",
            "    clear: both;",
            "}"
        ],
        "description": "section comment"
    },
    "box-sizing": {
        "prefix": "boxsizing",
        "body": [
            "*, *:after, *:before {",
            "    box-sizing: border-box;",
            "}"
        ],
        "description": "section comment"
    },
    "section comment": {
        "prefix": "//",
        "body": [
            "/* -------------------------------------------- */",
            "/* $1 */",
            "/* -------------------------------------------- */"
        ],
        "description": "section comment"
    }
}

Możesz też ściągnąć te pliki tutaj i tutaj.
Jak chcesz wystarczy je pobrać i skopiować sobie ich kod do swoich ustawień.

Ctrl + Shift + P

Wspomniana powyżej opcja odpalana przez klawisze Ctrl + Shift + P jak w innych edytorach typu Atom i Sublime (a i w debugerze Chrome) jest jedną z najważniejszych kombinacji jakie możesz tutaj wcisnąć. Pozwala ona bowiem wyszukiwać prawie każdą opcję w edytorze.
Swoją drogą w WebStorm i PhpStorm klawisze te to Ctrl + Shift + A.

Dla przykładu chcesz szybko włączyć w danym edytorze zawijanie wierszy. Zamiast przeszukiwać górne menu i klikać kursorem w View->Toggle Word Wrap
wciskasz Ctrl + Shift + P, wpisujesz word wrap i odpalasz tą opcję enterem.
Chcesz szybko zamienić wielkość liter? Ctrl + Shift + P i wpisujesz Upper…
Stworzyłeś nowy plik i chcesz zmienić kolorowanie składni na HTML (tak by działał emmet)? Ctrl + Shift + P, wpisujesz language, wybierasz opcję Change Language Mode i wybierasz html.
Chcesz włączyć Terminal na dole edytora? Jasne – możesz nacisnąć Ctrl + ` – ale musisz wcześniej znać ten skrót. Możesz też wcisnąć Ctrl + Shift + P i wpisać terminal i zatwierdzić to enterem.
Po kilku razach złapiesz taką wprawę że myszka i kursor odejdą w zapomnienie, a wtedy zaczną się czary.

Podsumowanie

Powyższy artykuł nie miał na celu stworzenia dogłębnego opisu tego edytora.
Nie opisałem tutaj Debugowania, obsługi Gita (który jest tutaj domyślnie dostępny) czy chociażby opcji która może cię zdziwić, a którą aktywuje się poprzez wybranie z górnego menu Help->Toggle Developer Tools. Edytor to takie miejsce, gdzie masz się czuć jak w domu. A własny dom najlepiej poznawać samemu. Powyższe to tylko kilka małych podpowiedzi.

Komentarze