Als je dagelijks programmeert, weet je dat een goed afgestelde editor het verschil maakt tussen een productieve dag en een dag vol frustraties. Visual Studio Code is uitgegroeid tot de referentie-editor. Dankzij de prestaties, het uitbreidingssysteem en een enorme community die continu nieuwe tools ontwikkelt.
De ware magie van VS Code schuilt niet alleen in de basiseditor, maar in het hele ecosysteem. Honderden extensies voegen geavanceerde autocomplete-functies, linters, thema's, lokale servers, debugging, pictogrammen, Git-integratie, AI en nog veel meer toe.In deze handleiding vindt u een zeer complete verzameling aanbevolen extensies: van de essentiële extensies voor elke programmeertaal tot extensies die specifiek zijn voor JavaScript, Python, PHP, HTML/CSS, TypeScript en het dagelijkse werk met Git, Docker of Markdown.
Wat is VS Code en waarom zijn de extensies ervan zo belangrijk?
Visual Studio Code is een gratis en platformonafhankelijke code-editor Ontwikkeld door Microsoft, beschikbaar voor Windows, macOS en Linux, en behoort tot de de beste ontwikkelomgevingen.
Het beschikt al over zeer krachtige functies, direct vanuit de doos: Syntaxmarkering, IntelliSense, geïntegreerde debugging, terminal, Git-integratie en basisondersteuning voor vele talen.Maar het wordt pas echt interessant wanneer je extensies gaat installeren om de omgeving aan te passen aan je manier van werken.
De architectuur van VS Code is ontworpen om zeer uitbreidbaar te zijn: Vrijwel elk aspect van de editor kan worden verbeterd of vervangen.Van het debugsysteem tot thema's, pictogrammen of automatisch aanvullen voor een specifieke taal.
Bovendien bestaat er niet slechts één VS Code: Je kunt de officiële versie gebruiken of open-source alternatieven zoals VSCodium.die telemetrie en bepaalde propriëtaire onderdelen verwijderen, maar de compatibiliteit met de meeste extensies behouden.
Hoe installeer en beheer je extensies in VS Code?
Het installeren van extensies in VS Code is heel eenvoudig. Alles gebeurt vanuit de eigen interface van de editor.zonder dat u handmatig bestanden hoeft te downloaden.
Om nieuwe functies toe te voegen, opent u de editor en gaat u naar het extensiepaneel (vierkant pictogram in de zijbalk of snelkoppeling). Ctrl+Shift+X / Cmd+Shift+X op macOS). Vervolgens kunt u zoeken op naam of trefwoord. de extensie die u interesseert.
Als je een interessante uitbreiding vindt, raadpleeg dan het bijbehorende informatieblad: Aantal downloads, recensies, compatibiliteit en screenshotsDat geeft je een goede indicatie of het de moeite waard is om het te installeren of niet.
Om het proces te voltooien, klikt u eenvoudig op de knop 'Installeren'. De meeste extensies worden direct geactiveerd.Sommige vereisen het opnieuw laden van het editorvenster, en een paar vereisen extra configuratie (bijvoorbeeld die welke afhankelijk zijn van externe tools zoals ESLint, PHP Debug met Xdebug, enz.).
Essentiële algemene uitbreidingen voor elk project
Er is een reeks extensies die vrijwel iedereen zou moeten hebben geïnstalleerd, ongeacht de programmeertaal of de gebruikte technologie. Ze richten zich op productiviteit, opmaak, samenwerking, versiebeheer en gebruikerservaring..
prettier
prettier is de facto standaard codeformatter In de wereld van JavaScript en veel andere programmeertalen wordt je code automatisch herschreven volgens vooraf gedefinieerde stijlregels.
Het is in staat tot formatteren JavaScript, TypeScript, JSX, TSX, JSON, HTML, CSS, SCSS, Less, YAML, GraphQL, Markdown, Vue, Angular en nog veel meer. Het idee is dat discussies over het gebruik van enkele of dubbele aanhalingstekens, puntkomma's of niet, waar accolades te gebruiken, enzovoort, zullen verdwijnen omdat Het hele project volgt dezelfde conventie..
U kunt de standaardinstellingen gebruiken of uw eigen regels maken met behulp van bestandstypen. .prettierrcDe gebruikelijke procedure is om de te activeren opmaak bij het opslaanzodat de code elke keer dat je op Ctrl+S drukt, schoon en consistent is.
ESlint
Terwijl Prettier zich richt op het codeaspect, ESLint richt zich op kwaliteit en goede praktijken.Het is de meest gebruikte linter in moderne JavaScript- en TypeScript-projecten.
De ESLint-extensie voor VS Code zorgt ervoor dat de analyse op de achtergrond wordt uitgevoerd terwijl je typt. Het toont fouten en waarschuwingen direct in de code.Problematische lijnen worden gemarkeerd en er worden snelle suggesties gegeven om ze te corrigeren.
Je kunt gebruikmaken van veelgebruikte configuraties zoals Airbnb, de standaard of de officiële ESLint-aanbevelingenOf definieer je eigen regels om ze aan te passen aan het project. Het is ook compatibel met plugins voor frameworks zoals React, Vue of Node.js.
Betere reacties
Bij grote projecten vormen de opmerkingen al snel een onoverzichtelijke brij die moeilijk te volgen is. Better Comments biedt de mogelijkheid om reacties visueel te categoriseren. Gebruik kleuren die overeenkomen met het voorvoegsel dat je gebruikt.
Je kunt bijvoorbeeld opmerkingen hebben van het type ALLES, WAARSCHUWING, BELANGRIJKE VRAAGenzovoort, elk met hun eigen stijl. Dit maakt het veel gemakkelijker om openstaande taken, belangrijke opmerkingen of sleutelverklaringen te vinden tijdens het controleren van de code.
Code spellingcontrole
Alhoewel het misschien een klein detail lijkt, Spelfouten in variabelnamen, commentaren of interfacetekst zien er erg slecht uit.Code Spell Checker fungeert als een spellingscontrole voor code.
Analyseert identificatoren, tekenreeksen en commentaren en Markeer de verdachte woorden.Het biedt suggesties voor het corrigeren ervan. Het kan met meerdere talen worden gebruikt en is erg handig als je documentatie of voor de gebruiker zichtbare tekst in de code schrijft.
Foutlens
VS Code geeft al fouten en waarschuwingen weer, maar soms worden die over het hoofd gezien. Error Lens maakt ze onmogelijk te negeren. De diagnostische informatie wordt direct naast de betreffende regel en in de marge van de editor weergegeven.
In één oogopslag zie je waarbij fouten geconcentreerd zijn in een bestandZonder dat je het issues-paneel hoeft te openen. Bij grote projecten met veel linters en analysetools is dit een enorme hulp om ervoor te zorgen dat er niets over het hoofd wordt gezien.
coderunner
Als je het graag probeert kleine codefragmenten zonder een volledig project samen te stellenCode Runner is erg praktisch. Het stelt je in staat om code uit meerdere programmeertalen (JavaScript, Python, C, C++, Java, PHP en meer) rechtstreeks vanuit de editor uit te voeren.
Je kunt het huidige bestand openen of alleen het geselecteerde blok. Bekijk de uitvoer op een geïntegreerd paneel. Of rechtstreeks in de VS Code-terminal, en pas de gebruikte commando's aan voor elke taal.
Pad Intellisense
Bij het werken met veel assets, imports en relatieve paden is het handmatig invoeren ervan een gegarandeerde fout. Path Intellisense vult automatisch bestands- en mappaden aan. tijdens het schrijven van tekenreeksen met paden.
Werkt aan JavaScript/TypeScript-imports, CSS-referenties, HTML-afbeeldingspaden En in het algemeen in elke context waarin VS Code detecteert dat je een route aan het typen bent. Het bespaart tijd en voorkomt vervelende typefouten.
vscode-icons, Material Icon Theme en andere iconenpakketten
Iconen zijn niet alleen een kwestie van esthetiek. Een goed iconenthema zorgt ervoor dat je het bestandstype direct kunt herkennen. alleen al door naar de browser te kijken.
vscode-icons, Material Icon Theme, VSCode Great Icons of specifieke thema's zoals Vereenvoudigde VSCode-pictogrammen met Angular. Ze bieden aangepaste pictogrammen voor talen, frameworks en configuratiebestanden (Angular, Docker, env, enz.).
De keuze tussen de twee is een kwestie van smaak, maar Elk van deze opties verbetert de leesbaarheid van de bestandsstructuur aanzienlijk.vooral bij projecten met één wooneenheid of grote projecten.
GitLens
GitLens is waarschijnlijk De krachtigste extensie voor het werken met Git vanuit VS Code.Het tilt versiebeheer naar een hoger niveau door de geschiedenis volledig in de editor te integreren.
Hiermee kunt u zien Wie heeft elke regel gewijzigd en wanneer (de schuldige), de geschiedenis van een bestand, revisies vergelijken, branches en tags verkennenen nog veel meer. Het toont ook contextuele annotaties bij de code met informatie over de laatste commit.
Als je in een team werkt, is het fantastisch om elkaar te begrijpen. de redenen voor bepaalde wijzigingen, het beoordelen van regressies en het uitvoeren van codebeoordelingen. zonder de editor te verlaten.
Live delen
Voor pair programming of begeleiding op afstand, Live Share is een van de beste dingen die er zijn.Hiermee kun je je VS Code-sessie in realtime delen met iemand anders.
Jullie kunnen allebei hetzelfde bestand bewerken, samen debuggen, terminals en lokale servers delen. En je kunt zelfs een geïntegreerde chat openen. Het is perfect voor het oplossen van complexe bugs of om iemand te leren hoe hij aan een specifiek project moet werken.
Specifieke extensies voor JavaScript en TypeScript.
Het JavaScript- en TypeScript-ecosysteem is een van de ecosystemen die het meest worden bevoordeeld door VS Code. Als je werkt aan frontend, backend met Node, of full-stack development, zullen deze extensies je vele uren besparen..
JavaScript (ES6)-codefragmenten
Het steeds opnieuw schrijven van dezelfde structuren is vervelend. JavaScript (ES6) code snippets voegt talloze codefragmenten toe voor moderne syntax. vanuit JS en TS.
Met korte afkortingen kunt u genereren pijlfuncties, klassen, imports, console.log, lusstructuren En nog veel meer. Het is ideaal om minder te onthouden en sneller te typen.
npm Intellisense en npm-extensie
Als je met veel verschillende softwarepakketten werkt, is het onthouden van de exacte namen niet bepaald prettig. npm Intellisense vult de namen van geïnstalleerde modules automatisch aan. in uw import- en vereisteninstellingen.
Ondertussen integreert de officiële npm-extensie voor VS Code met uw package.json om scripts weer te geven en uit te voeren Met één klik kunt u afhankelijkheden bekijken en routinetaken beheren zonder de terminal te openen.
Importkosten
De grootte van het pakket aan de voorkant is van groot belang. Importkosten berekent de geschatte omvang van elke import. en toont het naast de bijbehorende regel.
Op deze manier weet je meteen of je een enorme bibliotheek importeert voor iets onbenulligs, en kun je wijzigingen zoals Gebruik gedeeltelijke imports, lazy loading of lichtere alternatieven..
Quokka.js
Quokka.js functioneert als een Interactief notitieblok voor JavaScript en TypeScript. Binnen VS Code voert het de code uit terwijl je deze schrijft en toont het de resultaten en variabele waarden in inline-annotaties.
Het is perfect voor Test snel ideeën, leer nieuwe API's kennen of debug kleine functies. Zonder dat je een heel project vanaf nul hoeft op te bouwen. Er is een gratis versie met zeer nuttige functies en een betaalde editie met extra's.
ES7 React/Redux/GraphQL/React-Native codefragmenten en eenvoudige React codefragmenten
Als je met het React-ecosysteem werkt, zijn deze twee extensies goud waard. ES7 React/Redux/GraphQL/React-Native codefragmenten biedt codefragmenten voor componenten, hooks, Redux, GraphQL en React Native.vrijwel alle gangbare patronen komen aan bod.
Simple React Snippets daarentegen richt zich op een kleinere set codefragmenten voor moderne React (functionele componenten, basisimporten, enz.), ideaal als je iets wilt dat minder overweldigend maar even productief is.
JavaScript en TypeScript Nightly
Als je graag op de hoogte blijft van de laatste ontwikkelingen op het gebied van taal, JavaScript en TypeScript Nightly geeft je toegang tot de nightly-versie van de TypeScript-taalserver. die gebruikmaakt van VS Code.
Dat betekent nieuwe functies, prestatieverbeteringen en bugfixes voordat ze de stabiele versie bereiken – ideaal voor nieuwe taalfunctionaliteiten testen en toekomstige wijzigingen detecteren Dat kan van invloed zijn op uw code.
Python-extensies
VS Code wordt met de juiste extensies een Uitstekende Python IDEAls je backend-ontwikkeling, data science of automatisering met deze taal doet, zijn deze vaardigheden vrijwel onmisbaar.
Python (officiële extensie)
De officiële Python-extensie van Microsoft is de hoeksteen voor het werken met deze taal in VS CodeZonder dat is de ondersteuning zeer beperkt.
biedt IntelliSense, debuggen, testen, integratie met virtuele omgevingen, codeopmaak (Black, autopep8), linting met Pylint of Flake8 en vele andere essentiële functies.
Pylance
Pylance is de geavanceerde taalserver voor Python Dit is een verdere verbetering van de officiële extensie. Het biedt snelle statische analyse, verbeterde automatische aanvulling en zeer gedetailleerde typecontrole.
Als je type-annotaties gebruikt of fouten wilt detecteren voordat je de code uitvoert, Pylance verbetert de ontwikkelervaring aanzienlijk. in middelgrote en grote projecten.
Jupiterpy
De Jupyter-extensie integreert notebooks .ipynb rechtstreeks in VS CodeJe kunt cellen maken, openen en uitvoeren net als in de klassieke Jupyter, maar dan vanuit de editor.
Het is vooral handig voor data-analyse, machinaal leren, visualisatie en snelle prototypingwaarbij het beste van notebooks gecombineerd wordt met de voordelen van een volwaardige editor.
Python-docstringgenerator
Interne documentatie in Python wordt meestal in docstrings weergegeven. De Python Docstring Generator maakt automatisch de basisstructuur van de docstring aan. voor functies, klassen en methoden.
Wanneer je de openingsaanhalingstekens typt, genereert de extensie velden voor beschrijving, parameters en retourwaarde gebaseerd op de functiesignatuur, wat goed gedocumenteerde code stimuleert zonder dat het een al te lastige klus wordt.
PHP en backend-extensies
PHP blijft een belangrijke pijler in de webbackend, en VS Code heeft een zeer volwassen ecosysteem van extensies voor deze taal.
PHP IntelliSense en Intelephense
PHP IntelliSense was een van de eerste serieuze autocomplete-extensies voor PHP. Het biedt Suggesties voor functies, klassen, methoden, naamruimten en variabelen, naast de basisnavigatie naar definities.
PHP Intelephense gaat nog een stap verder: Zeer snelle en grondige analyse, refactoring, literatuuronderzoek, bijgewerkte ondersteuning voor PHP 7 en 8. en meer. Zelfs de gratis versie presteert al beter dan de meeste alternatieven.
PHP DocBlocker
Om een ​​degelijke documentatie te behouden bij grote projecten, PHP DocBlocker genereert DocBlock-commentaren Voltooi de beschrijving voor functies, methoden, klassen en eigenschappen.
Geschreven / ** Bij een functie worden de parameters en het retourtype automatisch ingevuld, wat een stimulans is. Documenteer interne en openbare API's op de juiste manier..
Componist
Composer is de standaard voor afhankelijkheidsbeheer in PHP. De bijbehorende extensie integreert met VS Code voor Voer veelgebruikte commando's uit (installeren, bijwerken, vereisen) vanuit het palet, en biedt daarnaast ook de mogelijkheid tot automatisch aanvullen en markeren in composer.json.
Dit maakt het een stuk comfortabeler. Beheer bibliotheken, frameworks en scripts. zonder constant te hoeven wisselen tussen editor en terminal.
PHP-foutopsporing
PHP debuggen met var_dump heeft zo zijn charmes, tot op zekere hoogte. PHP Debug voegt een volwaardige debugger toe, gebaseerd op Xdebug. binnen VS Code.
Daarmee kun je Stel breekpunten in, inspecteer variabelen, doorloop de code stap voor stap. en de aanroepstack analyseren. De eerste installatie vereist enige aandacht, maar eenmaal ingesteld is het een essentieel hulpmiddel.
Extensies voor HTML, CSS en frontend-ontwikkeling
Als je aan de visuele kant van het web werkt, zijn er verschillende extensies die Ze transformeren VS Code in een uiterst comfortabele omgeving voor lay-out en styling..
Live server
Live Server monteert een lokale ontwikkelserver met automatische herlaadfunctieDoor op "Live gaan" te klikken, wordt uw site in uw browser geopend en wordt de pagina vernieuwd telkens wanneer u een bestand opslaat.
Het is ideaal voor Pure HTML, snelle prototyping, statische lay-out en eenvoudige front-endprojecten.waarbij het direct zien van de veranderingen een wereld van verschil maakt.
HTML- en CSS-ondersteuning
Deze extensie verbetert de integratie tussen HTML en CSS. Het biedt intelligente automatische aanvulling van klassen en ID's die in uw stylesheets zijn gedefinieerd. Als je HTML schrijft, geldt dat ook voor het schrijven van HTML, en omgekeerd.
Het suggereert ook CSS-eigenschappen (waaronder leveranciersvoorvoegsels) en werkt uitstekend samen met Emmet, wat de lay-outworkflow aanzienlijk versnelt.
IntelliSense voor CSS-klassenamen en Tailwind CSS IntelliSense
IntelliSense voor CSS-klassenamen analyseert uw CSS-, SCSS- of Less-bestanden om Bied automatische aanvulling van klassenamen in HTML aan.Dit is vooral handig wanneer er hulpprogramma's of klassen met lange namen zijn.
Als je Tailwind gebruikt, gaat Tailwind CSS IntelliSense nog een stap verder en biedt het de volgende mogelijkheden: Tailwind-functionaliteit voor specifieke hulpprogramma's, inclusief automatische aanvulling, linting en inline documentatie.Iets wat vrijwel onmisbaar is om comfortabel met dit framework te kunnen werken.
CSS Peek en CSS Lint
Met CSS Peek kunt u Bekijk snel de CSS-definitie van een klasse of ID en spring er direct naartoe. vanuit de HTML, hetzij in een pop-upvenster, hetzij door het bijbehorende bestand te openen.
CSS Lint fungeert als een linter voor stylesheets. fouten bij het markeren van patronen of problematische patronen (dubbele eigenschappen, inefficiënte regels, enz.), wat bijdraagt ​​aan een schonere en beter onderhoudbare CSS.
Tags automatisch hernoemen en overeenkomende tags markeren
De functie 'Automatisch hernoemen van tags' doet iets dat even simpel als nuttig is: Wanneer je de openingstag van een HTML- of XML-element wijzigt, wordt de sluitingstag automatisch bijgewerkt. automatisch, zodat ze niet uit synchronisatie raken.
Markeer overeenkomende tags het openings-/sluitingspaar van de tag waar de cursor zich bevindtDit is erg praktisch bij grote documenten of documenten met een sterk geneste structuur.
Afbeeldingsvoorbeeld, Afbeeldingsoptimalisatie en Kleurmarkering
Afbeeldingsvoorbeeld toont een miniatuur van de afbeelding waarnaar in een route wordt verwezen Door de cursor eroverheen of in de marge te bewegen, kunt u controleren of de paden correct zijn zonder het bestand apart te openen.
Image Optimizer maakt het mogelijk Comprimeer afbeeldingen (met of zonder kwaliteitsverlies) rechtstreeks vanuit de editor.waardoor uw assets direct klaar zijn voor productie, zonder dat u externe tools hoeft te gebruiken.
Kleurmarkering markeert de kleurcodes (hex, RGB, HSL, enz.) met hun werkelijke kleur als achtergrond of onderstrepingwaardoor het veel gemakkelijker wordt om met complexe kleurenpaletten te werken.
Extra productiviteitsuitbreidingen, ontwerp en aanpassingsmogelijkheden
Naast de pure ontwikkeltools zijn er ook heel wat extensies ontworpen voor om uw dagelijks leven comfortabeler te maken en uw editor er aantrekkelijker uit te laten zien..
Thema's voor VS Code
Thema's hebben direct invloed op uw kijkcomfort. Enkele van de meest populaire en aanbevolen thema's zijn: Tinten paars, materiaalthema, nachtuil, horizon, Noctis of Flatland Monokai.
Elk exemplaar heeft zijn eigen persoonlijkheid: heldere donkere kleurschema's, paletten ontworpen om oogvermoeidheid te verminderen, variaties in licht en donker, of zelfs volledig monochrome thema's Voor degenen die geen enkele afleiding willen.
Pauw
Als je meerdere projecten tegelijk opent, is het makkelijk om het overzicht te verliezen. Met Peacock kun je de accentkleur van het VS Code-venster per project wijzigen.zodat je in één oogopslag kunt zien of je de backend, de frontend of een specifieke microservice aan het bewerken bent.
Het is een simpele maar ongelooflijk handige uitbreiding als Je hebt doorgaans meerdere werkruimtes tegelijk openstaan..
Inspringing-regenboog en regenbooghaakjes
inkeping-regenboogkleuren de inspringkolommen met verschillende tinten, waardoor de structuur van de code moeiteloos te zien is.
Rainbow Brackets doet iets soortgelijks met haakjes, vierkante haken en accoladesDoor aan elk niveau van de code een andere kleur toe te wijzen, wordt het veel gemakkelijker om een ​​ontbrekende haak of een verkeerd ingesprongen blok te vinden.
Takenboom
Als je opmerkingen zoals TODO, FIXME of BUG gebruikt, Todo Tree scant je werkruimte en maakt een dashboard met al deze annotaties. georganiseerd in een boomvorm.
Vanaf daar kun je Navigeer direct naar elk punt in de code. waar er nog openstaande taken of gemarkeerde problemen zijn, waardoor de TODO's veranderen in een soort mini-taakbeheerder die gekoppeld is aan de repository.
GitHub Copilot, Tabnine en ChatGPT/AI
Op AI gebaseerde tools voor automatisch aanvullen hebben een sterke intrede gedaan. GitHub Copilot en Tabnine suggereren regels of complete codeblokken. op basis van de context, eerdere tests of opmerkingen.
Extensies die ChatGPT of vergelijkbare modellen integreren in VS Code maken het mogelijk om... Vraag om uitleg van de code, herschrijf functies of genereer tests. Zonder de editor te verlaten. Ze vereisen API-sleutels, maar als ontwikkelingshulpmiddel zijn ze zeer krachtig als ze oordeelkundig worden gebruikt.
Markdown alles-in-één en verbeterde Markdown-preview
Als je projecten documenteert of technische artikelen schrijft, Markdown All in One voegt sneltoetsen, een verbeterde preview, indexgeneratie en andere handigheidjes toe. om met Markdown te werken.
In combinatie met preview-extensies in GitHub-stijl krijg je een schrijfervaring die sterk lijkt op hoe je README's of artikelen er later uit zullen zien op internet
Docker, SSH op afstand en WSL op afstand
In professionele omgevingen is het heel gebruikelijk om met containers of machines op afstand te werken. Met de officiële Docker-extensie kunt u images, containers, netwerken en volumes beheren. vanuit de zijbalk, en het vergemakkelijkt bovendien het debuggen binnen containers.
Met Remote SSH en Remote WSL kunt u Open externe mappen of Linux-omgevingen (WSL) alsof het lokale projecten zijn., commando's uitvoeren en debuggen direct op die plek, maar met het gemak van de VS Code-interface.
Met al deze zorgvuldig gekozen en geconfigureerde extensies verandert Visual Studio Code van een eenvoudige, lichtgewicht editor in... Een ontwikkelomgeving op maat, afgestemd op uw technologieën, uw manier van werken en uw projecten.Het vinden van de juiste balans tussen het niet overbelasten van je systeem en het beschikken over precies de tools die je nodig hebt, is de sleutel tot snelheid, comfort en kwaliteit in je dagelijkse programmeerwerk.
