Ako programirate svakodnevno, znate da dobro ugođeni editor čini razliku između produktivnog dana i festivala frustracija. Visual Studio Code je postao referentni editor Zahvaljujući svojim performansama, sustavu proširenja i ogromnoj zajednici koja neprestano stvara nove alate.
Prava magija VS Codea ne leži samo u osnovnom editoru, već i u njegovom ekosustavu. Stotine ekstenzija dodaju napredno automatsko dovršavanje, lintere, teme, lokalne poslužitelje, otklanjanje pogrešaka, ikone, Git integraciju, umjetnu inteligenciju i još mnogo toga.U ovom vodiču pronaći ćete vrlo kompletnu kolekciju preporučenih ekstenzija: od onih bitnih za bilo koji jezik, do onih specifičnih za JavaScript, Python, PHP, HTML/CSS, TypeScript i svakodnevni rad s Gitom, Dockerom ili Markdownom.
Što je VS Code i zašto su njegova proširenja toliko važna?
Visual Studio Code je besplatni i višeplatformski uređivač koda Izradio ga je Microsoft, dostupan je za Windows, macOS i Linux te je među najbolja razvojna okruženja.
Već uključuje vrlo moćne značajke odmah nakon instalacije: isticanje sintakse, IntelliSense, integrirano otklanjanje pogrešaka, terminal, integracija s Gitom i osnovna podrška za mnoge jezikeAli pravo otkriće dolazi kada počnete instalirati proširenja kako biste prilagodili okruženje svom načinu rada.
Arhitektura VS Code-a je dizajnirana da bude visoko proširiva: gotovo svaki aspekt editora može se poboljšati ili zamijeniti, od sustava za ispravljanje pogrešaka do tema, ikona ili automatskog dovršavanja za određeni jezik.
Nadalje, ne postoji samo jedan VS kod: Možete koristiti službenu verziju ili alternative otvorenog koda poput VSCodiumakoji uklanjaju telemetriju i određene vlasničke dijelove, ali zadržavaju kompatibilnost s većinom proširenja.
Kako instalirati i upravljati ekstenzijama u VS Codeu
Instaliranje ekstenzija u VS Codeu je vrlo jednostavno. Sve se radi unutar vlastitog sučelja urednika.bez potrebe za ručnim preuzimanjem datoteka.
Za dodavanje novih značajki otvorite uređivač i idite na ploču s proširenjima (kvadratna ikona u bočnoj traci ili prečac). Ctrl+Shift+X / Cmd+Shift+X u macOS-u). Odatle pretražujte po imenu ili ključnoj riječi. proširenje koje vas zanima.
Kada pronađete zanimljivo proširenje, provjerite njegov informativni list: Broj preuzimanja, recenzija, kompatibilnosti i snimaka zaslonaTo će vam dati dobar pokazatelj isplati li se instalirati ili ne.
Za dovršetak postupka jednostavno kliknite gumb za instalaciju. Većina ekstenzija se aktivira odmahNeki zahtijevaju ponovno učitavanje prozora editora, a neki zahtijevaju dodatnu konfiguraciju (na primjer, oni koji ovise o vanjskim alatima kao što su ESLint, PHP Debug s Xdebugom itd.).
Osnovna opća proširenja za svaki projekt
Postoji skup ekstenzija koje bi gotovo svatko trebao imati instalirane, bez obzira na jezik ili programski paket koji koristi. Usredotočeni su na produktivnost, formatiranje, suradnju, kontrolu verzija i korisničko iskustvo..
ljepše
ljepše je de facto standardni formater koda U svijetu JavaScripta i mnogih drugih jezika, on automatski prepisuje vaš kod slijedeći dobro definirana stilska pravila.
Sposoban je za formatiranje JavaScript, TypeScript, JSX, TSX, JSON, HTML, CSS, SCSS, Less, YAML, GraphQL, Markdown, Vue, Angular i mnogo više. Ideja je da će rasprave o tome treba li koristiti jednostruke ili dvostruke navodnike, točku-zarez ili ne, gdje koristiti zagrade itd., nestati jer Cijeli projekt slijedi istu konvenciju.
Možete koristiti zadane postavke ili stvoriti vlastita pravila pomoću tipova datoteka .ljepšarcUobičajena stvar je aktivirati formatiranje prilikom spremanjatako da svaki put kada pritisnete Ctrl+S kod bude čist i konzistentan.
ESLint
Dok se Prettier fokusira na aspekt koda, ESLint se fokusira na kvalitetu i dobre prakseTo je najčešće korišteni linter u modernim JavaScript i TypeScript projektima.
ESLint ekstenzija za VS Code omogućuje analizu u pozadini dok tipkate. Prikazuje pogreške i upozorenja izravno u kodu.isticanje problematičnih linija i davanje brzih prijedloga za njihovo ispravljanje.
Možete koristiti široko korištene konfiguracije kao što su Airbnb, Standard ili službene preporuke ESLintaili definirajte vlastita pravila kako biste ih prilagodili projektu. Također je kompatibilan s dodacima za okvire kao što su React, Vue ili Node.js.
Bolji komentari
U velikim projektima, komentari na kraju postanu zbrka koju je teško pratiti. Bolji komentari omogućuju vam vizualno kategoriziranje komentara korištenjem boja prema prefiksu koji koristite.
Na primjer, možete imati komentare tipa SVA, UPOZORENJE, VAŽNO, PITANJEitd., svaki sa svojim stilom. To znatno olakšava pronalaženje neizvršenih zadataka, kritičnih bilješki ili ključnih objašnjenja prilikom pregleda koda.
Provjera pravopisa koda
Iako se može činiti kao sporedan detalj, Pravopisne pogreške u nazivima varijabli, komentarima ili tekstu sučelja izgledaju prilično loše.Provjera pravopisa koda djeluje kao provjera pravopisa za kod.
Analizira identifikatore, nizove znakova i komentare i Označi sumnjive riječiNudi prijedloge za njihovo ispravljanje. Može se koristiti s više jezika i vrlo je koristan ako pišete dokumentaciju ili tekst vidljiv korisniku unutar koda.
Leća pogreške
VS Code već prikazuje greške i upozorenja, ali ponekad ostanu nezapažene. Error Lens ih čini nemogućim za ignoriranje prikazivanje dijagnostičkih informacija neposredno pored dotičnog retka i na margini urednika.
Na prvi pogled vidjet ćete gdje su pogreške koncentrirane u datotecibez potrebe za otvaranjem ploče s problemima. U velikim projektima s mnogo lintera i alata za analizu, to je od velike pomoći u osiguravanju da se ništa ne propusti.
coderunner
Ako volite probati mali fragmenti koda bez sastavljanja cijelog projektaCode Runner je vrlo praktičan. Omogućuje vam pokretanje koda iz više programskih jezika (JavaScript, Python, C, C++, Java, PHP i drugi) izravno iz editora.
Možete pokrenuti trenutnu datoteku ili samo odabrani blok, pogledajte izlaz na integriranoj ploči ili u samom VS Code terminalu i prilagodite naredbe koje se koriste za svaki jezik.
Inteligencija putanje
Prilikom rada s mnogo resursa, uvoza i relativnih putanja, njihovo ručno pisanje je zajamčena pogreška. Putanja Intellisense automatski dovršava putanje datoteka i mapa prilikom pisanja nizova s putanjama.
Radi na JavaScript/TypeScript uvozi, CSS reference, HTML putanje slika I općenito u bilo kojem kontekstu gdje VS Code otkrije da tipkate rutu. To štedi vrijeme i izbjegava dosadne tipografske pogreške.
vscode-ikone, tema ikona materijala i ostali paketi ikona
Ikone nisu samo stvar estetike. Dobra tema ikona omogućuje vam trenutno prepoznavanje vrste datoteke. samo gledanjem u preglednik.
vscode-ikone, tema ikona materijala, VSCode odlične ikone ili određene teme poput Jednostavnije VSCode ikone s Angularom Pružaju prilagođene ikone za jezike, okvire i konfiguracijske datoteke (Angular, Docker, env, itd.).
Izbor jednog ili drugog je stvar ukusa, ali Bilo koji od njih značajno poboljšava čitljivost stabla datotekaposebno kod pojedinačnih jedinica ili velikih projekata.
GitLens
GitLens je vjerojatno Najmoćnije proširenje za rad s Gitom iz VS CodeaPodiže kontrolu verzija na višu razinu potpunom integracijom povijesti unutar editora.
Omogućuje vam da vidite tko je promijenio svaki redak i kada (krivac), povijest datoteke, usporedba revizija, istraživanje grana i oznakai još mnogo toga. Također prikazuje kontekstualne napomene o kodu s informacijama o posljednjem commitu.
Ako radite u timu, divno je razumjeti razloge za određene promjene, pregledati regresije i izvršiti pregled koda bez napuštanja urednika.
Dijeli uživo
Za programiranje u paru ili mentorstvo na daljinu, Live Share je jedna od najboljih stvari koje postoje.Omogućuje vam dijeljenje vaše VS Code sesije s drugom osobom u stvarnom vremenu.
Oboje možete uređujte istu datoteku, zajedno ispravljajte pogreške, dijelite terminale i lokalne poslužitelje pa čak i otvoriti integrirani chat. Savršeno je za rješavanje složenih grešaka ili podučavanje nekoga kako raditi na određenom projektu.
Specifična proširenja za JavaScript i TypeScript
JavaScript i TypeScript ekosustav je jedan od najrazmaženijih od strane VS Codea. Ako radite u frontendu, backendu s Nodeom ili full stack razvoju, ova proširenja će vam uštedjeti mnogo sati..
Isječci JavaScript (ES6) koda
Pisanje istih struktura iznova i iznova je dosadno. Isječci JavaScript (ES6) koda dodaju mnoštvo isječaka za modernu sintaksu od JS-a i TS-a.
Pomoću kratkih skraćenica možete generirati funkcije strelica, klase, uvozi, console.log, strukture petlji i još mnogo toga. Idealno je za manje pamćenja i brže tipkanje.
npm Intellisense i npm proširenje
Kada radite s mnogo paketa, pamćenje točnih imena nije najzabavnije. npm Intellisense automatski dovršava nazive instaliranih modula u vašem uvozu i zahtjevima.
U međuvremenu, službeno npm proširenje za VS Code integrira se s vašim package.json za popisivanje i pokretanje skripti Jednim klikom pregledajte ovisnosti i upravljajte rutinskim zadacima bez otvaranja terminala.
Trošak uvoza
Veličina paketa na frontendu je jako važna. Trošak uvoza izračunava približnu veličinu svakog uvoza i prikazuje ga pored odgovarajućeg retka.
Na ovaj način odmah znate unosite li cijelu ogromnu biblioteku za nešto trivijalno i možete procijeniti promjene poput koristite djelomični uvoz, odgođeno učitavanje ili lakše alternative.
Quokka.js
Quokka.js funkcionira kao Interaktivna bilježnica za JavaScript i TypeScript unutar VS Code-a. Izvršava kod dok ga pišete i prikazuje rezultate i vrijednosti varijabli u inline anotacijama.
Savršeno je za testiranje brzih ideja, razumijevanje novih API-ja ili otklanjanje grešaka u malim funkcijama bez potrebe za izgradnjom cijelog projekta od nule. Ima besplatnu verziju s vrlo korisnim značajkama i plaćeno izdanje s dodacima.
ES7 React/Redux/GraphQL/React-Native isječci i jednostavni React isječci
Ako radite s React ekosustavom, ova dva proširenja su čisto zlato. ES7 React/Redux/GraphQL/React-Native isječci nude isječke za komponente, hooks, Redux, GraphQL i React Nativepokrivajući gotovo sve uobičajene obrasce.
S druge strane, Simple React Snippets se fokusira na manji skup isječaka za moderni React (funkcionalne komponente, osnovni uvozi itd.), idealno ako želite nešto manje zahtjevno, ali jednako produktivno.
JavaScript i TypeScript Nightly
Ako želite biti u toku s najnovijim jezičnim dostignućima, JavaScript i TypeScript Nightly vam omogućuju pristup noćnoj verziji TypeScript jezičnog poslužitelja. koji koristi VS kod.
To znači nove značajke, poboljšanja performansi i ispravke grešaka prije nego što dođu do stabilne verzije - idealno za testirati nove jezične značajke i otkriti buduće promjene što može utjecati na vaš kod.
Python ekstenzije
VS Code, s pravim proširenjima, postaje Vrhunski Python IDEAko se bavite backend razvojem, znanošću o podacima ili automatizacijom s ovim jezikom, ovo je gotovo obavezno.
Python (službeno proširenje)
Microsoftovo službeno proširenje za Python je temelj za rad s ovim jezikom u VS CodeuBez toga, podrška je vrlo ograničena.
pruža IntelliSense, otklanjanje pogrešaka, testiranje, integracija s virtualnim okruženjima, formatiranje koda (Black, autopep8), povezivanje s Pylintom ili Flake8 i mnoge druge bitne funkcije.
Pylance
Pylance je napredni jezični poslužitelj za Python što dodatno poboljšava službeno proširenje. Pruža brzu statičku analizu, poboljšano automatsko dovršavanje i vrlo detaljnu provjeru tipova.
Ako koristite anotacije tipova ili želite otkriti pogreške prije pokretanja koda, Pylance uvelike poboljšava iskustvo razvoja. u srednjim i velikim projektima.
Jupiter
Jupyterova ekstenzija integrira prijenosna računala .ipynb izravno u VS CodeuMožete stvarati, otvarati i pokretati ćelije baš kao u klasičnom Jupyteru, ali iz editora.
Posebno je koristan za analiza podataka, strojno učenje, vizualizacija i brza izrada prototipa, kombinirajući najbolje od bilježnica s prednostima potpunog uređivača.
Generator dokumentacije u Pythonu
Interna dokumentacija u Pythonu se obično nalazi u docstringovima. Generator dokumentacijskih stringova u Pythonu automatski stvara kostur dokumentacijskih stringova. za funkcije, klase i metode.
Kada upišete početne navodnike, ekstenzija generira polja za opis, parametre i povratnu vrijednost na temelju potpisa funkcije, što potiče dobro dokumentiran kod bez da bude tolika muka.
PHP i backend ekstenzije
PHP ostaje glavni oslonac u web backendu, a VS Code ima vrlo zreo ekosustav proširenja za ovaj jezik.
PHP IntelliSense i Intelephense
PHP IntelliSense bio je jedno od prvih ozbiljnih proširenja za automatsko dovršavanje za PHP. Nudi Prijedlozi za funkcije, klase, metode, imenske prostore i varijable, uz osnovnu navigaciju do definicija.
PHP Intelephense ide korak dalje: Vrlo brza i dubinska analiza, refaktoriranje, istraživanje referenci, ažurirana podrška za PHP 7 i 8 i više. Čak i besplatna verzija već nadmašuje većinu alternativa.
PHP DocBlocker
Za održavanje pristojne dokumentacije u velikim projektima, PHP DocBlocker generira DocBlock komentare kompletno za funkcije, metode, klase i svojstva.
U pisanom obliku / ** na funkciji, automatski popunjava parametre i tip povratne vrijednosti, što potiče Pravilno dokumentirajte interne i javne API-je.
kompozitor
Composer je standard za upravljanje ovisnostima u PHP-u. Odgovarajuće proširenje integrira se s VS Codeom za izvršavanje uobičajenih naredbi (instaliranje, ažuriranje, zahtijevanje) iz palete, uz ponudu automatskog dovršavanja i isticanja u composer.jso.
To ga čini puno ugodnijim upravljati bibliotekama, okvirima i skriptama bez stalnog prebacivanja između editora i terminala.
PHP otklanjanje pogrešaka
Debuggiranje PHP-a s var_dumpom ima svoju čar do određene mjere. PHP Debug dodaje potpuni debugger temeljen na Xdebugu. unutar VS koda.
S njim možeš Postavljanje točaka prekida, pregled varijabli, prolazak kroz kod i analizirati stog poziva. Početno postavljanje zahtijeva određenu pažnju, ali nakon što se postavi, to je bitan alat.
Proširenja za HTML, CSS i razvoj frontenda
Ako radite na vizualnoj strani weba, postoji nekoliko ekstenzija koje Oni transformiraju VS Code u super ugodno okruženje za izgled i stiliziranje..
LiveServer
Live Server montira lokalni razvojni poslužitelj s automatskim ponovnim ponovnim pokretanjemKlikom na "Objavi" otvara se vaša web-lokacija u pregledniku i osvježava se svaki put kada spremite datoteku.
Idealno je za Čisti HTML, brza izrada prototipa, statički izgled i jednostavni front-end projektigdje trenutno uočavanje promjena čini svu razliku.
Podrška za HTML i CSS
Ovo proširenje poboljšava integraciju između HTML-a i CSS-a. Nudi inteligentno automatsko dovršavanje klasa i ID-ova definiranih u vašim stilskim listovima. kada pišete HTML i obrnuto.
Također predlaže CSS svojstva (uključujući prefiksi dobavljača) i izvrsno funkcionira u kombinaciji s Emmetom, što uvelike ubrzava tijek rada na izgledu.
IntelliSense za nazive CSS klasa i Tailwind CSS IntelliSense
IntelliSense za nazive CSS klasa analizira vaše CSS, SCSS ili Less datoteke kako bi Ponudi automatsko dovršavanje naziva klasa u HTML-uOvo je posebno korisno kada postoje uslužni programi ili klase s dugim imenima.
Ako koristite Tailwind, Tailwind CSS IntelliSense ide korak dalje, pružajući Automatsko dovršavanje, linkanje i inline dokumentacija specifična za uslužni program Tailwind, nešto gotovo obavezno za ugodan rad s ovim okvirom.
CSS Peek i CSS Lint
CSS Peek vam omogućuje brzi pregled i skok na CSS definiciju klase ili ID-a iz HTML-a, bilo u skočnom prozoru ili otvaranjem odgovarajuće datoteke.
CSS Lint djeluje kao linter za stilske listove, pogreške u označavanju ili problematični uzorci (duplicirana svojstva, neučinkovita pravila itd.), što pomaže u održavanju čišćeg i lakšeg CSS-a.
Automatsko preimenovanje oznake i označavanje odgovarajuće oznake
Oznaka za automatsko preimenovanje brine se o nečemu jednostavnom koliko i korisnom: Kada promijenite početnu oznaku HTML ili XML elementa, ažurira se i zatvarajuća oznaka. automatski kako ne bi postali nesinhronizirani.
Istaknite podudarne oznake početni/završni par oznake gdje se nalazi kursorOvo je vrlo praktično u velikim dokumentima ili onima s jako ugniježđenim strukturama.
Pregled slike, optimizator slike i isticanje boja
Pregled slike prikazuje sličica slike na koju se upućuje u ruti zadržavanjem kursora iznad njega ili na margini, što pomaže u provjeri ispravnosti putanja bez zasebnog otvaranja datoteke.
Optimizator slike omogućuje komprimirati slike (s gubitkom ili bez gubitka) iz samog editora, ostavljajući vašu imovinu spremnu za proizvodnju bez korištenja vanjskih alata.
Istaknuta boja ističe kodovi boja (hex, RGB, HSL, itd.) s njihovom stvarnom bojom kao pozadinom ili podcrtanom bojom, što znatno olakšava rad sa složenim paletama.
Dodatna proširenja produktivnosti, dizajn i prilagodba
Uz čiste alate za razvoj, postoji i popriličan broj proširenja dizajniranih za kako bi vaš svakodnevni život bio ugodniji, a vaš urednik ugodniji oku.
Teme za VS Code
Teme izravno utječu na vašu vizualnu udobnost. Neke od najpopularnijih i preporučenih su: Nijanse ljubičaste, Materijalna tema, Noćna ptica, Horizont, Noctis ili Ravni monokai.
Svaka ima svoju osobnost: svijetle tamne sheme, palete osmišljene za smanjenje naprezanja očiju, svijetle i tamne varijacije ili čak potpuno monokromatske teme za one koji žele nula distrakcija.
Paun
Kada otvorite nekoliko projekata odjednom, lako se zbuniti. Peacock vam omogućuje promjenu boje naglaska prozora VS Codea po projektutako da na prvi pogled možete prepoznati uređujete li backend, frontend ili određeni mikroservis.
To je jednostavno, ali nevjerojatno korisno proširenje ako Obično imate nekoliko radnih prostora otvorenih istovremeno..
Uvlačenje duge i dugine zagrade
uvlačenje duginih boja uvlačenje stupaca s različitim tonovima, što pomaže u lakšem pregledu strukture koda.
Rainbow Brackets radi nešto slično s zagrade, uglate zagrade i viticedodjeljivanje različite boje svakoj razini ugniježđivanja. Između njih dvoje, lociranje nedostajuće zagrade ili loše uvučenog bloka postaje mnogo lakše.
Stablo popisa zadataka
Ako koristite komentare poput TODO, FIXME ili BUG, Todo Tree skenira vaš radni prostor i stvara nadzornu ploču sa svim tim bilješkama organizirani u obliku stabla.
Od tamo možete izravno navigirati do svake točke u kodu gdje postoje neriješeni zadaci ili označeni problemi, pretvarajući TODO-e u neku vrstu mini upravitelja zadataka povezanog s repozitorijem.
GitHub Copilot, Tabnine i ChatGPT/AI
Alati za automatsko dovršavanje temeljeni na umjetnoj inteligenciji snažno su se probili. GitHub Copilot i Tabnine predlažu retke ili cijele blokove koda na temelju konteksta, prethodnih testova ili komentara.
Proširenja koja integriraju ChatGPT ili slične modele u VS Codeu omogućuju zatražiti objašnjenja koda, refaktorirati funkcije ili generirati testove bez napuštanja uređivača. Zahtijevaju API ključeve, ali kao razvojni kopilot vrlo su moćni ako se koriste razumno.
Markdown sve u jednom i poboljšani pregled Markdowna
Ako dokumentirate projekte ili pišete tehničke objave, Markdown All in One dodaje prečace, poboljšani pregled, generiranje indeksa i druge pogodnosti za rad s Markdownom.
U kombinaciji s ekstenzijama za pregled u stilu GitHuba, dobivate iskustvo pisanja vrlo slično onome kako će kasnije izgledati vaše README datoteke ili članci na webu
Docker, udaljeni SSH i udaljeni WSL
U profesionalnim okruženjima vrlo je uobičajeno raditi s kontejnerima ili udaljenim strojevima. Službeno Docker proširenje omogućuje vam upravljanje slikama, kontejnerima, mrežama i volumenima. s bočne trake, uz olakšavanje otklanjanja pogrešaka unutar kontejnera.
Udaljeni SSH i udaljeni WSL vam omogućuju Otvaranje udaljenih mapa ili Linux okruženja (WSL) kao da su lokalni projekti, izvršavanje naredbi i otklanjanje pogrešaka odmah na mjestu, ali uz praktičnost VS Code sučelja.
S dobro odabranim i konfiguriranim svim ovim proširenjima, Visual Studio Code prelazi iz jednostavnog laganog editora u Prilagođeno razvojno okruženje, prilagođeno vašem programu, vašem načinu rada i vašim projektima.Pronalaženje ravnoteže između ne preopterećavanja i posjedovanja upravo onih alata koji su vam potrebni ključ je za postizanje brzine, udobnosti i kvalitete u vašem svakodnevnom programiranju.
