Kod programu Visual Studio może to zrobić?

Jakieś dwa lata temu po raz pierwszy otworzyłem program Visual Studio Code (VS Code). Jedynym powodem, dla którego to zrobiłem, jest to, że pracowałem nad projektem TypeScript (również dość niechętnie) i byłem zmęczony walką z edytorem i kompilatorem oraz wszystkimi ustawieniami, których potrzebowałem, aby projekt TypeScript działał. Ktoś wspomniał mi, że TypeScript „po prostu działa” w VS Code i byłem mile zaskoczony, że mieli rację.

Spodziewałem się tego. VS Code pochodzi od firmy Microsoft, więc oczekuje się, że TypeScript po prostu zadziała. Nie spodziewałem się, że praktycznie wszystko, co musiałem zrobić w VS Code, też „po prostu zadziałało”. I mam na myśli wszystko . Chociaż ten artykuł koncentruje się głównie na funkcjach dla sieci Web, a także programistów JavaScript, VS Code ma integrację z Go, Python, Java i Ruby — żeby wymienić tylko kilka.

W ciągu następnych kilku miesięcy zacząłem odkrywać w VS Code rzeczy, które uważałem za niezwykłe. Oficjalnie przeszedłem na VS Code i od tego czasu nie oglądałem się wstecz. Przez miesiące tworzyłem listę moich ulubionych wskazówek, trików i rozszerzeń do VS Code, które mogą wywołać taką samą reakcję, jak ja i nadal mam: „VS Code może to zrobić?!”

Interaktywny plac zabaw

Jednym z najlepszych sposobów poznania tajników VS Code jest przejście przez Interaktywny Plac Zabaw.

Jest to specjalna strona, która zawiera typowe skróty klawiaturowe i pojęcia, takie jak wiele kursorów, dzielone okienka i skróty klawiaturowe. Każdy z przykładów jest interaktywny, dzięki czemu możesz przećwiczyć samouczki bezpośrednio w samych samouczkach.

Interaktywny samouczek znajduje się bezpośrednio na stronie „Witamy” po pierwszym otwarciu edytora:

Wiele osób (w tym ja) całkowicie tęskni za tym, ponieważ znajduje się poniżej „zagięcia” i u dołu strony. Poza tym, kto czyta ekrany powitalne?

Uwaga : Możesz wrócić do interaktywnego samouczka w dowolnym momencie, otwierając paletę poleceń VS Code Ctrl/Cmd + Shift + P i wybierając „Interaktywny plac zabaw”.

Teraz, gdy już opanowałeś podstawy, będziesz potrzebować czcionki, która jest tak piękna, jak kod, który zamierzasz napisać. W tym celu nie szukaj dalej niż FiraCode i Font Ligatures.

Ligatury czcionek

Ligatury czcionek to czcionki zawierające znaki specjalne używane do reprezentowania symboli składających się z więcej niż jednego znaku. Mamy ich dużo w programowaniu. Będą to znaki takie jak <= , >= , == i === .

FiraCode to urocza ligatura czcionek dla VS Code. Najpierw pobierz czcionkę FiraCode z GitHub i dodaj ją do czcionek komputera. Następnie dodaj następujące wiersze do pliku preferencji użytkownika Ctrl/Cmd + , .

 "editor.fontFamily": "Fira Code", "editor.fontLigatures": true 

Wypróbuj kilka znaków specjalnych, które wymieniłem powyżej, aby zobaczyć różnicę. Ligatury czcionek pojawiają się w miejscach, których normalnie byś się nie spodziewał. Miejsca takie jak www i && . Śmiało, spróbuj i zobacz, co odkryjesz!

Teraz, gdy masz ładną ligaturę czcionek i kilka wspaniałych nowych symboli, nadszedł czas, aby wykorzystać pamięć mięśniową, którą zbudowałeś przez lata w poprzednich edytorach, instalując mapowanie klawiatury.

Mapowania klawiatury

