TUTORIAL VS CODE - 5 NAJLEPŠÍCH ROZŠÍRENÍ PRE VÝVOJÁROV JAVASCRIPTU V ROKU 2019

Tutorial VS Code - 5 najlepších rozšírení pre vývojárov JavaScriptu v roku 2019

V tomto príspevku sa pozrieme na 5 najlepších rozšírení kódu Visual Studio, aby sme zlepšili svoje schopnosti vývoja v jazyku JavaScript.

Rozšírenia sú externé zdroje, ktoré vám pomôžu zlepšiť vstavané schopnosti kódu VS.

avg sa neaktualizuje

Jedna z najpozoruhodnejších vecí na Kód Visual Studio je schopnosť zlepšiť svoje schopnosti pridaním externých rozšírení. Na trhu je však veľa rozšírení. V tomto príspevku budeme diskutovať o 5 najlepších rozšíreniach, ktoré výrazne zlepšia váš vývoj JavaScriptu v kóde VS.

ESLint

ESLint je pripojiteľný a konfigurovateľný nástroj linter na identifikáciu a podávanie správ o vzoroch vývoja v jazyku JavaScript. Pomáha vám ľahko udržiavať kvalitu a štruktúru kódu. Pridanie tohto rozšírenia do kódu VS vám pomôže automaticky naformátovať kód a presadiť čistejší, dobre štruktúrovaný a konzistentný kód.

Získanie ESLintu

ESLint, spolu s každým ďalším rozšírením VS Code, je k dispozícii na serveri VS Code Marketplace . Jednoducho otvorte odkaz a kliknite na nainštalovať.

Ďalší spôsob, ako to dosiahnuť, je prostredníctvom samotného VS Code. Ak ste fanúšikom inštalácie svojich rozšírení v rámci kódu VS, postupujte takto:

Poznámka: V najnovšej verzii kódu VS nebudete musieť pri inštalácii rozšírenia kód VS znova načítať.

Po inštalácii môžete nakonfigurovať ESLint tak, aby fungoval podľa vášho výberu. Môžete ho napríklad nastaviť tak, aby kód formátoval iba pri ukladaní. Ešte viac, funkcie linkovania ESLint budú presadzovať určité vývojové smernice, ktoré vám pomôžu zostať konzistentné.

Debugger pre Chrome

Debugger pre Chrome je rozšírenie kódu VS používané na ladenie kódu JavaScript spusteného v prehliadači Google Chrome z kódu VS. Ušetrí vám stres z neustáleho prepínania kontextu pri prezeraní zmien v protokole alebo vo všeobecnosti pri vykonávaní operácií ladenia.

Získanie ladiaceho programu pre prehliadač Chrome

Rozšírenie Debugger pre prehliadač Chrome je k dispozícii na inštaláciu na serveri VS Code Marketplace spolu s akýmkoľvek ďalším rozšírením kódu VS, ktoré by ste mohli chcieť. Jednoducho otvorte odkaz a klikni Inštalácia a nainštalujte ho do svojho kódu VS.

Môžete ho tiež nainštalovať priamo z kódu VS kliknutím na ikonu rozšírení a vyhľadaním súboru Debugger pre Chrome rozšírenie a jeho inštalácia:

Poznámka: V najnovšej verzii kódu VS nebudete musieť pri inštalácii rozšírenia kód VS znova načítať.

Ďalšie funkcie

Po inštalácii budete mať prístup ku všetkým funkciám rozšírenia, ako je nastavenie zarážok, prechádzanie riadkov kódu, zobrazenie výstupu z konzoly, ladenie skriptov eval, značky skriptov a dynamicky pridávané skripty.

Obmedzenia

Stojí za zmienku, že existujú určité obmedzenia v tom, čo rozšírenie dokáže. Nemôže napríklad ladiť webových pracovníkov alebo akékoľvek funkcie, ktoré nie sú ladením skriptov.

Útržky kódu JavaScript (ES6)

Útržky kódu JavaScript (ES6) je rozšírenie kódu VS, ktoré obsahuje útržky kódu pre JavaScript v syntaxe ES6 pre kód VS. Čo je viac? Má podporu pre JavaScript aj TypeScript.

