Wskazówki i porady dotyczące VSCode dla zaawansowanych użytkowników

Opublikowany: 2022-03-11

Dlaczego miałbym być zaawansowanym użytkownikiem programu Visual Studio?

Stanie się zaawansowanym użytkownikiem to kolejny sposób na wyprzedzenie. Deweloperzy często mówią o tym, jak pozostają na szczycie swojej gry i jak stale uczą się nowych rzeczy i wciąż doskonalą swoje umiejętności. To często zadawane pytanie podczas rozmowy kwalifikacyjnej, ponieważ pracodawcy wolą talenty poświęcone poszerzaniu ich umiejętności. Opanowanie środowiska IDE i komputera może być jedną z najlepszych inwestycji w rozwój zawodowy.

Deweloperzy zawsze szukają nowego bloga, który sprawi, że będą lepsi w swojej pracy. Niezależnie od tego, z jakiego IDE korzystasz, prawdopodobnie ma blog: Subskrybuj!

Innym powodem jest to, że po prostu oszczędza czas. Zainwestowanie czasu w poprawę przepływu pracy może się opłacić, ponieważ wyższa produktywność lub więcej czasu na zabawę. Dzisiaj przyjrzymy się bliżej programom Visual Studio i VSCode oraz omówimy sposoby doskonalenia umiejętności aż do stania się zaawansowanym użytkownikiem.

Jak zostać zaawansowanym użytkownikiem VSCode?

Oto, co odróżnia zwykłego użytkownika od zaawansowanego użytkownika :

Intymna znajomość Twojego IDE: VSCode ma doskonałą dokumentację, przeczytaj ją!
Dostosowanie: zaawansowani użytkownicy dostosowują przepływ pracy do swoich konkretnych potrzeb.
Zautomatyzuj wszystkie nudne i powtarzalne zadania.
Ciągle ulepszaj przepływ pracy i śledź ewolucję swojego środowiska IDE.

W tym artykule zamierzam wyjaśnić, w jaki sposób osobiście zajęłam się każdym z tych punktów i wyposażyć Cię w wiedzę, aby zrobić to samodzielnie. To, co robię, niekoniecznie będzie dla ciebie działać, przynajmniej nie do końca. Ludzie pracują w różnych środowiskach i projektach (dla mnie to głównie praca z React.js i TypeScript w systemie Windows), ale ogólne podejście jest ważne dla każdego.

Testowanie z Jest

Piszę jeden test na raz, co oznacza, że potrzebuję sposobu na uruchomienie jednego testu na raz. Jednak rozwiązanie natywnego wyrażenia regularnego jest dość niezgrabne. Dlatego używam Jest Runner. To przydatne rozszerzenie umożliwia wykonywanie lub debugowanie poszczególnych pakietów lub testów.

Poniższy film pokazuje, że wystarczy kliknąć prawym przyciskiem myszy nazwę testu i użyć menu kontekstowego, aby go uruchomić.

Testowanie z Pact

Najbardziej czasochłonną częścią pisania testu kontraktowego jest prawdopodobnie dopasowanie. Rozwiązałem to, tworząc pomocne fragmenty, aby zautomatyzować powtarzające się czynności. Oto niektóre, które stworzyłem, możesz ich używać (tj. Po prostu skopiuj i wklej je do /snippets/typescript.json programu /snippets/typescript.json ).

Poniższy film pokazuje, jak korzystać z tych fragmentów:

Zaznacz wszystkie wystąpienia tego samego typu, tj. zaznacz cały ciąg, czas i inne wartości.
Użyj wstępnie zdefiniowanego skrótu klawiszowego lub wywołaj Wstaw fragment i wybierz odpowiedni fragment lub po prostu zacznij wpisywać przedrostek fragmentu, którego chcesz użyć.

Gita

Większość programistów korzysta na co dzień z Git i GitHub, ja też. Staram się jednak unikać korzystania z terminala lub github.com.

GitHub Pull Requests and Issues pozwala mi otwierać, edytować i przeglądać PR w zaciszu VSCode. Uważam, że moje IDE jest lepszym miejscem do przeglądania kodu niż aplikacje internetowe lub komputerowe GitHub. Niektórzy programiści mogą się z tym nie zgodzić, ale doceniam konsekwencję i wygodę robienia tego w moim IDE.