Częścią mojego wahania przed przejściem na VS Code było to, że zainwestowałem trochę frustracji i wysiłku, aby nauczyć się skrótów klawiaturowych Sublime Text. Byłem też trochę dumny ze swoich umiejętności gry na klawiaturze i wcale nie chciałem z tego zrezygnować.

Na szczęście nie musiałem.

VS Code ma coś, co nazywa się mapami klawiszy . Są to rozszerzenia, które mapują wszystkie jego skróty (no, prawie wszystkie) do innych edytorów. Istnieją mapy klawiszy dla wszystkich popularnych edytorów, w tym Sublime, Atom, Emacs, a nawet Eclipse!

Aby zainstalować mapę klawiszy, otwórz pasek wyszukiwania rozszerzeń, naciskając Ctrl/Cmd + K → Ctrl/Cmd + X . Następnie wyszukaj „mapa klawiatury”.

Powinienem zauważyć, że od tego czasu usunąłem Sublime Keymap. Po wystarczającym użyciu mogłem ponownie podłączyć mój mózg, aby korzystać ze skrótów VS Code, gdy wyjdą z pudełka. Pomyśl o mapach klawiszy jak o kołach treningowych: są dobrym pomysłem, gdy dopiero zaczynasz, ale w pewnym momencie prawdopodobnie zechcesz je zdjąć.

Teraz, jeśli jesteś podobny do mnie, masz wiele komputerów i możesz edytować w różnych miejscach w zależności od projektu i dnia. Wprowadziliśmy już kilka zmian w naszej konfiguracji VS Code i zamierzamy wprowadzić jeszcze więcej. Nie chcemy powtarzać tej konfiguracji wszędzie, gdzie używamy VS Code. Właśnie tam pojawia się rozszerzenie Settings Sync.

Synchronizacja ustawień

Dzięki rozszerzeniu Settings Sync możesz wyeksportować wszystkie ustawienia programu VS Code do Gist, a następnie ściągnąć je wszystkie z innej instalacji programu VS Code i natychmiast zastosować.

Jest to również dobry sposób na udostępnienie konfiguracji współpracownikom. Po prostu wyślij im identyfikator do swojego Gist, a oni będą mogli zsynchronizować wszystkie twoje ustawienia z ich instalacją. Niektóre sklepy mają centralną treść, a wszyscy nowi programiści w zespole mogą uzyskać dokładną konfigurację za pomocą jednego prostego polecenia. To jest produktywność!

A mówiąc o produktywności, przejdźmy od razu do jednego z moich ulubionych narzędzi zwiększających produktywność dla twórców stron internetowych: Emmeta.

Mrówka

Emmet to popularne narzędzie do rozszerzania znaczników i CSS, które istnieje już od dłuższego czasu. Jednak prawie codziennie spotykam ludzi, którzy albo o tym nie słyszeli, albo są nowicjuszami w rozwoju i dopiero się o tym uczą. W porządku! Wszyscy uczymy się różnych rzeczy w różnym czasie.

Emmet jest wbudowany w VS Code, więc uruchomienie go nie wymaga dodatkowego wysiłku. Po prostu zacznij wpisywać składnię Emmeta w pliku HTML lub CSS i pozwól edytorowi zrobić resztę. Domyślnie VS Code wyświetli nawet podgląd nadchodzącego rozszerzenia Emmet.

Zgrabną sztuczką do użycia z Emmetem jest mapowanie skrótu klawiaturowego ( Ctrl / Cmd + K → Ctr / Cmd + S otwiera mapowania klawiatury) do polecenia „Zawijaj poszczególne wiersze za pomocą skrótu”. Jest to podobne do starego „Zawijaj zaznaczenie jako łącze” z Textmate, ale z dodatkową korzyścią polegającą na możliwości zawijania wielu wierszy naraz z bardziej złożonym rozwinięciem.

Emmet może być również używany w plikach markdown, JSX i .vue . Aby je włączyć, dodaj odpowiednie mapowanie języka do pliku preferencji użytkownika Ctrl/Cmd + , .

 "emmet.includeLanguages": { "javascript": "javascriptreact", "markdown": "html" },

