Ak programujete denne, viete, že dobre naladený editor robí rozdiel medzi produktívnym dňom a festivalom frustrácií. Visual Studio Code sa stal editorom referencií Vďaka svojmu výkonu, systému rozšírení a obrovskej komunite, ktorá neustále vytvára nové nástroje.
Skutočné kúzlo VS Code nespočíva len v základnom editore, ale aj v jeho ekosystéme. Stovky rozšírení pridávajú pokročilé automatické dopĺňanie, lintery, témy, lokálne servery, ladenie, ikony, integráciu s Gitom, umelú inteligenciu a mnoho ďalšieho.V tejto príručke nájdete veľmi kompletnú kolekciu odporúčaných rozšírení: od základných pre akýkoľvek jazyk, až po tie špecifické pre JavaScript, Python, PHP, HTML/CSS, TypeScript a každodennú prácu s Gitom, Dockerom alebo Markdownom.
Čo je VS Code a prečo sú jeho rozšírenia také dôležité?
Kód Visual Studia je bezplatný a multiplatformový editor kódu Vytvorené spoločnosťou Microsoft, dostupné pre Windows, macOS a Linux a patrí medzi najlepšie vývojové prostredia.
Už po vybalení obsahuje veľmi výkonné funkcie: zvýrazňovanie syntaxe, IntelliSense, integrované ladenie, terminál, integrácia s Gitom a základná podpora pre mnoho jazykovAle skutočný rozbeh sa prejaví, keď začnete inštalovať rozšírenia, aby ste prispôsobili prostredie svojmu spôsobu práce.
Architektúra VS Code je navrhnutá tak, aby bola vysoko rozšíriteľná: prakticky každý aspekt editora je možné vylepšiť alebo nahradiť, od ladiacieho systému až po témy, ikony alebo automatické dopĺňanie pre konkrétny jazyk.
Okrem toho neexistuje len jeden VS kód: Môžete použiť oficiálnu verziu alebo alternatívy s otvoreným zdrojovým kódom, ako napríklad VSCodiumktoré odstraňujú telemetriu a určité proprietárne časti, ale zachovávajú kompatibilitu s väčšinou rozšírení.
Ako nainštalovať a spravovať rozšírenia vo VS Code
Inštalácia rozšírení vo VS Code je veľmi jednoduchá. Všetko sa robí z vlastného rozhrania editora.bez nutnosti manuálneho sťahovania súborov.
Ak chcete pridať nové funkcie, otvorte editor a prejdite na panel rozšírení (štvorcová ikona na bočnom paneli alebo skratka). Ctrl+Shift+X / Cmd+Shift+X v systéme MacOS). Odtiaľ vyhľadávajte podľa názvu alebo kľúčového slova. rozšírenie, ktoré vás zaujíma.
Keď nájdete zaujímavé rozšírenie, skontrolujte jeho informačný list: Počet stiahnutí, recenzií, kompatibility a snímok obrazovkyTo vám dá dobrý prehľad o tom, či sa oplatí ho inštalovať alebo nie.
Ak chcete dokončiť proces, jednoducho kliknite na tlačidlo inštalácie. Väčšina rozšírení sa aktivuje okamžiteNiektoré vyžadujú opätovné načítanie okna editora a niektoré vyžadujú dodatočnú konfiguráciu (napríklad tie, ktoré závisia od externých nástrojov, ako je ESLint, PHP Debug s Xdebugom atď.).
Základné všeobecné rozšírenia pre akýkoľvek projekt
Existuje sada rozšírení, ktoré by mal mať nainštalovaný prakticky každý, bez ohľadu na jazyk alebo balík, ktorý používa. Zameriavajú sa na produktivitu, formátovanie, spoluprácu, správu verzií a používateľskú skúsenosť..
krajší
krajší je de facto štandardný formátovač kódu Vo svete JavaScriptu a mnohých ďalších jazykov automaticky prepíše váš kód podľa dobre definovaných pravidiel štýlu.
Je schopný formátovať JavaScript, TypeScript, JSX, TSX, JSON, HTML, CSS, SCSS, Less, YAML, GraphQL, Markdown, Vue, Angular a mnoho ďalších. Cieľom je, aby diskusie o tom, či používať jednoduché alebo dvojité úvodzovky, bodkočiarky alebo nie, kde používať zátvorky atď., zmizli, pretože Celý projekt sa riadi rovnakou konvenciou.
Môžete použiť predvolené nastavenia alebo si vytvoriť vlastné pravidlá pomocou typov súborov .prettierrcZvyčajnou vecou je aktivovať formátovanie pri ukladanítakže pri každom stlačení klávesov Ctrl+S bude kód čistý a konzistentný.
ESLint
Zatiaľ čo sa Prettier zameriava na aspekt kódu, ESLint sa zameriava na kvalitu a osvedčené postupyJe to najpoužívanejší linter v moderných projektoch JavaScript a TypeScript.
Rozšírenie ESLint pre VS Code umožňuje spúšťať analýzu na pozadí počas písania. Zobrazuje chyby a upozornenia priamo v kóde.zvýraznenie problematických čiar a ponúknutie rýchlych návrhov na ich opravu.
Môžete použiť bežne používané konfigurácie, ako napríklad Airbnb, Standard alebo oficiálne odporúčania ESLintalebo si definujte vlastné pravidlá a prispôsobte ich projektu. Je tiež kompatibilný s pluginmi pre frameworky ako React, Vue alebo Node.js.
Lepšie komentáre
Vo veľkých projektoch sú komentáre nakoniec chaotický chaos, v ktorom je ťažké sa orientovať. Lepšie komentáre vám umožňujú vizuálne kategorizovať komentáre pomocou farieb podľa použitého predpony.
Napríklad môžete mať komentáre typu VŠETKY, UPOZORNENIE, DÔLEŽITÉ, OTÁZKYatď., každý s vlastným štýlom. Vďaka tomu je pri kontrole kódu oveľa jednoduchšie nájsť čakajúce úlohy, kritické poznámky alebo kľúčové vysvetlenia.
Kontrola pravopisu kódu
Aj keď sa to môže zdať ako malý detail, Pravopisné chyby v názvoch premenných, komentároch alebo texte rozhrania vyzerajú dosť zle.Kontrola pravopisu v kóde funguje ako kontrola pravopisu v kóde.
Analyzuje identifikátory, reťazce a komentáre a Označte podozrivé slováPonúka návrhy na ich opravu. Dá sa použiť s viacerými jazykmi a je veľmi užitočný, ak píšete dokumentáciu alebo text viditeľný pre používateľa v kóde.
Chybový objektív
VS Code už zobrazuje chyby a upozornenia, ale niekedy si ich človek nevšimne. Vďaka šošovke Error Lens ich nemožno ignorovať zobrazenie diagnostických informácií priamo vedľa príslušného riadku a na okraji editora.
Na prvý pohľad uvidíte kde sú chyby sústredené v súborebez nutnosti otvárať panel problémov. Vo veľkých projektoch s mnohými lintermi a analytickými nástrojmi je to obrovská pomoc pri zabezpečovaní, aby sa nič neprehliadlo.
Kód Runner
Ak chcete vyskúšať malé fragmenty kódu bez zostavovania celého projektuCode Runner je veľmi praktický. Umožňuje vám spúšťať kód z viacerých jazykov (JavaScript, Python, C, C++, Java, PHP a ďalšie) priamo z editora.
Môžete spustiť aktuálny súbor alebo iba vybraný blok, zobrazenie výstupu na integrovanom paneli alebo v samotnom termináli VS Code a prispôsobiť príkazy používané pre každý jazyk.
Path Intellisense
Pri práci s mnohými aktívami, importmi a relatívnymi cestami je ich ručné písanie zaručenou chybou. Cesta Intellisense automaticky dopĺňa cesty k súborom a priečinkom pri písaní reťazcov s cestami.
Pracuje na Importy JavaScript/TypeScript, referencie CSS, cesty k obrázkom HTML A vo všeobecnosti v akomkoľvek kontexte, kde VS Code zistí, že píšete trasu. Šetrí to čas a vyhýba sa otravným preklepom.
vscode-icons, téma Material Icon a ďalšie balíky ikon
Ikony nie sú len otázkou estetiky. Dobrá téma ikon vám umožňuje okamžite identifikovať typ súboru. len pohľadom do prehliadača.
vscode-icons, téma Material Icon, VSCode Great Icons alebo špecifické témy ako Jednoduchšie ikony vo VSCode s Angular Poskytujú vlastné ikony pre jazyky, frameworky a konfiguračné súbory (Angular, Docker, env atď.).
Výber jedného alebo druhého je vecou vkusu, ale Ktorýkoľvek z nich výrazne zlepšuje čitateľnosť stromu súborovnajmä pri projektoch s jednou jednotkou alebo veľkých projektoch.
GitLens
GitLens je pravdepodobne Najvýkonnejšie rozšírenie pre prácu s Gitom z VS CodePosúva správu verzií na novú úroveň vďaka plnej integrácii histórie v editore.
Umožňuje vám vidieť kto a kedy zmenil každý riadok (vinník), história súboru, porovnávanie revízií, skúmanie vetiev a značieka oveľa viac. Zobrazuje tiež kontextové anotácie kódu s informáciami o poslednom commite.
Ak pracujete v tíme, je skvelé pochopiť dôvody určitých zmien, kontrola regresií a vykonanie kontroly kódu bez toho, aby ste opustili editora.
Live Share
Pre párové programovanie alebo mentoring na diaľku, Live Share je jedna z najlepších vecí, ktoré existujú.Umožňuje vám zdieľať vašu reláciu VS Code s inou osobou v reálnom čase.
Obaja môžete upravovať ten istý súbor, spoločne ladiť, zdieľať terminály a lokálne servery a dokonca otvoriť integrovaný chat. Je to ideálne na riešenie zložitých chýb alebo na učenie niekoho, ako pracovať na konkrétnom projekte.
Špecifické rozšírenia pre JavaScript a TypeScript
Ekosystém JavaScriptu a TypeScriptu je jedným z najviac rozmaznaných VS Code. Ak pracujete vo frontende, backende s Node alebo vo full stack vývoji, tieto rozšírenia vám ušetria veľa hodín..
Úryvky kódu JavaScript (ES6)
Písanie tých istých štruktúr dookola je otravné. Úryvky kódu JavaScript (ES6) pridávajú množstvo úryvkov pre modernú syntax od JS a TS.
Pomocou krátkych skratiek môžete generovať šípkové funkcie, triedy, importy, console.log, štruktúry slučiek a oveľa viac. Je ideálny na zapamätávanie si menej vecí a rýchlejšie písanie.
npm Intellisense a rozšírenie npm
Keď pracujete s mnohými balíkmi, zapamätanie si presných názvov nie je práve najzábavnejšie. npm Intellisense automaticky dopĺňa názvy nainštalovaných modulov vo vašich importoch a požiadavkách.
Medzitým sa oficiálne rozšírenie npm pre VS Code integruje s vaším package.json na zobrazenie a spustenie skriptov Jedným kliknutím si môžete zobraziť závislosti a spravovať rutinné úlohy bez otvorenia terminálu.
Náklady na dovoz
Veľkosť balíka na frontende je veľmi dôležitá. Náklady na dovoz vypočítajú približnú veľkosť každého dovozu a zobrazí sa vedľa príslušného riadku.
Takto okamžite viete, či pre niečo triviálne zavádzate celú obrovskú knižnicu a môžete vyhodnotiť zmeny ako napríklad použiť čiastočný import, lenivé načítavanie alebo ľahšie alternatívy.
Quokka.js
Quokka.js funguje ako Interaktívny poznámkový blok pre JavaScript a TypeScript v rámci VS Code. Vykonáva kód počas písania a zobrazuje výsledky a hodnoty premenných v anotáciách v kóde.
Je to perfektné pre testovať rýchle nápady, porozumieť novým API alebo ladiť malé funkcie bez toho, aby ste museli vytvárať celý projekt od začiatku. Má bezplatnú verziu s veľmi užitočnými funkciami a platenú verziu s bonusmi.
Úryvky kódu ES7 React/Redux/GraphQL/React-Native a jednoduché úryvky kódu React
Ak pracujete s ekosystémom React, tieto dve rozšírenia sú čisté zlato. ES7 React/Redux/GraphQL/React-Native snippets ponúka snippets pre komponenty, hooky, Redux, GraphQL a React Native.pokrývajúce takmer všetky bežné vzory.
Simple React Snippets sa na druhej strane zameriava na menšia sada úryvkov pre moderný React (funkčné komponenty, základný import atď.), ideálne, ak chcete niečo menej náročné, ale rovnako produktívne.
JavaScript a TypeScript Nightly
Ak chcete byť informovaní o najnovších jazykových zmenách, JavaScript a TypeScript Nightly vám poskytujú prístup k nočnej verzii jazykového servera TypeScript. ktorý používa VS kód.
To znamená nové funkcie, vylepšenia výkonu a opravy chýb ešte predtým, ako sa dostanú do stabilnej verzie – ideálne pre testovať nové jazykové funkcie a zisťovať budúce zmeny čo môže ovplyvniť váš kód.
Rozšírenia Pythonu
VS Code sa so správnymi rozšíreniami stáva Špičkové Python IDEAk sa v tomto jazyku venujete vývoju backendu, dátovej vede alebo automatizácii, sú tieto funkcie takmer povinné.
Python (oficiálne rozšírenie)
Oficiálne rozšírenie Pythonu od spoločnosti Microsoft je základný kameň pre prácu s týmto jazykom vo VS CodeBez nej je podpora veľmi obmedzená.
poskytuje IntelliSense, ladenie, testovanie, integrácia s virtuálnymi prostrediami, formátovanie kódu (Black, autopep8), linting s Pylint alebo Flake8 a mnoho ďalších dôležitých funkcií.
Pylance
Pylance je pokročilý jazykový server pre Python čo ďalej vylepšuje oficiálne rozšírenie. Poskytuje rýchlu statickú analýzu, vylepšené automatické dopĺňanie a veľmi podrobnú kontrolu typov.
Ak používate anotácie typov alebo chcete zistiť chyby pred spustením kódu, Pylance výrazne zlepšuje vývojový zážitok. v stredných a veľkých projektoch.
jupyter
Rozšírenie Jupyter integruje notebooky .ipynb priamo vo VS CodeBunky môžete vytvárať, otvárať a spúšťať rovnako ako v klasickom Jupyteri, ale z editora.
Je to užitočné najmä pre analýza dát, strojové učenie, vizualizácia a rýchle prototypovanie, ktorý kombinuje to najlepšie z notebookov s výhodami plnohodnotného editora.
Generátor dokumentačných reťazcov Pythonu
Interná dokumentácia v Pythone je zvyčajne v dokumentačných reťazcoch. Generátor dokumentačných reťazcov Pythonu automaticky vytvára kostru dokumentačných reťazcov pre funkcie, triedy a metódy.
Keď zadáte úvodzovky, rozšírenie vygeneruje polia pre popis, parametre a návratovú hodnotu na základe signatúry funkcie, ktorá podporuje dobre zdokumentovaný kód bez toho, aby bola taká náročná.
PHP a backendové rozšírenia
PHP zostáva hlavnou oporou webového backendu a VS Code má veľmi rozvinutý ekosystém rozšírení pre tento jazyk.
PHP IntelliSense a Intelephense
PHP IntelliSense bolo jedno z prvých serióznych rozšírení automatického dopĺňania pre PHP. Ponúka Návrhy pre funkcie, triedy, metódy, menné priestory a premenné, okrem základnej navigácie k definíciám.
PHP Intelephense ide ešte o krok ďalej: Veľmi rýchla a hĺbková analýza, refaktoring, výskum referencií, aktualizovaná podpora pre PHP 7 a 8 a ďalšie. Dokonca aj bezplatná verzia už prekonáva väčšinu alternatív.
Blokovanie dokumentov v PHP
Na udržiavanie slušnej dokumentácie vo veľkých projektoch, PHP DocBlocker generuje komentáre DocBlock kompletné pre funkcie, metódy, triedy a vlastnosti.
V písaní / ** vo funkcii automaticky vyplní parametre a návratový typ, čo motivuje Správne zdokumentujte interné a verejné API.
Skladať
Composer je štandard pre správu závislostí v PHP. Príslušné rozšírenie sa integruje s VS Code pre spúšťať bežné príkazy (inštalovať, aktualizovať, vyžadovať) z palety, okrem toho ponúka automatické dopĺňanie a zvýrazňovanie v composer.json.
Vďaka tomu je to oveľa pohodlnejšie spravovať knižnice, frameworky a skripty bez neustáleho prepínania medzi editorom a terminálom.
Ladenie PHP
Ladenie PHP pomocou var_dump má do istej miery svoje čaro. PHP Debug pridáva kompletný debugger založený na Xdebugu. v rámci VS kódu.
S ním môžete Nastavte body prerušenia, kontrolujte premenné, prechádzajte kódom krok za krokom a analyzovať zásobník volaní. Počiatočné nastavenie si vyžaduje určitú starostlivosť, ale po nastavení je to nevyhnutný nástroj.
Rozšírenia pre HTML, CSS a vývoj frontendu
Ak pracujete na vizuálnej stránke webu, existuje niekoľko rozšírení, ktoré Transformujú VS Code na super pohodlné prostredie pre rozloženie a štýl..
Živý server
Živý server pripája lokálny vývojový server s automatickým obnovovanímKliknutím na tlačidlo „Zverejniť“ sa vaša stránka otvorí v prehliadači a obnoví sa pri každom uložení súboru.
Je ideálny pre Čistý HTML, rýchle prototypovanie, statické rozloženie a jednoduché front-end projektykde okamžité videnie zmien robí veľký rozdiel.
Podpora HTML CSS
Toto rozšírenie vylepšuje integráciu medzi HTML a CSS. Ponúka inteligentné automatické dopĺňanie tried a ID definovaných vo vašich štýloch. keď píšete HTML a naopak.
Taktiež navrhuje vlastnosti CSS (vrátane prefixy dodávateľov) a funguje skvele v kombinácii s Emmetom, čo výrazne zrýchľuje pracovný postup pri rozvrhnutí.
IntelliSense pre názvy tried CSS a Tailwind CSS IntelliSense
IntelliSense pre názvy tried CSS analyzuje vaše súbory CSS, SCSS alebo Less, aby Ponúkať automatické dopĺňanie názvov tried v HTMLToto je obzvlášť užitočné, keď existujú nástroje alebo triedy s dlhými názvami.
Ak používate Tailwind, Tailwind CSS IntelliSense ide ešte o krok ďalej a poskytuje Automatické dopĺňanie, linting a inline dokumentácia špecifické pre utilitu Tailwind, čo je takmer nevyhnutné pre pohodlnú prácu s týmto frameworkom.
CSS Peek a CSS Lint
CSS Peek vám umožňuje rýchlo zobraziť a prejsť na definíciu CSS triedy alebo ID z HTML, buď v kontextovom okne, alebo otvorením príslušného súboru.
CSS Lint funguje ako linter pre štýlové šablóny, chyby v označovaní alebo problematické vzory (duplicitné vlastnosti, neefektívne pravidlá atď.), čo pomáha udržiavať čistejší a lepšie udržiavateľný CSS.
Automatické premenovanie značky a zvýraznenie zodpovedajúcej značky
Značka automatického premenovania sa stará o niečo také jednoduché, ako je užitočné: Keď zmeníte otváraciu značku elementu HTML alebo XML, aktualizuje sa aj uzatváracia značka. automaticky, aby sa nestali nesynchronizovanými.
Zvýrazniť zhodu značiek otvárací/zatvárací pár značky, kde sa nachádza kurzorToto je veľmi praktické vo veľkých dokumentoch alebo v dokumentoch s vysoko vnorenými štruktúrami.
Náhľad obrázka, optimalizátor obrázka a zvýraznenie farieb
Zobrazenia ukážky obrázka miniatúra obrázka, na ktorý sa odkazuje v trase podržaním kurzora myši nad ním alebo na okraji, čo pomáha overiť správnosť ciest bez toho, aby ste súbor museli otvárať samostatne.
Optimalizátor obrázkov umožňuje komprimovať obrázky (stratovo alebo bezstratovo) priamo v editore, čím vaše aktíva zostanú pripravené na výrobu bez použitia externých nástrojov.
Farebné zvýraznenie zvýrazňuje farebné kódy (hex, RGB, HSL atď.) s ich skutočnou farbou ako pozadím alebo podčiarknutím, čo výrazne uľahčuje prácu so zložitými paletami.
Rozšírenia produktivity, dizajn a prispôsobenie
Okrem čisto vývojových nástrojov existuje pomerne veľa rozšírení určených pre aby bol váš každodenný život pohodlnejší a váš editor príjemnejší na pohľad.
Témy pre VS Code
Témy priamo ovplyvňujú vaše vizuálne pohodlie. Medzi najobľúbenejšie a najodporúčanejšie patria: Odtiene fialovej, materiálna téma, nočná sova, horizont, Noctis alebo monokai z roviny.
Každý z nich má svoju vlastnú osobnosť: svetlé tmavé schémy, palety navrhnuté tak, aby znižovali namáhanie očí, svetlé a tmavé variácie alebo dokonca úplne monochromatické témy pre tých, ktorí chcú žiadne rozptýlenia.
Páv
Keď otvoríte viacero projektov naraz, ľahko sa môžete zmiasť. Peacock vám umožňuje zmeniť farbu zvýrazňovania okna VS Code pre každý projektaby ste na prvý pohľad vedeli, či upravujete backend, frontend alebo konkrétnu mikroslužbu.
Je to jednoduché, ale neuveriteľne užitočné rozšírenie, ak Zvyčajne máte otvorených niekoľko pracovných priestorov súčasne..
Dúhové odsadenie a dúhové zátvorky
farby dúhy odsadenia odsadenie stĺpcov s rôznymi tónmi, čo pomáha bez námahy vidieť štruktúru kódu.
Rainbow Brackets robí niečo podobné s zátvorky, hranaté zátvorky a zložené tvarované tvarypriradením inej farby každej úrovni vnorenia. Medzi týmito dvoma je oveľa jednoduchšie nájsť chýbajúcu zátvorku alebo zle odsadený blok.
Strom úloh
Ak používate komentáre ako TODO, FIXME alebo BUG, Todo Tree prehľadá váš pracovný priestor a vytvorí dashboard so všetkými týmito anotáciami usporiadané do tvaru stromu.
Odtiaľ môžete prejsť priamo na každý bod v kóde kde sú čakajúce úlohy alebo označené problémy, čím sa TODO premenia na akýsi mini správcu úloh prepojený s repozitárom.
GitHub Copilot, Tabnine a ChatGPT/AI
Nástroje na automatické dopĺňanie založené na umelej inteligencii si silno získali na trhu. GitHub Copilot a Tabnine navrhujú riadky alebo celé bloky kódu na základe kontextu, predchádzajúcich testov alebo komentárov.
Rozšírenia, ktoré integrujú ChatGPT alebo podobné modely vo VS Code, umožňujú vyžiadať si vysvetlenia kódu, refaktorovať funkcie alebo generovať testy bez opustenia editora. Vyžadujú API kľúče, ale ako vývojový pomocník sú veľmi výkonné, ak sa používajú rozumne.
Markdown všetko v jednom a vylepšený náhľad Markdownu
Ak dokumentujete projekty alebo píšete technické príspevky, Markdown All in One pridáva skratky, vylepšený náhľad, generovanie indexov a ďalšie vymoženosti pracovať s Markdownom.
V kombinácii s rozšíreniami pre ukážky v štýle GitHub získate písací zážitok veľmi podobný tomu, ako budú neskôr vyzerať vaše súbory README alebo články na webe
Docker, vzdialený SSH a vzdialený WSL
V profesionálnom prostredí je veľmi bežné pracovať s kontajnermi alebo vzdialenými počítačmi. Oficiálne rozšírenie Docker vám umožňuje spravovať obrazy, kontajnery, siete a zväzky. z bočného panela, okrem uľahčenia ladenia v rámci kontajnerov.
Vzdialené SSH a vzdialené WSL vám umožňujú Otvárajte vzdialené priečinky alebo prostredia Linuxu (WSL), akoby išlo o lokálne projekty, vykonávanie príkazov a ladenie priamo na mieste, ale s pohodlím rozhrania VS Code.
Vďaka všetkým týmto dobre zvoleným a nakonfigurovaným rozšíreniam sa Visual Studio Code zmení z jednoduchého a ľahkého editora na Vývojové prostredie na mieru, prispôsobené vášmu stacku, vášmu spôsobu práce a vašim projektom.Nájdenie rovnováhy medzi nepreťažovaním a používaním len tých nástrojov, ktoré potrebujete, je kľúčom k dosiahnutiu rýchlosti, pohodlia a kvality pri každodennom programovaní.
