Share
Visual Studio Code är en av de nyaste barnen på IDE "block" och det gör mycket ljud. Det tar lite tid att få traktion, kanske för att det är en av Microsofts få open source-produkter, men det har tagits i open source-samhället med stormen. Utvecklare som en gång svorit sin tro på Sublime Text 3 och Atom blir långsamt omvandlade av VS-kodens kraft och enkelhet, för att inte tala om dess otroliga bibliotek med tillägg.
Jag började mitt eget kodande liv på Sublime Text 3, flyttade till Atom, sedan PHPStorm, sedan efter min prenumeration utgått med JetBrains trodde jag att jag skulle ge VS-koden ett försök. Det fortsätter att göra mitt liv enklare och gör mig till en bättre utvecklare.
Den här introduktionen tar dig från noll till hjälte, får dig igång med VS-kod, med inriktning på mina favorittilläggsutvecklingar, så att alla aspekter av ditt arbetsflöde är täckta.
Jag antar några punkter för den här artikeln:
Första sakerna först, om du inte redan har VS-kod installerad, gå över till Visual Studio Code hemsida. VS-koden är plattformen, så våra konfigurationer kommer att fungera på Windows, Mac och Linux.
VS-koden är också tillgänglig som ett Homebrew Cask-paket på Mac: Brew Cask Install Visual-Studio-kod
Ett steg som jag hittar många tutorials lämnar ofta är möjligheten att utföra VS-kod från terminalen. Det finns några sätt att göra detta. Om du redan har en .bash_profile-inställning kan du lägga till följande:
exportera PATH = "$ PATH: / Program / Visual Studio Code.app/Contents/Resources/app/bin"
Eller, för ett mer plattforms-tillvägagångssätt, tryck på kommandopaletten: Skift + Kommando + P och skriv ordet skal - Detta ger dig ett alternativ som heter: Installera kodkommandot i PATH - Slå in och du är klar. Nu kan du starta filer och mappar var som helst från terminalen genom att skriva: kodväg / till / fil / eller / dir
Lint din kod - det är det bästa sättet att stoppa fel innan de ger dig någon otillbörlig stress!
Om du kör den senaste versionen av ECMA Script, är ESLint för dig. Denna förlängning integrerar ESLint-mönsterigenkännaren rakt in i VS-koden och hjälper dig med vanliga misstag som utvecklare gör med den nya syntaxen. Det kräver att du har NPM ESLint-paketet installerat antingen lokalt i ditt projekt eller globalt.
För dig som gillar att skriva mer programmatisk Sass, ger Sass Lint dig en användarvänlig uppsättning konfigurationer för att skriva Sass-kompatibla standarder.
JS Hint är en annan bra JavaScript Linter som hjälper dig med logik, syntax och mer, beroende på din konfiguration.
Om du är en typScript-fläkt är TSLint-förlängningen din bästa vän. Med TypeScript som ett förkompilerat språk har du fullständig kontroll över vad kompilatorns linjer för dig och autoformateringsalternativen.
Dessa tillägg alla erbjuder Git-vänliga sätt att hantera anpassade / gemensamma konfigurationer mellan utvecklare på ditt team, nämligen i .eslintrc och .sass-lint.yml eller .jshintrc
Jag har avsiktligt lämnat våra HTML-linjer här. Medan jag använder en förlängning som Försköna för att formatera och tabba min HTML enligt en .editorconfig Jag tycker att HTML Linters fungerar ganska dåligt. De anser inte semantik och tenderar att göra ett dåligt jobb för att hjälpa dig med tillgänglighetsproblem. Eftersom innebörden av HTML kan vara relativt tvetydig är det bättre att använda en uppsättning verktyg som gör mindre jobb.
För att utöka HTML-funktionen i VS-kod använder jag följande:
Det kan använda lite förbättring, men jag gillade alltid Sublime Text 3s automatiska stängningsfunktion. Ovan nämnda förlängning hjälper dig med detta i VS-koden.
Det här är en annan användbar HTML-tillägg som gör det möjligt för användare att klicka inuti ett HTML-element och byta namn på det samtidigt som namnet stängs av.
Jag flyttade från Grunt förrän någon gång sedan, men tillfälligt verkar det inte finnas några Grunt-förlängningar på marknaden, åtminstone inte tillräckligt med dragkraft för att få mycket effekt. Förlängningarna nedan är huvudsakligen inriktade på Gulp och Webpack eftersom de verkar leda tävlingen i uppgiftshanteringsvärlden just nu.
Denna förlängning låter dig använda kommandopaletten i VS-kod för att enkelt injicera användbara Gulp-konfigurationer i din Gulpfile.js; ett måste om du fortfarande är lite skakig om att skapa Gulp.
Att ställa in Webpack kan vara en av de skrämmaste uppgifter som en utvecklare måste åta sig. Webpack-förlängningen för VS-kod tar rädslan av det genom att ge dig en minimal webpack.config.js för att starta ditt projekt. Om du är en framstegsman, och du inte gillar att vara kvar i mörkret medan din terminal tänker på saker, är Webpack Progress-tillägget för dig. Det ger en bra framstegsbar för när Webpack gör sin sak.
En av de kraftfullaste tilläggen för versionskontroll i VS-koden är:
För nybörjare och avancerade användare är Git Lens powerhouse. Det gör ett enkelt jobb att göra Git och dess många komplexa mer hanterbara och visuella. Jag har haft det så mycket att det förutom att använda terminalen för att lägga till, begå, gräva och trycka, jag har fullständigt skrotat Git GUI.
Nästan varje inställning är anpassningsbar. Git Lens ger realtids återkoppling av Git-data medan du kodar. Vill du veta vem skrev den funktionen som inte fungerar? Vill du se hur mycket koden har förändrats under de senaste åren? Inte säker på hur man hanterar en sammanslagningskonflikt i en fil som du aldrig skrev eller har lite kontext av? Git Lens hanterar allt för dig.
Var som andra IDE har fulla stöd för majoriteten av språk, lämnar VS Code det till största delen. När du behöver det, kan du lägga till språkstöd för vilken teknik du hanterar, utan HTML-kod och CSS, såväl som JavaScript, men om du behöver Python är det bara ett klick bort. I mitt arbetsflöde använder jag Python så ofta, men Node var en stor sak för mig.
Intellisense tar i huvudsak hand om kompletteringar. Du kan till exempel slå flik eller svänga över en filväg, och VS Code kommer att göra det hårda arbetet för dig.
Om du är en av de personer som älskar att använda ny teknik i ditt arbetsflöde och du är galen på den nya upplagan av JavaScript, så är Babel ES6 / ES7-linter för dig.
Detta är en lysande förlängning som autofyller / föreslår filvägar medan du skriver. Om du kommer från en PHPStorm-bakgrund, känner du känslan!
En bra förlängning när du använder fordra() eller importera i Node.js, kompletterar denna filtillägg filvägar till Node Modules.
Detta är en mycket användbar tillägg för automatisk slutförande av CSS-klassnamn som definieras i dina länkade CSS-filer. Om du är en Bootstrap, Foundation eller bara en ramfläkt i allmänhet, så sparar du mycket tid!
För de förkompilerade CSS-fläktarna möjliggör denna förlängning intellisens för import, mixins, inkluderar och funktioner i SCSS.
Om du än har kommit över PostCSS så saknar du dig. Det är en avancerad och extremt framåtriktad uppsättning plugins för CSS som gör CSS mycket kraftfullare. Jag använder två PostCSS-tillägg: Syntax och sortering; en möjliggör syntaxstöd för nya CSS-nivå 4-moduler som nestning och den andra låter mig sortera CSS-egenskaper alfabetiskt.
Det är inte enbart Intellisense ensam det här är en bra förlängning för Vue.js-utveckling. Det är en allt-i-ett-lösning för att lägga till linting, intellisense och formatering till Vue.js utveckling och innehåller redan några av de tillägg som jag har nämnt ovan.
Detta är en komplett lösning för att utveckla React native applikationer. Som standard har VSCode ett ton stöd som är inbyggt för React.
Du spenderar mycket tid framför din IDE, så se till att det är lätt i ögonen och läsbart är lika viktigt som någon annan aspekt jag har nämnt.
Först få några mapp / filikoner så att du enkelt kan skilja de filer du använder.
Kobolt 2 är inte för mörk, inte för ljus och har stor kontrast för ett redigerat tema. Det har också en motsvarande färginställning för ZSH-terminaler.
Om du inte hört talas om Dash ska det vara din nya bästa vän. Dash är en API dokumentationsapp för Mac, men den här förlängningen pluggar direkt in i VS-koden. Genom att klicka på någon metod öppnas det Dash på respektive sida. Samma plugin stöder Zeal vilket är ett Windows och Linux alternativ.
Som jag nämnde tidigare är Verautify-tillägget ett utmärkt verktyg om du är orolig för kodformatering och standardisering av redaktörer. Det låter dig också ställa in en .jsbeautifyrc fil som du kan begå till Git repos för samarbete. Försköna kan också användas som ersättning för .editorconfig om du inte stöder det. Förnya format JS, CSS, Sass, JSON och HTML.
Fler och fler IDE ger stöd för EditorConfig, som låter dig inkludera en .editorconfig i ditt projektrepos. Detta ger dina samarbetsutvecklare IDEs och linters att läsa från en fil för att standardisera tabbing och avstånd samt linje som slutar över projekt.
För en mer robust lösning, prova Prettier. Prettier följer samma konfigurationsparadigm som ESLint, vilket ger dig en .prettierrc fil som en åtagit sig för repositories. Det kommer också att läsas från .editorconfig filen om den finns. Faktum är att du kan bli av med ESLint och Sass Lint och använda Prettier som din enda stopplösning. Den har egna förlängningar för EsLint, StyleLint och mer.
Jag flyttade nyligen till ZSH som helt har förvandlat min terminal erfarenhet. Även om det inte är en direkt förlängning av VS-koden, kan den integreras genom Terminal-rutan. Jag var tvungen att göra en hel del konfiguration för att få det att fungera på Mac, särskilt med färger och teman.
ZSH har funktioner som flikavslutning för kataloger, filer, Git-grenar och mer. Du kan läsa mer om att ställa in ZSH på Github repo eller lämna mig ett meddelande i kommentarerna nedan om du vill lära dig mer.
Visual Studio Code levereras med Debugging JavaScript direkt ur lådan. Du kan ta det ett steg längre med följande tillägg:
Denna förlängning möjliggör en direkt synkronisering mellan VS Code Debugger och Chrome Developer Tools så att du kan ställa in brytpunkter och hoppa rakt in i koden.
Det handlar om att bryta upp mina tilläggsinstallationer för Visual Studio Code-vilka är dina personliga favoriter? Innan jag går men glöm inte att kodningen ska vara kul; Du kan behöva vissa låtar för att hjälpa dig med. Spotify-tillägget lägger till en liten inline-mediaspelare till VS-kodbruket.
Accentsconagua