W przypadku JSX Emmet jest na tyle sprytny, że używa className zamiast class wewnątrz rozszerzenia.

Kolejną fajną cechą Emmeta, która była dla mnie nowością, jest możliwość automatycznego dostarczania szerokości i wysokości obrazu, po prostu patrząc na plik obrazu połączony w src . Działa to w HTML i CSS. Działa również z obrazami hostowanymi lokalnie w projekcie i obrazami pod innymi adresami URL. Aby skorzystać z tej funkcji, umieść kursor w tagu obrazu, otwórz paletę poleceń Ctrl/Cmd + Shift + P i wybierz „Aktualizuj rozmiar obrazu”. Magia!

Aby uzyskać głębsze informacje o tym, czym jest Emmet i o różnych sposobach korzystania z niego w VS Code, zapoznaj się z tym artykułem o sztuczkach CSS.

Podczas gdy Emmet dba o produktywność w znacznikach i CSS, sam VS Code zapewnia uzupełnianie kodu w formie intellisense; i działa w miejscach, których możesz się nie spodziewać.

Intellisense w plikach JSON

Intellisense jest dość dobrze znaną funkcją edytora, ale przede wszystkim myśli się o niej tylko w plikach kodu. VS Code rozszerza klasyczną definicję intellisense i dodaje ją również do plików JSON. Zobaczysz to, jeśli dodasz jakiekolwiek ustawienia do pliku preferencji użytkownika. VS Code zapewnia również funkcję intellisense dla plików package.json . Jeszcze bardziej imponujące jest to, że zapewnia intellisense pakietom npm wewnątrz package.json . Potrzebujesz konkretnego pakietu i nie pamiętasz wersji? Nie ma problemu! VS Code przyjrzy się npm i zwróci najnowszą wersję w intellisense.

Niektórzy zauważyli, że nie edytują ręcznie swojego pliku package.json . Jednak od czasu do czasu robię to z jakiegoś dziwnego powodu, a konieczność sprawdzania wersji pakietu zawsze była dla mnie ogromnym bólem. Teraz jest to tylko dostarczone przez VS Code. Jedna rzecz mniej, do której muszę się domyślać.

Nawet z Intellisense jest to JavaScript, więc jeśli nie jesteśmy super odważni (lub uzależnieni od cierpienia), będziemy potrzebować lintera. VS Code ma świetną integrację z ESLint za pośrednictwem rozszerzenia ESLint, ale są też inne opcje i obejmuje sprawdzanie typu niewpisanego kodu JavaScript.

Wpisz Sprawdź swój JavaScript

Pamiętasz tę wspaniałą integrację TypeScript, o której mówiłem wcześniej? Jedną z mało znanych sztuczek jest to, że możesz użyć kompilatora TypeScript do sprawdzenia również zwykłych plików JavaScript. Robisz to, dodając //@ts-check na górze dowolnego pliku JavaScript, a natychmiast otrzymasz sprawdzanie błędów TypeScript w pliku.

Nie chcesz dodawać tego wiersza do każdego pliku, więc możesz użyć TypeScript do sprawdzenia każdego pliku JavaScript w projekcie, dodając następujący wiersz do pliku preferencji użytkownika Ctrl/Cmd + , .

 "javascript.implicitProjectConfig.checkJs": true

Jeśli chcesz kontrolować określone funkcje sprawdzania języka TypeScript, po prostu upuść plik .tsconfig w swoim projekcie. Kiedy mówię, że TypeScript „po prostu działa” w VS Code, mam na myśli, że działa tak dobrze, że jest prawie bezproblemowy dla programisty.

Teraz, gdy masz już linting kodu, a nawet sprawdzanie typu, gdy jest to potrzebne, nadszedł czas, aby program VS Code poradził sobie z tymi nieznośnymi problemami z formatowaniem przy użyciu Prettier.

Ładniejsze

Prettier to wspaniałe narzędzie do formatowania kodu typu open source. Jest szeroko stosowany przez zespoły (i osoby prywatne), aby upewnić się, że style kodowania są uniwersalne we wszystkich projektach i programistach. Automatycznie zmienia formatowanie kodu, aby pasował do pewnych zdefiniowanych standardów, takich jak kolumna, na której kod ma zostać zawinięty, jak formatować obietnice i czy używać pojedynczych czy podwójnych cudzysłowów.

