Jedną z najbardziej imponujących części Visual Studio Code jest możliwość dostosowania, zwłaszcza za pomocą rozszerzeń. Nie będę omawiać rozszerzeń specyficznych dla frameworka, ale oto niektóre z najlepszych rozszerzeń VS Code do pisania JavaScript.
JavaScript (ES6 Code Snippets)
Rozszerzenia fragmentów są jedną z najpopularniejszych kategorii rozszerzeń, a ta podąża za nimi. Zawiera fragmenty nowoczesnego kodu JavaScript ES6, które powinieneś pisać (lub uczyć się, jeśli jeszcze tego nie zrobiłeś). Mimo że ten fragment nie jest specyficzny dla żadnego frameworka, fragmenty te mogą być wyzwalane z różnych typów plików.
- JavaScript (.js)
- Html (.html)
- Vue (.vue)
- JavaScript React (.jsx)
- TypeScript React (.tsx)
- TypeScript (.ts)
Wypróbuj te!
- imp – importowanie modułu
- imd – importowanie nazwanego eksportu
Prettier
Formatyzator kodu, który może automatycznie sformatować kod JavaScript. Po zainstalowaniu Prettier nigdy nie musisz się martwić formatowaniem, pozwól komputerowi się tym zająć!
Może być trochę trudno przyzwyczaić się do obsługi formatowania, ponieważ jestem pewien, że wielu programistów ma swój własny styl, który im się podoba. Posiadanie Prettier w zespole zapewnia, że wszyscy stosują ten sam styl kodowania.
Debugger for Chrome
Chociaż console.log () ma swoje miejsce, nie jest to najlepszy sposób na debugowanie. Chrome ma wbudowane narzędzia do debugowania, ale czy wiesz, że możesz także debugować bezpośrednio w VS Code za pomocą tego rozszerzenia?
Osobiście wolę debugować przy użyciu tego rozszerzenia. Oznacza to, że mogę pozostać w edytorze, do którego jestem przyzwyczajony, dokonywać zmian w locie itp. Możesz robić większość rzeczy, których można się spodziewać podczas debugowania.
- wyświetlanie danych wyjściowych konsoli
- przechodzić przez linie kodu, wywołania funkcji itp.
- obserwowanie zmiennych
- ustawić punkty przerwania
Quokka
Czy kiedykolwiek chciałeś przetestować funkcję lub pobawić się kodem JavaScript? Czasami możesz przetestować bezpośrednio w konsoli Chrome Dev Tools, czasem otworzysz CodePen. Za pomocą Quokka.js możesz utworzyć scratchpad bezpośrednio w VS Code!
Szybko i łatwo przetestuj JavaScript w Quokka.js.
Import Cost
Jeśli martwisz się wielkością pakietów i modułów, które importujesz do swojej aplikacji, sprawdź to rozszerzenie! Obok wyciągów z importu zobaczysz rozmiar importowanego pakietu. Jest to świetny sposób, aby upewnić się, że rozmiar pakietów aplikacji jest tak mały, jak to możliwe!
Path Intellisense
Podczas próby odwołania się do pliku w obszarze roboczym może być trudno zapamiętać dokładne ścieżki i nazwy plików. Staram się trzymać pasek menu w VS Code zamknięty przez większość czasu (aby zmaksymalizować kod nieruchomości), więc nienawidzę konieczności otwierania eksploratora plików w celu podwójnego sprawdzenia, gdzie znajduje się plik. Właśnie tam wkracza Path Intellisense!
To rozszerzenie zapewni ci komfort podczas odwoływania się do ścieżek plików. Wystarczy, że zaczniesz wpisywać ścieżkę w cudzysłowie, a otrzymasz intellisense dla nazw folderów i plików.
Better Comments
To rozszerzenie jest prawdopodobnie najmniej popularne w grupie, ale osobiście uważam je za niezwykle przydatne. Czy wiesz, kiedy masz fragment kodu, który musisz zaimplementować lub zakończyć później? A może chcesz oznaczyć fragment kodu jako przestarzały? A może masz pytanie do innego programisty dotyczące fragmentu kodu?
To rozszerzenie zapewni komentarze oznaczone kolorami, aby rozwiązać wszystkie powyższe problemy. Oto lista dostępnych kodów kolorów.
- Highlights
- Queries
- Alerts
- TODOs
Wallaby.js
Przeprowadź testy podczas pisania kodu! Od osób, które udostępniły nam Quokka.js, oto fajne narzędzie do przyspieszenia pisania kodu.
Te rozszerzenia znacznie pomogą ci przy tworzeniu oraz projektowaniu witryn www za pomocą JavaScript! Zainstaluj i używaj ile chcesz!