13 Beste Visual Studio-code-extensies die u zou moeten proberen

Visual Studio Code is een van de meest populaire code-editors die niet alleen open source is, maar ook platformonafhankelijk, lichtgewicht en snel. Hoewel VS Code direct uit de doos behoorlijk krachtig is dankzij de Intellisense-technologie en meegeleverde extensies zoals Emmet, kun je de functionaliteit en bruikbaarheid ervan verder vergroten door extra extensies te installeren. Hier zijn enkele van de beste VScode-extensies die ik heb gevonden door Visual Studio Code de afgelopen jaren of zo te gebruiken.

Beste Visual Studio-code-extensies

1. Instellingen synchroniseren

Settings Sync is een van de beste en moet de VS Code-extensie hebben die elke gebruiker zou moeten hebben. De reden hiervoor is dat Settings Sync al uw aangepaste VS Code-instellingen, sneltoetsen, thema's en plug-ins synchroniseert met GitHub. Dit elimineert de noodzaak om alle extensies en thema's opnieuw te installeren en ze elke keer dat u VS Code installeert of wanneer VS Code op meerdere systemen gebruikt, opnieuw te configureren. Het beste van Settings Sync is dat het vrij eenvoudig te gebruiken is. Nadat je het aan GitHub hebt gekoppeld, kun je instellingen uploaden of synchroniseren met slechts een enkele sneltoets. Indien nodig kunt u het configureren om automatisch instellingen te uploaden of downloaden.

2. Live server

Als je een webontwikkelaar bent of gewoon iemand die werkt met webtechnologieën zoals CSS, JavaScript, PHP, HTML, etc., dan is Live Server een must-have. Wat Live Server doet, is dat het een lokale server maakt binnen VS Code en u de ontwikkelpagina's met slechts twee klikken in elke browser van uw keuze laat openen. U hoeft niet handmatig naar de bestandslocatie te gaan en deze vanaf daar te openen. Om nog maar te zwijgen, wanneer Live Server actief is en werkt, wordt de pagina automatisch opnieuw geladen telkens wanneer u het document opslaat. Dus als u een webontwikkelaar bent, probeer het dan eens. Je gaat niet terug.

3. Open in browser

Zoals u aan de naam zelf kunt zien, kunt u met de extensie Open in Browser alle ondersteunde bestanden openen in de standaardbrowser of in de browser van uw keuze met een enkele klik. Hoewel niet zo krachtig of rijk aan functies als de Live Server-extensie, helpt Open in Browser u om snel een voorbeeld van het webdocument te bekijken zonder een instantie van een achtergrondserver te maken. Om nog maar te zwijgen, de Open in Browser-extensie is vrij lichtgewicht en doet wat het zegt zonder enige hik.

4. Mooier

Prettier is weer een van mijn favoriete extensies die ik bijna onmiddellijk installeer. Zoals de naam al doet vermoeden, zorgt Prettier ervoor dat de code er mooi uitziet en verbetert de leesbaarheid door deze correct te formatteren volgens de officiële en industriestandaarden. Nadat u de extensie hebt geïnstalleerd, kunt u uw code verfraaien door op een sneltoets te drukken of de extensie configureren vanaf de VS Code-instellingenpagina om de code automatisch op te maken bij het opslaan. Indien nodig kunt u wijzigen hoe Prettier uw code opmaakt door verschillende instellingen zoals tabspaties, haakjesafstand, volgkomma, afdrukbreedte, omloop, enz. Te wijzigen vanaf de instellingenpagina zelf.

5. Kleurinfo

Color Info is een zeer eenvoudige maar effectieve extensie die een grote preview en aanvullende informatie toont over de kleuren die u in CSS gebruikt. In het geval u zich afvraagt, ja, VS Code toont een kleine preview van de kleur die u gebruikt. Het is echter niet zo handig, vooral niet bij donkere thema's. De aanvullende informatie die wordt getoond door Color Info omvat maar is niet beperkt tot HSL-waarden, RGB-waarden, alfawaarden, meerdere soorten kleurvoorbeelden, enz. Color Info ondersteunt CSS, SASS, SCSS en LESS.

6. Todo Markeerstift