Ładniejsze jest włączone w programie VS Code z rozszerzeniem Ładniejsze. Aby go zainstalować, otwórz panel Rozszerzenia Ctrl/Cmd + K → Ctrl/Cmd + X i wyszukaj „ładniejsze”.

Po zainstalowaniu zobaczysz Prettier na pasku zadań dla każdego pliku, który Prettier wie, jak go sformatować. Możesz wywołać Prettier na pliku, używając polecenia „Formatuj dokument”: Alt/Option + Shift + F .

Zgrabną sztuczką (i pokazaną w powyższym filmie) jest ustawienie VS Code na automatyczne formatowanie podczas zapisywania. Spowoduje to wywołanie Prettier za każdym razem, gdy plik zostanie zapisany. Aby uzyskać tę funkcję, dodaj następujące ustawienia do pliku preferencji użytkownika ( Ctrl/Cmd ).

 "editor.formatOnSave": true

Ustawienia ładniejsze można również dostosować z pliku Preferencje użytkownika. Jeśli chcesz, aby firma Prettier używała konfiguracji ESLint do ustawień, po prostu określ ustawienie „eslintIntegration”.

 "prettier.singleQuote": true, "prettier.eslintIntegration": true, "prettier.tabWidth": 2

Zobacz, jak piękny jest teraz Twój kod! Piękna. Już nigdy nie będziesz chciał opuścić swojego edytora. Dzięki opcjom terminala w VS Code możesz nie musieć!

Dostęp do terminala

Być może zauważyłeś na powyższym filmie, że VS Code ma zintegrowany terminal. Możesz go uruchomić, naciskając Ctrl + , . Można otworzyć wiele sesji terminala, które pojawią się na liście rozwijanej w prawym górnym rogu okna terminala.

Miałem trudności z przełamaniem nawyku na wbudowanym terminalu na Macu. Terminal zewnętrzny można otworzyć w dowolnym momencie z VS Code w dokładnej lokalizacji aktualnie wyświetlanego pliku, używając skrótu klawiaturowego Ctrl/Cmd + Shift + C .

Pomijając głupie sztuczki terminalowe, jedną z najważniejszych rzeczy, które programista może zrobić, aby zwiększyć swoją produktywność, jest po prostu współpraca z innymi programistami. Robimy to cały czas. Niektórzy z nas mają szczęście siedzieć obok siebie. Niektórzy z nas robią to przez Skype. Bez względu na to, jak sparujesz program, VS Code właśnie dodał funkcję, która prawdopodobnie zmieni sposób, w jaki myślisz o współpracy.

Udostępnianie na żywo

VS Code Live Share został właśnie ogłoszony w zeszłym tygodniu na Microsoft Connect. Pozwala wielu programistom natychmiast sparować projekt. Nie ma potrzeby sprawdzania kodu w repozytorium ani uruchamiania narzędzia do udostępniania ekranu. Inni programiści mogą natychmiast załadować Twój projekt w swoim edytorze i zobaczyć Twój kursor w czasie rzeczywistym bez konieczności konfigurowania czegokolwiek po ich stronie.

Działa to również w przypadku debugowania. Jeśli rozpoczniesz sesję debugowania, druga osoba otrzyma to samo pełne środowisko debugowania bezpośrednio w swoim edytorze. Mogą nawet kontrolować proces debugowania, wchodząc, wychodząc i pokonując kod. Jeśli inna osoba zmieni Twój kod, zmieni się to również w Twoim edytorze. Naprawdę trudno jest owinąć głowę, dopóki nie zobaczysz tego w akcji. Gorąco polecam obejrzenie tego krótkiego demo. Nadal nie jestem pewien, jak udało nam się to zrobić tak długo, skoro deweloperzy nie mają takiej funkcji.

