Om du programmerar dagligen vet du att en välutbildad redigerare gör skillnaden mellan en produktiv dag och en festival av frustrationer. Visual Studio Code har blivit referensredigeraren Tack vare dess prestanda, dess tilläggssystem och en enorm community som fortsätter att skapa nya verktyg.
Den verkliga magin med VS Code ligger inte bara i basredigeraren, utan i dess ekosystem. Hundratals tillägg lägger till avancerad autofullständig hantering, linters, teman, lokala servrar, felsökning, ikoner, Git-integration, AI och mycket mer.I den här guiden hittar du en mycket komplett samling rekommenderade tillägg: från de nödvändiga för alla språk, till de som är specifika för JavaScript, Python, PHP, HTML/CSS, TypeScript och dagligt arbete med Git, Docker eller Markdown.
Vad är VS Code och varför är dess tillägg så viktiga?
Visual Studio-kod är en gratis och plattformsoberoende kodredigerare Skapad av Microsoft, tillgänglig för Windows, macOS och Linux, och är bland de bästa utvecklingsmiljöerna.
Den innehåller redan mycket kraftfulla funktioner direkt ur lådan: syntaxmarkering, IntelliSense, integrerad felsökning, terminal, Git-integration och grundläggande stöd för många språkMen det är när du börjar installera tillägg för att anpassa miljön till ditt arbetssätt som det verkligen tar fart.
Arkitekturen för VS Code är utformad för att vara mycket utökningsbar: praktiskt taget alla aspekter av redigeraren kan förbättras eller ersättas, från felsökningssystemet till teman, ikoner eller autokomplettering för ett specifikt språk.
Dessutom finns det inte bara en VS-kod: Du kan använda den officiella versionen eller öppen källkod-alternativ som VSCodiumsom tar bort telemetri och vissa proprietära delar, men bibehåller kompatibilitet med de flesta tillägg.
Så här installerar och hanterar du tillägg i VS Code
Att installera tillägg i VS Code är väldigt enkelt. Allt görs inifrån redaktörens eget gränssnitt.utan att behöva ladda ner filer manuellt.
För att lägga till nya funktioner, öppna redigeraren och gå till tilläggspanelen (fyrkantig ikon i sidofältet eller genvägen). Ctrl+Skift+X / Cmd+Skift+X på macOS). Därifrån söker du efter namn eller nyckelord. den tillägg som intresserar dig.
När du hittar ett intressant tillägg, kolla dess informationsblad: Antal nedladdningar, recensioner, kompatibilitet och skärmdumparDet ger dig en bra indikation på om det är värt att installera eller inte.
För att slutföra processen klickar du bara på installationsknappen. De flesta tillägg aktiveras direktVissa kräver att redigeringsfönstret laddas om, och några behöver extra konfiguration (till exempel de som är beroende av externa verktyg som ESLint, PHP Debug with Xdebug, etc.).
Viktiga allmänna tillägg för alla projekt
Det finns en uppsättning tillägg som praktiskt taget alla borde ha installerat, oavsett vilket språk eller vilken stack de använder. De fokuserar på produktivitet, formatering, samarbete, versionshantering och användarupplevelse..
Sötare
Sötare är de facto standardkodformaterare I JavaScripts och många andra språks värld skriver det automatiskt om din kod enligt väldefinierade stilregler.
Den kan formatera JavaScript, TypeScript, JSX, TSX, JSON, HTML, CSS, SCSS, Less, YAML, GraphQL, Markdown, Vue, Angular och många fler. Tanken är att diskussioner om huruvida man ska använda enkla eller dubbla citattecken, semikolon eller inte, var man ska använda klammerparenteser etc., kommer att försvinna eftersom Hela projektet följer samma konvention.
Du kan använda standardinställningarna eller skapa egna regler med hjälp av filtyper .snyggarercDet vanliga är att aktivera formatering vid sparandeså att varje gång du trycker på Ctrl+S är koden ren och konsekvent.
ESLint
Medan Prettier fokuserar på kod-aspekten, ESLint fokuserar på kvalitet och god praxisDet är den mest använda lintern i moderna JavaScript- och TypeScript-projekt.
ESLint-tillägget för VS Code gör att analysen körs i bakgrunden medan du skriver. Den visar fel och varningar direkt i koden.markera problematiska linjer och ge snabba förslag på hur man korrigerar dem.
Du kan använda vanligt förekommande konfigurationer som t.ex. Airbnb, Standard eller de officiella ESLint-rekommendationernaeller definiera dina egna regler för att anpassa dem till projektet. Den är också kompatibel med plugins för ramverk som React, Vue eller Node.js.
Bättre kommentarer
I stora projekt blir kommentarerna en röra som är svår att följa. Med Better Comments kan du visuellt kategorisera kommentarer. med hjälp av färger enligt det prefix du använder.
Till exempel kan du ha kommentarer av typen ALLA, VARNING, VIKTIGT, FRÅGAetc., var och en med sin egen stil. Detta gör det mycket enklare att hitta väntande uppgifter, viktiga anteckningar eller viktiga förklaringar när man granskar koden.
Kodstavningskontroll
Även om det kan verka som en liten detalj, Stavfel i variabelnamn, kommentarer eller gränssnittstext ser ganska dåliga ut.Kodstavningskontrollen fungerar som en stavningskontroll för kod.
Analyserar identifierare, strängar och kommentarer och Markera de misstänkta ordenDen erbjuder förslag på hur man korrigerar dem. Den kan användas med flera språk och är mycket användbar om du skriver dokumentation eller användarsynlig text i koden.
Fellins
VS Code visar redan fel och varningar, men ibland går de obemärkt förbi. Fellins gör dem omöjliga att ignorera visar diagnostikinformationen direkt bredvid den berörda raden och i redigerarens marginal.
Vid första anblicken ser du där felen är koncentrerade i en filutan att behöva öppna problempanelen. I stora projekt med många linters och analysverktyg är det till stor hjälp för att säkerställa att ingenting missas.
coderunner
Om du gillar att prova små kodfragment utan att sätta ihop ett helt projektCode Runner är mycket praktiskt. Det låter dig köra kod från flera språk (JavaScript, Python, C, C++, Java, PHP och fler) direkt från editorn.
Du kan starta den aktuella filen eller bara det valda blocket, visa utdata på en integrerad panel eller i själva VS Code-terminalen, och anpassa kommandona som används för varje språk.
Path Intellisense
När man arbetar med många resurser, importer och relativa sökvägar är det ett garanterat misstag att skriva dem för hand. Sökväg Intellisense kompletterar automatiskt fil- och mappsökvägar när man skriver strängar med sökvägar.
Arbetar på JavaScript/TypeScript-importer, CSS-referenser, HTML-bildsökvägar Och generellt i alla sammanhang där VS Code upptäcker att du skriver en rutt. Det sparar tid och undviker irriterande stavfel.
vscode-ikoner, Material Icon Theme och andra ikonpaket
Ikoner är inte bara en fråga om estetik. Ett bra ikontema låter dig direkt identifiera filtypen. bara genom att titta i webbläsaren.
vscode-ikoner, Material Icon Theme, VSCode Great Icons eller specifika teman som VSCode enklare ikoner med Angular De tillhandahåller anpassade ikoner för språk, ramverk och konfigurationsfiler (Angular, Docker, env, etc.).
Att välja det ena eller det andra är en smaksak, men Vilken som helst av dem förbättrar filträdets läsbarhet avsevärtsärskilt i enskild enhet eller stora projekt.
GitLens
GitLens är förmodligen Det kraftfullaste tillägget för att arbeta med Git från VS CodeDet tar versionshanteringen till en helt ny nivå genom att helt integrera historiken i redigeraren.
Låter dig se vem som ändrade varje rad och när (skuld), en fils historik, jämföra revisioner, utforska grenar och taggaroch mycket mer. Den visar också kontextuella anteckningar i koden med information om den senaste commiten.
Om man arbetar i ett team är det fantastiskt att förstå orsakerna till vissa ändringar, granska regressioner och utföra kodgranskning utan att lämna redaktören.
Live Share
För parprogrammering eller distanshandledning, Live Share är bland det bästa som finns.Det låter dig dela din VS Code-session med en annan person i realtid.
Ni båda kan redigera samma fil, felsöka tillsammans, dela terminaler och lokala servrar och till och med öppna en integrerad chatt. Det är perfekt för att felsöka komplexa buggar eller lära någon hur man arbetar med ett specifikt projekt.
Specifika tillägg för JavaScript och TypeScript
JavaScript- och TypeScript-ekosystemet är ett av de mest bortskämda av VS Code. Om du arbetar med frontend, backend med Node eller fullstack-utveckling, kommer dessa tillägg att spara dig många timmar..
JavaScript-kodavsnitten (ES6)
Att skriva samma strukturer om och om igen är jobbigt. JavaScript-kodavsnitt (ES6) lägger till massor av kodavsnitt för modern syntax från JS och TS.
Med korta förkortningar kan du generera pilfunktioner, klasser, importer, console.log, loopstrukturer och mycket mer. Den är idealisk för att memorera mindre och skriva snabbare.
npm Intellisense och npm-tillägg
När man arbetar med många paket är det inte det roligaste att komma ihåg exakta namn. npm Intellisense kompletterar automatiskt namnen på installerade moduler i din import och dina behov.
Samtidigt integreras den officiella npm-tillägget för VS Code med din package.json för att lista och köra skript Med ett klick kan du visa beroenden och hantera rutinuppgifter utan att öppna terminalen.
Importkostnad
Storleken på paketet på frontend spelar stor roll. Importkostnaden beräknar den ungefärliga storleken på varje import och visar den bredvid motsvarande rad.
På så sätt vet du direkt om du använder ett helt monster till bibliotek för något trivialt, och du kan utvärdera förändringar som använd partiella importer, lazy loading eller lättare alternativ.
Quokka.js
Quokka.js fungerar som en Interaktivt anteckningsblock för JavaScript och TypeScript inom VS Code. Den kör kod medan du skriver den och visar resultat och variabelvärden i inline-anteckningar.
Det är perfekt för testa snabba idéer, förstå nya API:er eller felsök små funktioner utan att behöva bygga ett helt projekt från grunden. Den har en gratisversion med mycket användbara funktioner och en betald version med extrafunktioner.
ES7 React/Redux/GraphQL/React-Native-snippets och enkla React-snippets
Om du arbetar med React-ekosystemet är dessa två tillägg rent guld. ES7 React/Redux/GraphQL/React-Native-snippets erbjuder snippets för komponenter, hooks, Redux, GraphQL och React Nativetäcker nästan alla vanliga mönster.
Enkla React Snippets fokuserar å andra sidan på en mindre uppsättning snippets för modern React (funktionella komponenter, grundläggande importer etc.), perfekt om du vill ha något mindre överväldigande men lika produktivt.
JavaScript och TypeScript varje natt
Om du vill hålla dig uppdaterad om språket, JavaScript och TypeScript Nightly ger dig tillgång till Nightly-versionen av TypeScript-språkservern. som använder VS-kod.
Det innebär nya funktioner, prestandaförbättringar och buggfixar innan de når den stabila versionen – perfekt för testa nya språkfunktioner och upptäck framtida förändringar som kan påverka din kod.
Python-tillägg
VS Code, med rätt tillägg, blir en Förstklassig Python IDEOm du arbetar med backend-utveckling, datavetenskap eller automatisering med det här språket är dessa nästan obligatoriska.
Python (officiell tillägg)
Microsofts officiella Python-tillägg är hörnstenen för att arbeta med detta språk i VS CodeUtan den är stödet mycket begränsat.
erbjuder IntelliSense, felsökning, testning, integration med virtuella miljöer, kodformatering (Black, autopep8), linting med Pylint eller Flake8 och många andra viktiga funktioner.
Pylans
Pylance är avancerad språkserver för Python vilket ytterligare förbättrar den officiella tillägget. Den erbjuder snabb statisk analys, förbättrad autokomplettering och mycket detaljerad typkontroll.
Om du använder typannoteringar eller vill upptäcka fel innan du kör koden, Pylance förbättrar utvecklingsupplevelsen avsevärt. i medelstora och stora projekt.
jupyter
Jupyter-tillägget integrerar anteckningsböcker .ipynb direkt i VS CodeDu kan skapa, öppna och köra celler precis som i klassiska Jupyter, men från redigeraren.
Det är särskilt användbart för dataanalys, maskininlärning, visualisering och snabb prototypframställning, som kombinerar det bästa av anteckningsböcker med fördelarna med en fullfjädrad editor.
Python Docstränggenerator
Intern dokumentation i Python finns vanligtvis i docstrings. Python Docstring Generator skapar automatiskt skelettet för docstringen för funktioner, klasser och metoder.
När du skriver in de inledande citattecknen genererar tillägget fält för beskrivning, parametrar och returvärde baserat på funktionssignaturen, vilket uppmuntrar till väl dokumenterad kod utan att vara ett sådant besvär.
PHP och backend-tillägg
PHP är fortfarande en stöttepelare inom webb-backend, och VS Code har ett mycket moget ekosystem av tillägg för detta språk.
PHP IntelliSense och Intelephense
PHP IntelliSense var ett av de första seriösa autokompletteringstilläggen för PHP. Det erbjuder Förslag på funktioner, klasser, metoder, namnrymder och variabler, utöver grundläggande navigering till definitioner.
PHP Intelephense går ett steg längre: Mycket snabb och djupgående analys, refaktorering, referensforskning, uppdaterat stöd för PHP 7 och 8 och mer. Även gratisversionen överträffar redan de flesta alternativ.
PHP DocBlocker
För att upprätthålla god dokumentation i stora projekt, PHP DocBlocker genererar DocBlock-kommentarer komplett för funktioner, metoder, klasser och egenskaper.
I skrift / ** på en funktion fyller den automatiskt i parametrarna och returtypen, vilket stimulerar Dokumentera interna och publika API:er korrekt.
Samman
Composer är standarden för beroendehantering i PHP. Motsvarande tillägg integreras med VS Code för kör vanliga kommandon (installera, uppdatera, kräva) från paletten, utöver att erbjuda automatisk komplettering och markering i kompositör.json.
Detta gör det mycket bekvämare hantera bibliotek, ramverk och skript utan att ständigt växla mellan editor och terminal.
PHP-felsökning
Att felsöka PHP med var_dump har sin charm upp till en viss punkt. PHP Debug lägger till en fullständig felsökare baserad på Xdebug. inom VS-koden.
Med den kan du Ställ in brytpunkter, inspektera variabler, stega igenom koden och analysera anropsstacken. Den initiala installationen kräver viss omsorg, men när den väl är installerad är det ett viktigt verktyg.
Tillägg för HTML, CSS och frontend-utveckling
Om du arbetar med den visuella sidan av webben finns det flera tillägg som De förvandlar VS Code till en superbekväm miljö för layout och styling..
Live server
Live Server monterar en lokal utvecklingsserver med automatisk omladdningOm du klickar på "Lägg till" öppnas din webbplats i webbläsaren och sidan uppdateras varje gång du sparar en fil.
Den är idealisk för Ren HTML, snabb prototypframställning, statisk layout och enkla frontend-projektdär det gör hela skillnaden att se förändringarna omedelbart.
HTML CSS-stöd
Denna tillägg förbättrar integrationen mellan HTML och CSS. Den erbjuder intelligent autokomplettering av klasser och ID:n som definierats i dina stilmallar. när du skriver HTML, och vice versa.
Den föreslår även CSS-egenskaper (inklusive leverantörsprefix) och fungerar utmärkt i kombination med Emmet, vilket avsevärt snabbar upp layoutarbetsflödet.
IntelliSense för CSS-klassnamn och Tailwind CSS IntelliSense
IntelliSense för CSS-klassnamn analyserar dina CSS-, SCSS- eller Less-filer för att Erbjud automatisk komplettering av klassnamn i HTMLDetta är särskilt användbart när det finns verktyg eller klasser med långa namn.
Om du använder Tailwind går Tailwind CSS IntelliSense ett steg längre och tillhandahåller Tailwind-verktygsspecifik autokomplettering, linting och inline-dokumentation, något som nästan är obligatoriskt för att arbeta bekvämt med detta ramverk.
CSS Peek och CSS Lint
CSS Peek låter dig snabbt visa och hoppa till CSS-definitionen av en klass eller ett ID från HTML-koden, antingen i ett popup-fönster eller genom att öppna motsvarande fil.
CSS Lint fungerar som en linter för stilmallar, markeringsfel eller problematiska mönster (dubbla egenskaper, ineffektiva regler etc.), vilket hjälper till att upprätthålla en renare och mer lättskött CSS.
Byt namn på tagg automatiskt och markera matchande tagg
Auto Rename Tag tar hand om något lika enkelt som det är användbart: När du ändrar den inledande taggen för ett HTML- eller XML-element uppdateras den avslutande taggen. automatiskt så att de inte blir osynkroniserade.
Markera matchande taggmarkeringar det öppnande/slutande paret i taggen där markören är placeradDetta är mycket praktiskt i stora dokument eller dokument med mycket kapslade strukturer.
Bildförhandsgranskning, bildoptimering och färgmarkering
Bildförhandsvisning visar en miniatyrbild av bilden som refereras till i en rutt genom att hålla markören över den eller i marginalen, vilket hjälper till att verifiera att sökvägarna är korrekta utan att öppna filen separat.
Bildoptimeraren tillåter komprimera bilder (förlustgivande eller förlustfria) inifrån själva redigeraren, vilket gör dina tillgångar redo för produktion utan att behöva använda externa verktyg.
Färgmarkering markerar färgkoder (hex, RGB, HSL, etc.) med deras faktiska färg som bakgrund eller understrykning, vilket gör det mycket enklare att arbeta med komplexa paletter.
Extra produktivitetsförlängningar, design och anpassning
Förutom de rena utvecklingsverktygen finns det en hel del tillägg utformade för för att göra din vardag bekvämare och din redaktör mer tilltalande för ögat.
Teman för VS-kod
Teman påverkar direkt din visuella komfort. Några av de mest populära och rekommenderade är: Nyanser av lila, materialtema, Nattugla, Horizon, Noctis eller Flatland Monokai.
Var och en har sin egen personlighet: ljusa mörka färgscheman, paletter utformade för att minska ögonansträngning, variationer i ljusa och mörka färger, eller till och med helt monokroma teman för dig som vill ha noll distraktioner.
Påfågel
När man öppnar flera projekt samtidigt är det lätt att bli förvirrad. Peacock låter dig ändra accentfärgen för VS Code-fönstret per projektså att du med en snabb blick kan se om du redigerar backend, frontend eller en specifik mikrotjänst.
Det är ett enkelt men otroligt användbart tillägg om Vanligtvis har du flera arbetsytor öppna samtidigt..
Indrag-regnbåge och regnbågsparenteser
indrag-regnbågens färger indragskolumner med olika toner, vilket gör det lättare att se kodstrukturen.
Rainbow Brackets gör något liknande med parenteser, hakparenteser och klammerparenteseratt tilldela en annan färg till varje kapslingsnivå. Mellan de två blir det mycket enklare att hitta en saknad parentes eller ett dåligt indraget block.
Att-göra-träd
Om du använder kommentarer som TODO, FIXME eller BUG, Todo Tree skannar din arbetsyta och skapar en instrumentpanel med alla dessa anteckningar organiserad i trädform.
Därifrån kan du navigera direkt till varje punkt i koden där det finns väntande uppgifter eller markerade problem, förvandla TODO:erna till en slags mini-uppgiftshanterare länkad till arkivet.
GitHub Copilot, Tabnine och ChatGPT/AI
AI-baserade verktyg för autokomplettering har gjort ett starkt intåg. GitHub Copilot och Tabnine föreslår rader eller hela kodblock baserat på sammanhanget, tidigare tester eller kommentarer.
Tillägg som integrerar ChatGPT eller liknande modeller i VS Code tillåter begära kodförklaringar, refaktorera funktioner eller generera tester utan att lämna redigeraren. De kräver API-nycklar, men som utvecklingscopilot är de mycket kraftfulla om de används klokt.
Markdown Allt i ett och förbättrad Markdown-förhandsvisning
Om du dokumenterar projekt eller skriver tekniska inlägg, Markdown All in One lägger till genvägar, förbättrad förhandsvisning, indexgenerering och andra bekvämligheter att arbeta med Markdown.
Kombinerat med förhandsgranskningstillägg i GitHub-stil får du en skrivupplevelse som liknar hur dina README-filer eller artiklar senare kommer att se ut på webben
Docker, fjärr-SSH och fjärr-WSL
I professionella miljöer är det mycket vanligt att arbeta med containrar eller fjärrstyrda maskiner. Det officiella Docker-tillägget låter dig hantera avbildningar, containrar, nätverk och volymer. från sidofältet, förutom att underlätta felsökning i containrar.
Fjärr-SSH och fjärr-WSL låter dig Öppna fjärrmappar eller Linux-miljöer (WSL) som om de vore lokala projekt, exekverar kommandon och felsöker direkt, men med bekvämligheten av VS Code-gränssnittet.
Med alla dessa tillägg väl valda och konfigurerade går Visual Studio Code från att vara en enkel lättviktig editor till En anpassad utvecklingsmiljö, skräddarsydd för din stack, ditt arbetssätt och dina projekt.Att hitta balansen mellan att inte överbelasta det och att bara ha de verktyg du behöver är nyckeln till att få snabbhet, komfort och kvalitet i din dagliga programmering.
