Share
Visual Studio Code is een van de nieuwste kinderen in het IDE "block" en het maakt veel lawaai. Het kostte enige tijd om grip te krijgen, misschien omdat het een van de weinige open source-producten van Microsoft is, maar het heeft de open-source community stormenderhand veroverd. Ontwikkelaars die ooit hun trouw aan Sublime Text 3 en Atom hebben gezworen, worden langzaam omgezet door de kracht en eenvoud van VS Code - om nog te zwijgen van de ongelooflijke bibliotheek met uitbreidingen.
Ik begon mijn eigen codeerleven op Sublime Text 3, verhuisde naar Atom, vervolgens PHPStorm, en toen mijn abonnement met JetBrains afliep, dacht ik dat ik VS Code een kans zou geven. Het blijft mijn leven gemakkelijker maken en maakt me daardoor een betere ontwikkelaar.
Deze introductie neemt je mee van nul naar held, waardoor je aan de slag kunt met VS Code, met speciale aandacht voor mijn favoriete front-end development-uitbreidingen, en ervoor zorgt dat elk aspect van je workflow wordt behandeld.
Ik ga een paar punten voor dit artikel veronderstellen:
Als eerste, als u VS-code nog niet hebt geïnstalleerd, ga dan eerst naar de website van Visual Studio Code. VS Code is platformonafhankelijk, dus onze configuraties zullen werken op Windows, Mac en Linux.
VS Code is ook beschikbaar als een Homebrew Cask-pakket op Mac: brew cask install visual-studio-code
Een stap die ik veel tutorials vind, is vaak de mogelijkheid om de VS-code vanaf de terminal uit te voeren. Er zijn een paar manieren om dit te doen. Als u al een .bash_profile-installatie hebt, kunt u dit toevoegen:
PATH exporteren = "$ PATH: / Applications / Visual Studio Code.app/Contents/Resources/app/bin"
Of, voor een meer cross-platform benadering, druk op de Command Palette-snelkoppeling: Shift + Command + P en typ het woord schelp - dit geeft je een optie genaamd: Installeer de codecommando in PATH - druk op enter en je bent klaar. Nu kunt u overal in de terminal bestanden en mappen starten door het volgende te typen: codepad / naar / file / of / dir
Laat je code achter - het is de beste manier om fouten te stoppen voordat ze je onnodige stress bezorgen!
Als u de nieuwste versie van ECMA Script gebruikt, is ESLint iets voor u. Deze extensie integreert de ESLint-patroonherkenner rechtstreeks in de VS-code en helpt u bij veelgemaakte fouten die ontwikkelaars maken met de nieuwe syntaxis. Het vereist echter wel dat het NPM ESLint-pakket lokaal in uw project of wereldwijd is geïnstalleerd.
Voor degenen onder u die graag meer programmeren met Sass, biedt Sass Lint u een eenvoudig te gebruiken set configuraties voor het schrijven van standaarden-compatibele Sass.
JS Hint is een ander geweldig JavaScript-linterprogramma dat je helpt met logica, syntaxis en meer, afhankelijk van je configuratie.
Als je een TypeScript-fan bent, dan is de TSLint-extensie je beste vriend. Omdat TypeScript een voorgecompileerde taal is, hebt u volledige controle over wat de compiler voor u doet, evenals over opties voor automatisch formatteren.
Deze extensies bieden alle Git-vriendelijke manieren om aangepaste / gedeelde configuraties te beheren tussen ontwikkelaars in uw team, namelijk in .eslintrc en .sass-lint.yml of .jshintrc
Ik heb onze HTML Linters hier met opzet achtergelaten. Terwijl ik een extensie als Beautify gebruik voor het formatteren en het tabbladen van mijn HTML volgens een .editorconfig Ik vind dat HTML Linters vrij slecht presteren. Ze houden geen rekening met semantiek en hebben de neiging om je te helpen bij toegankelijkheidsproblemen. Omdat de betekenis van HTML relatief dubbelzinnig kan zijn, is het beter om een set hulpprogramma's te gebruiken die kleinere taken uitvoeren.
Om de HTML-functionaliteit in de VS-code uit te breiden, gebruik ik het volgende:
Het kan een beetje verbetering gebruiken, maar ik heb altijd de automatische sluitingstagfunctionaliteit van Sublime Text 3 leuk gevonden. De hierboven genoemde extensie helpt u hiermee in de VS Code.
Dit is een andere handige HTML-extensie waarmee gebruikers in een HTML-element kunnen klikken en de naam ervan kunnen wijzigen, terwijl ze tegelijkertijd de afsluitende tag kunnen hernoemen.
Ik ben enige tijd geleden van Grunt verwijderd, maar toevallig lijken er geen Grunt-extensies op de markt te zijn, althans niet met voldoende grip om veel impact te hebben. De onderstaande uitbreidingen zijn voornamelijk gericht op Gulp en Webpack, omdat ze nu de leiding lijken te hebben in de taakbeheerswereld.
Met deze extensie kunt u het opdrachtpalet gebruiken in de VS-code voor het gemakkelijk injecteren van nuttige Gulp-configuraties in uw Gulpfile.js; een musthave als je nog steeds een beetje wankel bent in het opzetten van Gulp.
Het instellen van Webpack kan een van de engste taken zijn waaraan een ontwikkelaar zich moet verbinden. De Webpack-extensie voor VS Code neemt de angst weg door u een minimaal webpack.config.js te bieden om uw project te starten. Als je een persoon bent die vooruitgang maakt en je niet graag in het ongewisse gelaten wordt terwijl je Terminal over dingen denkt, dan is de Webpack Progress-extensie iets voor jou. Het biedt een mooie voortgangsbalk voor wanneer Webpack zijn ding doet.
Een van de krachtigste uitbreidingen voor versiebeheer in VS Code is:
Zowel voor nieuwkomers als gevorderde gebruikers is Git Lens een groot succes. Het maakt een gemakkelijke klus om Git en de vele fijne kneepjes beheersbaarder en visueler te maken. Ik vond het zo leuk om het te gebruiken dat ik, afgezien van het gebruik van de Terminal om toe te voegen, te committen, te vertakken en te pushen, Git GUI's volledig heb gescrapt.
Bijna elke instelling is aanpasbaar. Git Lens biedt realtime feedback van Git-gegevens tijdens het coderen. Wil je weten wie die functie heeft geschreven die niet werkt? Wil je zien hoeveel de code is veranderd in de laatste paar commits? Weet u niet zeker hoe u een samenvoegconflict moet verwerken in een bestand dat u nooit hebt geschreven of waarin weinig context bestaat? Git Lens verwerkt dit allemaal voor u.
Waar andere IDE's vol zitten met ondersteuning voor de meerderheid van de talen, laat VS Code het grotendeels aan u over. Wanneer u dit nodig hebt, kunt u taalondersteuning toevoegen voor elke technologie waarmee u te maken hebt, kant-en-klare HTML en CSS, en JavaScript wordt geboden, maar als u Python nodig hebt, is dit slechts een klik weg. In mijn workflow gebruik ik af en toe Python, maar Node was belangrijk voor mij.
Intellisense zorgt in wezen voor afwerkingen. U kunt bijvoorbeeld op het tabblad of met de muisaanwijzer op een bestandspad klikken en de VS-code doet het harde werk voor u.
Als u een van die mensen bent die graag nieuwe technologieën gebruikt in uw workflow en u gek bent op de nieuwe editie van JavaScript, dan is de Babel ES6 / ES7-linter iets voor u.
Dit is een briljante extensie die tijdens het typen automatisch bestandspaden aanneemt / voorstelt. Als je van een PHPStorm-achtergrond komt, zul je het gevoel kennen!
Een geweldige extensie bij gebruik vereisen() of import in Node.js, comprimeert deze extensie automatisch bestandspaden naar knoopmodules.
Dit is een zeer nuttige uitbreiding voor het automatisch aanvullen van CSS-klassenamen die zijn gedefinieerd in uw gekoppelde CSS-bestanden. Als je in het algemeen een Bootstrap, Foundation of gewoon een framefan bent, zal dit je veel tijd besparen!
Voor de vooraf gecompileerde CSS-fans maakt deze extensie intellisense mogelijk voor import, mixins, inclusief en functies in SCSS.
Als je PostCSS nog niet hebt gezien, mis je. Het is een geavanceerde en extreem vooruitstrevende reeks plug-ins voor CSS die CSS een stuk krachtiger maakt. Ik gebruik twee PostCSS-extensies: Syntaxis en sorteren; één maakt syntaxisondersteuning voor nieuwe CSS Level 4-modules zoals nesten en de andere stelt me in staat CSS-eigenschappen alfabetisch te sorteren.
Hoewel dit niet echt Intellisense alleen is, is dit een geweldige uitbreiding voor de ontwikkeling van Vue.js. Het is een alles-in-één oplossing voor het toevoegen van linting, intellisense en opmaak aan de ontwikkeling van Vue.js en bevat al enkele van de extensies die ik hierboven heb genoemd.
Dit is een volledige oplossing voor het ontwikkelen van React Native-toepassingen. Standaard heeft VSCode een heleboel ondersteuning ingebouwd voor React.
Je besteedt veel tijd aan je IDE, dus om ervoor te zorgen dat het gemakkelijk ogen en leesbaar zijn, is net zo belangrijk als elk ander aspect dat ik heb genoemd.
Zorg eerst voor een aantal map- / bestandsiconen, zodat u gemakkelijk de bestanden kunt onderscheiden die u gebruikt.
Cobalt 2 is niet te donker, niet te licht en heeft een groot contrast voor een editor-thema. Het heeft ook een overeenkomstige kleurinstelling voor ZSH-terminals.
Als je nog nooit van Dash hebt gehoord, zou het je nieuwe beste vriend moeten zijn. Dash is een API-documentatie-app voor Mac, maar deze extensie kan rechtstreeks in de VS-code worden gestoken. Door op een methode te klikken, wordt Dash geopend voor de betreffende pagina. Dezelfde plug-in ondersteunt Zeal, een alternatief voor Windows en Linux.
Zoals ik eerder al zei, is de Beautify-extensie een geweldig hulpmiddel als je vastberaden bent over code-opmaak en standaardisatie van de editor. Hiermee kunt u ook een instellen .jsbeautifyrc bestand dat u kunt toewijzen aan Git repos voor samenwerking. Beautify kan ook worden gebruikt als vervanging voor .editorconfig als je het niet steunt. Verfraaien formaten JS, CSS, Sass, JSON en HTML.
Meer en meer IDE's bieden ondersteuning voor EditorConfig, waarmee u een .editorconfig in uw project repos. Dit geeft uw mede-ontwikkelaars IDE's en linters om uit één bestand te lezen om tabbladen en spatiëring en regelafsluiting in projecten te standaardiseren.
Voor een robuustere oplossing, probeer Prettier uit. Prettier volgt hetzelfde configuratieparadigma als ESLint en biedt u een .prettierrc bestand dat moet worden vastgelegd in de repositories. Het zal ook lezen van de .editorconfig bestand als het bestaat. In feite kunt u ESLint en Sass Lint verwijderen en Prettier gebruiken als uw one-stop oplossing. Het heeft zijn eigen extensies voor EsLint, StyleLint en meer.
Ik ben onlangs overgestapt naar ZSH, wat mijn terminalervaring volledig heeft veranderd. Hoewel het geen directe uitbreiding van de VS-code is, kan het via het deelvenster Terminal worden geïntegreerd. Ik moest behoorlijk wat configuratie uitvoeren om het op Mac te laten werken, vooral met kleuren en thema's.
ZSH biedt functionaliteit zoals het aanvullen van tabbladen voor mappen, bestanden, Git-branches en meer. Je kunt meer lezen over het instellen van ZSH op de Github-repo of een bericht achterlaten in de reacties hieronder als je meer wilt weten.
Visual Studio Code wordt geleverd met JavaScript voor foutopsporing direct uit de verpakking. U kunt een stap verder gaan met behulp van de volgende extensies:
Deze extensie maakt een directe synchronisatie mogelijk tussen de VS-code-foutopsporing en Chrome-ontwikkelaarshulpprogramma's, zodat u onderbrekingspunten kunt instellen en rechtstreeks naar de code kunt gaan.
Dat over het omwikkelen van mijn extensies setup voor Visual Studio Code - welke zijn je persoonlijke favorieten? Maar voordat ik ga, vergeet niet dat coderen leuk moet zijn; je hebt misschien wat deuntjes nodig om je te helpen. De Spotify-extensie voegt een kleine inline mediaspeler toe aan de gebruikersinterface van de VS-code.
Accentsconagua