W chwili pisania tego tekstu udostępnienie VS Code Live jest w wersji zapoznawczej, ale prawdopodobnie będzie ogólnie dostępne do czasu, gdy to przeczytasz. W rzeczywistości możesz już go używać!

Teraz, gdy Twoi współpracownicy pomyślnie naprawili wszystkie Twoje błędy (hura za współpracę!), nadszedł czas, aby sprawdzić to wszystko w serwisie GitHub. Jedną z moich ulubionych funkcji VS Code jest to, że integracja z Git jest tak dobra, że ​​nawet ja mogę korzystać z Github.

Integracja z Git

Mam też problemy z Git na terminalu, ponieważ jest to czarna skrzynka. Wylatujesz na oślep poza edytor, mając tylko swoje umiejętności terminalowe i znajomość interfejsu Git CLI, aby przejść przez ten etap. To może wystarczyć niektórym, ale zacząłem polegać w dużym stopniu na wizualnej integracji Git, która jest dostarczana z VS Code.

VS Code automatycznie pobiera dowolną konfigurację Git w Twoim projekcie. Istnieje cała zakładka poświęcona tylko opcjom Git. Po wyjęciu z pudełka VS Code obsługuje między innymi dodawanie, zatwierdzanie i wypychanie, rozgałęzianie, przechowywanie i popping. Podczas przeglądania plików na karcie Git otrzymujesz bezpośrednie porównanie oryginału z różnicą. Możesz teraz także przeglądać pliki diff bezpośrednio w pliku kodu, a nawet można je stamtąd cofnąć.

Do tej pory koncentrowaliśmy się głównie na samej edycji tekstu, ale VS Code doskonale nadaje się do znacznie cięższego podnoszenia; tego rodzaju rzeczy, których zwykle oczekujemy od zintegrowanego środowiska programistycznego (IDE), a nie edytora tekstu. Oto niektóre z moich ulubionych.

Zerowa konfiguracja Uruchamianie i debugowanie Node.js

VS Code uruchomi i dołączy debuger do dowolnego kodu JavaScript bez żadnych rozszerzeń ani konfiguracji. Po prostu naciśnij klawisz F5 i wybierz „Węzeł” z listy rozwijanej. Możesz także przejść do zakładki debugowania Ctrl/Cmd + Shift + D i kliknąć zieloną strzałkę u góry. Spowoduje to uruchomienie aplikacji i dołączenie debugera zapewniającego w pełni funkcjonalne środowisko debugowania.

Punkty przerwania kolumny

VS Code obsługuje również wbudowane lub kolumnowe punkty przerwania. Dzieje się tak, gdy ustawiasz punkt przerwania w środku wiersza kodu. Jest to szczególnie przydatne do debugowania łańcuchów obietnic i wszelkich innych miejsc, w których w jednym wierszu znajduje się wiele funkcji.

Wystarczy kliknąć prawym przyciskiem myszy podczas sesji debugowania i wybrać „Dodaj punkt przerwania kolumny”.

Buduj, uruchamiaj, debuguj i wdrażaj Docker

Firma Microsoft udostępnia rozszerzenie platformy Docker dla programu VS Code, które umożliwia wykonywanie praktycznie wszystkich akcji platformy Docker w programie VS Code. W rzeczywistości VS Code automatycznie utworzy wymagane pliki platformy Docker dla Twojego projektu (w najlepszym możliwym zakresie) na podstawie wybranego środowiska wykonawczego i struktury projektu. W przypadku prostych aplikacji Node.js oznacza to konfigurację Dockera o zerowej konfiguracji.

W tym przykładzie biorę aplikację Express i używam programu VS Code do tworzenia wszystkich plików kompozycji Docker i Docker. VS Code tworzy również odpowiednią konfigurację debugowania, więc po uruchomieniu obrazu mogę dołączyć debugger VS Code i wszystko po prostu działa. Rozszerzenie umożliwia również publikowanie obrazu w Docker Hub lub Azure Container Registry.

Złożone konfiguracje uruchamiania