Heb je ooit een aantal wijzigingen willen aanbrengen, een update of code willen toevoegen, maar ben je het vergeten? Installeer Todo Highlighter en je hoeft die beproeving niet opnieuw te doorstaan. Als je de Todo-functie ooit in een IDE (Integrated Development Environment) hebt gebruikt, werkt Todo Highlighter in VS Code op dezelfde manier. Voeg gewoon de Todo's toe zoals u normaal zou doen en ze zullen opvallen tussen uw normale code en uw aandacht erop vestigen.

7. Regex-voorbeeld

Het maakt niet uit hoe vaak ik reguliere expressies gebruik, ik raak er nog steeds door in de war. Eerlijk gezegd kan ik mijn eigen Regex niet goed schrijven. Een van de redenen hiervoor is dat ik mijn regex niet direct kan verifiëren. Dat is waar Regex Preview komt spelen. Nadat u Regex Preview hebt geïnstalleerd, wordt het voorbeeld van uw regex naast elkaar weergegeven. Als je met veel reguliere expressies speelt, probeer dan Regex Preview eens en kijk of het aan je wensen voldoet.

8. Git-lens

VS Code heeft de juiste ingebouwde ondersteuning voor Git en maakt het gemakkelijk te gebruiken. Git Lens gaat nog een stapje verder en versterkt de ingebouwde Git-mogelijkheden van VS Code. Wat Git Lens speciaal maakt, is dat het het gemakkelijk maakt om repositories te verkennen, bestandsgeschiedenis te verkennen, het auteurschap van code te visualiseren met Git schuldannotatie en codelens, recente wijzigingen te markeren, een zoekopdracht uit te voeren, verschillende branches te vergelijken, enz. Als je Git uitgebreid gebruikt, probeer het dan Git Lens, het maakt een wereld van verschil in uw workflow.

9. Pad Intellisense

Bij webontwikkeling is het heel gebruikelijk om verschillende soorten bestanden, zoals CSS, JS, te koppelen in documenten als HTML en PHP. Hoewel het niet zo moeilijk is om het bestandspad in te typen, kan een beetje hulp in de vorm van automatisch aanvullen een lange weg gaan. Path Intellisense doet precies dat. dat wil zeggen, het vult automatisch de bestandsnaam en het pad aan, zodat u niet lang hoeft na te denken over het bestandspad of de naam.

10. CSS Peek

VS Code heeft een handige functie genaamd Ga naar definitie en Ga naar typedefinitie die u naar de declaratie of typedefinitie van een symbool brengt. CSS Peek gaat nog een stapje verder en toont u een voorbeeld van CSS die in uw document wordt gebruikt. Dit is erg handig omdat u uw huidige document niet hoeft te verlaten om te zien wat u doet met die specifieke CSS-klasse of ID. Als u een webontwerper bent, is CSS Peek een van die onmisbare extensies voor VS Code.

11. Markeer alles in één

Met Markdown All in One kunt u snel leesmij-bestanden of rich text maken en bewerken met Markdown, rechtstreeks in de VS-code. Het beste van Markdown All in One is dat het een live preview kan laten zien en het gebruik is ook erg intuïtief.

12. Bladwijzers

Als u veel code schrijft, is het niet meer dan normaal dat u keer op keer tussen een aantal belangrijke delen wisselt. Hoewel VS Code regelnummers heeft, wordt uw leven gemakkelijker als u die belangrijke regels kunt markeren. De extensie Bladwijzers doet precies dat, zodat u gemakkelijk belangrijke posities kunt markeren en er snel en gemakkelijk tussen kunt navigeren.

13. Beugelpaar Colorizer

Ik heb onlangs de Bracket Pair Colorizer-extensie ontdekt en het werd al snel een van mijn favoriete extensies in VS Code. Zoals je aan de naam zelf kunt zien, maakt Bracket Pair Colorizer het gemakkelijk om bijpassende haakjes te identificeren. Het zal niet alleen haakjes met kleuren matchen, maar zal ook het hele codeblok tussen de haakjes markeren, zodat u weet waar u zich bevindt. Vertrouw me, als je geneste loops maakt of als statements, Bracket Pair Colorizer zal je veel helpen.

Hoop dat het helpt. Als je denkt dat ik een van je favoriete VS Code-extensies heb gemist, deel ze dan in de comments hieronder.