Visual Studio-code mijn nieuwe favoriete code-editor

In deze video ga ik je voorstellen aan mijn nieuwe favoriete codebewerker: Visual Studio Code. Visual Studio is een Microsoft-product, dat voor velen van jullie als een verrassing kan komen, maar zet je vooroordelen even opzij en ga met me mee als ik je rondleid.

Visual Studio-code

 

In de loop van de jaren heb ik een reeks verschillende codebewerkers gebruikt; TextMate, Coda, Sublime Text, Atom en iedereen heeft zijn voors en tegens gehad. Visual Studio Code is echter absoluut mijn favoriet tot nu toe, dus laten we eens kijken naar enkele van zijn functies.

Begin met het downloaden van de versie voor uw systeem (Windows, Mac OS, Linux) op code.visualstudio.com (het is ook gratis).

UI

Een van de redenen waarom ik Visual Studio Code zo leuk vind, is de interface; het is heel eenvoudig.

Het heeft een aantal zijbalken, die links of rechts kunnen worden gepositioneerd volgens uw voorkeur. De eerste geeft u enkele pictogrammen om tussen panelen te schakelen. Kies uit Explorer, Zoeken, Git, Debug en Extensies. Ga naar Beeld om het weergavetype te wijzigen (volledig scherm, zen-modus etc.)

Bewegen over mappen in de Verkenner geeft ons een aantal opties: Nieuw bestand, Nieuwe map, Vernieuwen en Alles samenvouwen. Rechtsklikken roept een contextmenu op.

Opdrachtpalet

Raken Shift-Command-P om het opdrachtpalet te openen.

Binnen dit paneel kun je zoeken naar wat je maar wilt voor snelle en eenvoudige actie; Git-commando's, thema's wijzigen, extensies installeren - het kan allemaal via het command palet.

evenzo, Command-P zal de Ga naar Bestand… palet.

Terminal

Holding Commando-' opent de ingebouwde terminal, die ik liefde.

Hiermee wordt de terminal rechtstreeks in de hoofdmap van uw project geopend, zodat u niet hoeft te navigeren. Klikken op de + pictogram opent meer terminalvensters die kunnen worden omgeschakeld met behulp van de vervolgkeuzelijst. Dit alles draagt ​​bij aan een echt nuttige functie, vooral als u compilers gebruikt bij het coderen.

Git

Een ander kenmerk waar ik een grote fan van ben, is de Git-integratie. De wijzigingen die u in uw bestanden aanbrengt, worden op verschillende plaatsen gemarkeerd, zodat u precies weet wat er gebeurt:

In de bovenstaande afbeelding ziet u de melding in de zijbalk die me informeert over een niet-gecommiteerde wijziging, de wijziging die wordt vermeld in het paneel Git en een markeerlijn om aan te geven waar de wijziging in het bestand zelf is.

VSC zal ook versie vergelijkingen naast elkaar weergeven, alleen voor extra duidelijkheid.

Andere standaard Git-commando's zoals sync, pull, enzovoort zijn beschikbaar via het Git-paneel.

Emmet (Zen-codering)

Goed nieuws: Emmet is al ingebouwd in VSC. Er is geen configuratie of configuratie vereist, u kunt het gewoon gaan gebruiken (met tab is de voorgedefinieerde sneltoets om uw fragmenten te activeren) zodra u de editor voor de eerste keer opent.

Meerdere cursors

Wanneer u een codefragment in uw bestand markeert, markeert VSC automatisch alle andere exemplaren van die reeks. Je kunt dan raken Command-D om nog een cursor toe te voegen aan de volgende instantie, of Shift-Command-L om een ​​cursor toe te voegen aan alle instanties. Massabewerking, gemakkelijk.

instellingen

De pagina Instellingen in VSC is zeer intuïtief. Net als Sublime Text worden instellingen opgeslagen in een bestand (in dit geval JSON), waarmee u door alle standaardinstellingen kunt bladeren. Door de Bewerk pictogram naast elke instelling, u kopieert het naar een aangepast bestand waar u wijzigingen kunt aanbrengen:

Raken Opslaan en zie je wijzigingen onmiddellijk effect hebben.

IntelliSense

IntelliSense is een functie binnen VSC die ik heel graag wilde uitproberen zodra ik de editor voor het eerst opende. Het is een super-opgeladen auto-aanvulling, syntax-highlighting-assistent en gaat een beetje verder dan je zou verwachten dat dit soort functies gaan.

Als u de muisaanwijzer op CSS-selectors plaatst, krijgt u een voorbeeld van hoe u de bijbehorende HTML kunt gebruiken (erg handig voor beginners):

Als u de eigenschappen overziet, wordt documentatie weergegeven over wat ze doen en worden de kleurwaarden voorafgegaan door kleine stalen om u te laten zien hoe ze op het scherm worden weergegeven. Code-suggesties tijdens het typen zijn ook uiterst grondig.

uitbreidingen

Code> Voorkeuren> Kleurthema zal het kleurenpalet openen (je raadt het al). Blader door de voorbeelden en je ziet de gebruikersinterface dienovereenkomstig veranderen. Raken invoeren om deze wijzigingen permanent te maken.

Naast de standaardthema's is er ook een enorme marktplaats met andere (momenteel gratis) voorbeelden beschikbaar, plus allerlei uitbreidingen om mee te spelen.

Conclusie

Dat zowat een paar van mijn favoriete functies in Visual Studio Code bevat, is voldoende om te zeggen dat er veel, veel meer functies beschikbaar zijn voor discussie. In termen van mijn ervaring gebruik makend van VSC tot nu toe, ik kan alleen maar zeggen dat het positief is geweest. Eerder gebruikte ik Atom en ik heb er geen spijt van dat ik de schakelaar een beetje heb gemaakt. Natuurlijk ben je het misschien niet met me eens, maar naar mijn persoonlijke mening zal je niet ver mis gaan als je het downloaden downloadt en deze code-editor neemt voor een draai.

handige links

  • Essentiële uitbreidingen voor Visual Studio Code door Craig Campbell
  • Visual Studio-code downloaden
  • Basisinformatie over webontwerp: een teksteditor kiezen
  • Visual Studio Code Marketplace