Git potrafi tak wiele, a ja zapamiętałem tak mało jego poleceń. Ale po co w ogóle coś zapamiętywać? Zapamiętywanie zbyt wielu szczegółowych aspektów rutyny nie jest zbyt produktywne.

GitLens udostępnia mnóstwo niesamowitych funkcji na wyciągnięcie ręki. Dzięki temu rzadko muszę sięgać po terminal, aby korzystać z Gita.

Dostosowywanie terminala

Niezależnie od używanego systemu operacyjnego możesz zrobić lepiej niż domyślny terminal. Używam Terminala Windows + cmder. Jeśli jesteś użytkownikiem systemu Unix, wyszukaj iTerm (macOS) lub Oh My Zsh (Linux i macOS). Zintegrowałem je z VSCode i dodałem wiele aliasów (skrótów), które oszczędzają mi czas na pisanie poleceń.

Na przykład:

ys = yarn start - pomaga mi uruchomić aplikację z zaledwie dwoma znakami
del=RMDIR /S/Q $* && echo "Deleted Successfully!!!" - usuwa podany katalog i wyświetla komunikat o powodzeniu po zakończeniu
gdab = git branch | grep -v "master" | xargs git branch -D gdab = git branch | grep -v "master" | xargs git branch -D - usuwa wszystkie lokalne gałęzie oprócz master

Zapisywanie kilku postaci tu i tam może wydawać się głupie, ale te oszczędzające czas funkcje sumują się na dłuższą metę. Odnajduję dodatkową zaletę robienia aliasów — spędzanie mniej czasu na wpisywaniu ich pomaga mi pozostać skoncentrowanym i nie tracić myśli, ponieważ nie próbuję zapamiętać, jak wywołać polecenie.

Generowanie kodu

Tworzenie nowego komponentu, strony itp. jest czymś, co robię często i jest dość proste, jak większość czytelników wie. Ale tworzenie nowego folderu i inicjowanie w nim plików może być nużące. Więc zautomatyzowałem ten proces.

Poniższy film przedstawia użycie Supercharge React. Używając New Component , mogę określić nazwę i lokalizację nowego komponentu. Rozszerzenie następnie uruchamia skrypt, który tworzy folder i inicjuje ten nowy składnik.

IntelliSense

VSCode ma potężną technologię IntelliSense i przez większość czasu nie musisz myśleć o jej użyciu. Jednak podczas przeglądania sugestii możesz nacisnąć klawisze Ctrl+Spacja , aby wyświetlić dokumentację dotyczącą każdej dostępnej opcji.

IntelliSense można dodatkowo dostosować, aby pasował do Twojego przepływu pracy i osobistych preferencji.

Skróty klawiszowe

Jestem pewien, że używasz skrótów takich jak Ctrl+S i Ctrl+F . Wszystkie są dobrze udokumentowane, a jeśli nie jesteś zbyt zaznajomiony z szeroką gamą skrótów VSCode, zachęcam do zmiany tego i dołożenia dodatkowych kroków do ich opanowania. Pewne wiązanie jest zbyt niezgrabne? Polecenie, które przywołujesz, często trwa zbyt długo? Otwórz edytor klawiatury VSCode, aby utworzyć skróty.

Jeśli zastanawiasz się, czy polecenie zostało przypisane do określonej kombinacji klawiszy, kliknij przycisk klawiatury na pasku wyszukiwania, w którym możesz rejestrować naciśnięcia klawiszy. Zobaczysz wtedy, jakie/jeśli polecenia zostały z nimi powiązane.

Skróty myszy

Deweloperom często mówi się, że aby być produktywnym, muszą nauczyć się nienawidzić myszy i pokochać klawiaturę . Może to być prawidłowe, jeśli pracujesz na małych, gęstych plikach. Ale w dobie automatycznego formatowania kodu i plików, które zawierają setki linii kodu, uważam, że to raczej wyjątek niż reguła.

Nie tylko aktywnie używam myszy, ale dostosowałem ją do mojego przepływu pracy za pomocą Logitech Options. Zaprogramowałem specjalne klawisze myszy do wykonywania określonych poleceń w VSCode.