Chociaż narzędzia do budowania, takie jak Webpack, całkowicie zmieniły sposób, w jaki budujemy aplikacje, wprowadziły również nowe wyzwania programistyczne, które wcześniej nie istniały. Webpack korzysta z własnego serwera programistycznego w pamięci, aby zapewnić „gorące przeładowania”, ale po przejściu do środowiska produkcyjnego Webpack nie wchodzi w grę, a Twój serwer przejmuje kontrolę.

Zasadniczo konieczne jest teraz uruchamianie jako dwóch oddzielnych projektów w fazie rozwoju i jednego projektu w produkcji. Oznacza to, że zwykle debugujemy aplikacje front-endowe w przeglądarce za pomocą narzędzi Chrome DevTools i części serwerowej w naszym edytorze tekstu.

VS Code ma możliwość uruchamiania wielu procesów i dołączania do nich debugerów za pomocą jednego polecenia uruchamiania. Oznacza to, że możliwe jest debugowanie kodu JavaScript frontonu i kodu Node.js po stronie serwera bezpośrednio z poziomu VS Code.

Nazywa się to „Konfiguracją uruchamiania związku”. W powyższym filmie używam następującego kodu do debugowania aplikacji, która używa Express/Cosmos DB dla backendu i React dla frontendu.

 { "compounds": [ { "name": "Launch Browser/Server", "configurations": ["Launch Browser", "Launch Server"] } ], "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Browser", "url": "https://localhost:3000", "webRoot": "${workspaceRoot}/src" }, { "type": "node", "request": "launch", "name": "Launch Server", "program": "${workspaceRoot}/server/server.js" } ] }

Pamiętaj, że wymaga to zainstalowania rozszerzenia Chrome Debugger. Administracja MongoDB

Administracja MongoDB

VS Code może pomóc w wizualnym administrowaniu i wysyłaniu zapytań do dowolnej bazy danych MongoDB lub Cosmos DB (lokalnej lub zdalnej) przy użyciu rozszerzenia Cosmos DB.

Rozszerzenie Cosmos DB połączy się z dowolnymi istniejącymi wystąpieniami Cosmos DB na platformie Azure, ale połączy się również z dowolnym wystąpieniem MongoDB dostępnym za pomocą adresu URL mongodb:// .

Możesz tworzyć i usuwać bazy danych i kolekcje na pasku bocznym, a także tworzyć i pracować z notatnikami MongoDB w celu testowania zapytań. VS Code zapewnia pełną inteligencję kolekcji i interfejs API MongoDB w Mongo Scrapbooks. Możesz nawet zmienić wynik zapytania w okienku wyników, a zmiany zostaną utrwalone z powrotem w bazie danych.

Wdrażanie aplikacji

Innym zgrabnym rozszerzeniem programu VS Code jest rozszerzenie Azure AppService. Jeśli chcesz wdrożyć swoje aplikacje w chmurze, możesz to zrobić bez opuszczania edytora.

Firma Microsoft udostępnia rozszerzenie o nazwie AppService Tools for VS Code, które umożliwia tworzenie nowych witryn, zarządzanie istniejącymi i wdrażanie kodu za pomocą kliknięcia prawym przyciskiem myszy lub wstępnie utworzonego skryptu powłoki, który automatyzuje proces sprawdzania kodu we właściwym Git punkt końcowy, aby skonfigurować ciągłe dostarczanie.

Tak, VS Code może to zrobić

Do tej pory prawdopodobnie zrozumiałeś, że tak naprawdę nie ma niczego, czego VS Code nie może zrobić. Jeśli potrzebujesz określonej funkcjonalności, jest bardzo prawdopodobne, że albo edytor już ją obsługuje (nawet nie dotknęliśmy integracji z Git), albo ktoś utworzył rozszerzenie dla konkretnego przypadku użycia. Nawet jeśli zmienia to Markdown w prezentacje Reveal.js!

Dodatkowe zasoby

• „VS Code Insiders Build”, Visual Studio Code, Microsoft
• „Niesamowita lista VS Code”, Valerii Iatsko, GitHub
• „Wskazówki i wskazówki dotyczące VS Code”, Valerii Iatsko, GitHub