Rozšírenia o úryvky sú v komunite VS Code veľmi obľúbené. Tento je ešte lepší, pretože vám pomôže rýchlo pridať kódy ES6 do vášho projektu niekoľkými stlačeniami klávesov.

Podporované jazyky

Okrem JavaScriptu podporuje aj ďalšie jazyky, ako napríklad:

php script sociálna sieť

HTML
Videné
Reagovať na stroji
JavaScript Reagovať
atď.

Úryvky

Tu je niekoľko úryvkov a ich spúšťačov, ktoré by ste mali vedieť.

Na stránke je dlhý zoznam týchto úryvkov a ich príslušných spúšťačov Trhovisko pre vašu spotrebu.

Získanie útržkov kódu JavaScript (ES6)

Rovnako ako predchádzajúce rozšírenia môžete získať útržky kódu JavaScript (ES6) z VS Code Marketplace alebo priamo z VS Code.

Farbič párových konzol

Toto je môj osobný favorit. Okrem estetického dojmu, ktorý dáva vášmu kódu vo VS Code, vám pomôže automaticky zosúladiť všetky vaše rovnátka. Sledovanie všetkých zátvoriek, hranatých zátvoriek a zátvoriek v našom kóde často prináša úlohu, keď sa naše riadky kódu rozrastajú.

Farbič párových konzol je plne prispôsobiteľný tým, že môžete definovať, aké typy symbolov chcete priradiť, a rovnako ho priradiť k definovaným farbám podľa vášho výberu.

Získanie kolorizátora párových konzol

Ak si chcete nainštalovať toto rozšírenie, zamierte do Trhovisko a kliknite na Inštalácia tlačidlo na spustenie inštalácie vo VS kóde. Môžete ho tiež nainštalovať priamo z kódu VS vyhľadaním pomocou ikony rozšírení, ako je táto.

Zdá sa, že ho už mám nainštalovaný, a preto ho nevidíte Inštalácia tlačidlo, ako by ste inak urobili.

Inteligencia cesty

Toto je ďalšie z mojich obľúbených rozšírení VS Code. Pamätať si presné cesty k súborom je pre mňa skutočne náročné a pri skutočne veľkých projektoch s mnohými súbormi to bude ešte náročnejšie. Našťastie, Inteligencia cesty rozšírenie príde na záchranu. Automaticky doplní názvy súborov za vás, takže si nemusíte robiť starosti so zapamätaním si všetkých svojich názvov súborov a ich miest na ukladanie.

Stojí za zmienku, že táto konkrétna funkcia je v niektorých projektoch predinštalovaná. Preto preň možno nebudete musieť inštalovať rozšírenia.

Získanie inteligentnej cesty

Rozšírenie Path Intellisense je k dispozícii na kóde VS Trhovisko . Stačí otvoriť odkaz a nainštalovať rozšírenie. Ešte lepšie je, že ste si ho mohli nainštalovať prostredníctvom NPM alebo priamo z sekcie rozšírení VS Code.

Použitie

Obrazový kredit: Inteligencia cesty

Záver

Tu to máme. V tomto príspevku sme zdôraznili 5 Rozšírenia kódu Visual Studio to určite zvýši vašu Vývoj JavaScriptu . ** ESLint ** vám pomôže napísať čistejší a konzistentnejší kód; Debugger pre Chrome pomôže lepšie ladiť; Útržky kódu JavaScript (ES6) zvýši vašu produktivitu generovaním úryvkov za vás; Farbič párových konzol bude tam, aby vám pomohol vystopovať a priradiť zadné zátvorky k ich príslušným párom; a nakoniec vám rozšírenie ** Path Intellisense ** pomôže s automatickým dopĺňaním názvov súborov.

Ak máte ďalšie úžasné rozšírenia, ktoré podľa vás zlepšia naše Vývoj JavaScriptu vo VS kóde , pokračujte a spomenúť ich v sekcii komentárov.

#visual-studio #javascript #web-development

Tutorial VS Code - 5 najlepších rozšírení pre vývojárov JavaScriptu v roku 2019