Oto, w jaki sposób możesz „nauczyć” mysz, aby robiła coś więcej niż tylko przesuwanie kursora i klikanie:

Wybierz VSCode z prawego górnego menu.
Kliknij przycisk, który chcesz dostosować.
Wybierz Przypisanie klawiszy z listy działań po lewej stronie.
Wprowadź predefiniowany skrót w VSCode.

Ustawienia kopii zapasowej i synchronizacji

Nie ma sensu dostosowywać czegokolwiek, jeśli nie możesz wykonać kopii zapasowej i użyć jej ponownie, gdy tylko będziesz jej potrzebować.

Natywne rozwiązanie jest obecnie dostępne tylko dla wtajemniczonych. Jednak Settings Sync pomaga zapisać ustawienia kodu jako Gist i umożliwia synchronizację przepływu pracy między wieloma komputerami. Aby go skonfigurować, potrzebujesz tokena GitHub, ale potem wystarczy uruchomić jedno polecenie, aby przesłać i pobrać ustawienia.

Zalecane rozszerzenia VSCode

Wspomniałem już o kilku rozszerzeniach i wyjaśniłem, jak z nich korzystać. Oto kilka godnych uwagi wzmianek:

Surround: Potrzebujesz zawinąć wybrany kod w funkcję strzałki, a może blok try-catch? To rozszerzenie zrobi to za Ciebie!
Wyszukaj node_modules: Nawet jeśli nie wykluczyłeś node_modules z eksploratora VSCode w celu zwiększenia wydajności, ten folder jest tak duży, że nie można go nawigować. To rozszerzenie umożliwia wyszukiwanie tego, czego szukasz, zamiast przewijania w nieskończoność.
Glean i React Refactor zapewniają przydatne narzędzia do refaktoryzacji plików JSX.
Auto Close Tag automatycznie dodaje tag zamykający dla plików HTML/JSX/TSX.
Narzędzia plików: wygodny sposób tworzenia, duplikowania, przenoszenia, zmiany nazwy i usuwania plików i katalogów. Jest również konfigurowalny.
JavaScript Booster automatyzuje niektóre typowe działania refaktoryzacji.

Streszczenie

Nie bądź zwykłym użytkownikiem. Zamiast tego bądź zaawansowanym użytkownikiem. Zawsze idź o krok dalej niż inni i zobacz, dokąd Cię zaprowadzi. Zawsze zwracaj uwagę na nieefektywności i staraj się je łagodzić.

Moje rozwiązanie tego problemu powinno być znane większości programistów: tablica Kanban . Za każdym razem, gdy zauważam coś, co mnie spowalnia, zapisuję to jako zadanie do wykonania. Zawsze, gdy mam trochę wolnego czasu, staram się znaleźć rozwiązanie.

Jeśli uważasz, że ten post jest dla Ciebie przytłaczający i nie wiesz od czego zacząć, przeczytaj dokumentację, zapewni Ci najlepszy zwrot z inwestycji ! Wiem, że czytanie oficjalnej dokumentacji brzmi nudno, ale obiecuję, że na dłuższą metę się opłaci. Nie tylko nauczy Cię, jak być bardziej produktywnym, ale dowiesz się, jak należy pisać dokumentację.

Aby to ułatwić, skompilowałem listę niezbędnych do przeczytania części dokumentacji:

Wskazówki i porady: Niektóre są oczywiste i prawdopodobnie już wiesz, chociaż gwarantuję, że znajdziesz coś, o czym nie wiedziałeś.
Edytowanie hacków: Te hacki edycyjne są niezwykle potężne, a uczenie się ich przyniesie ci korzyści na co dzień.
Zmniejsz/rozszerz kod: wypróbuj ten skrót, gdy łączysz się z innym twórcą, aby zaimponować im!
Skróty klawiszowe: dowiedz się, jak działają skróty klawiszowe i jak je dostosować, to jeden z fundamentów opanowania środowiska IDE.
Setki obsługiwanych języków programowania: dowiedz się, jakie konkretne funkcje ma VSCode dla wybranego języka.