Share
Visual Studio Code er en av de nyeste barna på IDE "block", og det gjør mye støy. Det tar litt tid å få trekkraft, kanskje fordi det er en av Microsofts få open source-produkter, men det er tatt åpen kildekode samfunnet med storm. Utviklere som en gang sverget sin troskap til Sublime Text 3 og Atom, blir langsomt konvertert av kraften og enkelheten til VS Code-for ikke å nevne det utrolige biblioteket med utvidelser.
Jeg begynte mitt eget kodende liv på Sublime Text 3, flyttet til Atom, deretter PHPStorm, og etter at abonnementet mitt utløp med JetBrains trodde jeg at jeg ville gi VS-koden en prøve. Det fortsetter å gjøre livet mitt enklere, og dermed gjør jeg meg til en bedre utvikler.
Denne introduksjonen tar deg fra null til helt, får deg til å løpe med VS Code, og fokuserer spesielt på mine favorittforlengelsesutvidelser, og sørger for at alle aspekter av arbeidsflyten din er dekket.
Jeg kommer til å anta noen poeng for denne artikkelen:
Første ting først, hvis du ikke allerede har VS-kode installert, gå over til Visual Studio Codes nettsted. VS-koden er kryssplattform, slik at våre konfigurasjoner vil fungere på Windows, Mac og Linux.
VS Code er også tilgjengelig som en Homebrew Cask pakke på Mac: bryg cask installere visuell studio kode
Et skritt som jeg finner mange opplæringsprogrammer, ofte forlater, er evnen til å utføre VS-kode fra terminalen. Det er noen måter å gjøre dette på. Hvis du allerede har et .bash_profile-oppsett, kan du legge til dette:
eksporter PATH = "$ PATH: / Programmer / Visual Studio Code.app/Contents/Resources/app/bin"
Eller, for en mer plattformstilnærming, trykk kommandopaletten snarvei: Skift + Kommando + P og skriv ordet shell - Dette vil gi deg et alternativ som heter: Installer kodekommando i PATH - Slå inn og du er ferdig. Nå kan du starte filer og mapper hvor som helst fra terminalen ved å skrive: kodebane / til / fil / eller / dir
Lint koden din - det er den beste måten å stoppe feil før de forårsaker ubehagelig stress!
Hvis du kjører den nyeste versjonen av ECMA Script, så er ESLint for deg. Denne utvidelsen integrerer ESLint-mønstergjenkjenningen rett inn i VS-koden og hjelper deg med vanlige feil som utviklere gjør med den nye syntaksen. Det krever at du har NPM ESLint-pakken installert enten lokalt i prosjektet eller globalt.
For de som liker å skrive mer programmatisk Sass, gir Sass Lint deg et brukervennlig sett med konfigurasjoner for å skrive standard-kompatibel Sass.
JS Hint er en annen flott JavaScript Linter som hjelper deg med logikk, syntaks og mer, avhengig av konfigurasjonen.
Hvis du er en TypeScript-fan, er TSLint-utvidelsen din beste venn. Med TypeScript som et forkompilert språk, har du full kontroll over hva kompilatoren linjer for deg, så vel som automatisk formateringsalternativer.
Disse utvidelsene alle tilbyr Git-vennlige måter å administrere egendefinerte / felles konfigurasjoner mellom utviklere på teamet ditt, nemlig i .eslintrc og .sass-lint.yml eller .jshintrc
Jeg har med hensikt forlatt HTML-linjene våre her. Mens jeg skal bruke en utvidelse som Beautify for formatering og tabbing av HTML i henhold til en .editorconfig Jeg finner at HTML Linters utfører ganske dårlig. De anser ikke semantikk og har en tendens til å gjøre en dårlig jobb med å hjelpe deg med tilgjengelighetshensyn. Som meningen med HTML kan være relativt tvetydig, er det bedre å bruke et sett med verktøy som gjør mindre jobber.
For å utvide HTML-funksjonaliteten i VS-kode, bruker jeg følgende:
Det kan bruke litt forbedring, men jeg likte alltid Sublime Text 3s automatisk lukkede tag-funksjonalitet. Ovennevnte utvidelse vil hjelpe deg med dette i VS-koden.
Dette er en annen nyttig HTML-utvidelse som tillater brukere å klikke inne i et HTML-element og omdøpe det, samtidig som navn på sluttkoden blir endret.
Jeg flyttet vekk fra Grunt en gang siden, men tilfeldigvis synes det ikke å være noen Grunt-utvidelser på markedet, i hvert fall ikke med nok trekkraft for å gjøre mye av en innvirkning. Utvidelsene nedenfor er hovedsakelig fokusert på Gulp og Webpack, ettersom de synes å være ledende i løpet av oppgavehåndteringsverdenen akkurat nå.
Denne utvidelsen lar deg bruke kommandopaletten i VS-kode for enkelt å injisere nyttige Gulp-konfigurasjoner i Gulpfile.js; en må ha hvis du fortsatt er litt rystet om å sette opp Gulp.
Oppsett av Webpack kan være en av de skummelste oppgavene en utvikler har å forplikte seg til. Webpack-utvidelsen for VS-kode tar frykten ut av det ved å gi deg en minimal webpack.config.js for å starte prosjektet. Hvis du er en fremdriftsperson, og du ikke liker å være igjen i mørket mens Terminal tenker på ting, så er Webpack Progress-utvidelsen for deg. Det gir en fin fremdriftslinje for når Webpack gjør ting.
En av de kraftigste utvidelsene for versjonskontroll i VS-koden er:
For nybegynnere og avanserte brukere er Git Lens kraftverk. Det gjør en enkel jobb å gjøre Git og dets mange intrikatier mer håndterbare og visuelle. Jeg har hatt glede av å bruke det så mye at annet enn å bruke Terminal for å legge til, begå, grense og presse, har jeg fullstendig slettet Git GUI.
Nesten alle innstillinger er tilpassbare. Git Lens gir sanntids tilbakemelding av Git data mens du er koding. Vil du vite hvem skrev den funksjonen som ikke fungerer? Vil du se hvor mye koden har endret seg i løpet av de siste parene? Ikke sikker på hvordan du skal håndtere en flette konflikt i en fil du aldri skrev, eller har liten sammenheng med? Git Lens håndterer alt dette for deg.
Hvor som andre IDEer har full støtte for de fleste språk, forlater VS-koden det til deg for det meste. Når og når du trenger det, kan du legge til språkstøtte for hvilken teknologi du har å håndtere, utenom boksen HTML og CSS, samt JavaScript er gitt, men hvis du har behov for Python, er det bare et klikk borte. I arbeidsflyten bruker jeg Python så ofte, men Node var en stor ting for meg.
Intellisense tar i det hele tatt seg av fullføringer. Du kan slå tabulator eller svever over en filbane, for eksempel, og VS Code vil gjøre det harde arbeidet for deg.
Hvis du er en av de menneskene som elsker å bruke ny teknologi i arbeidsflyten din, og du er gal på den nye utgaven av JavaScript, så er Babel ES6 / ES7 linter for deg.
Dette er en strålende utvidelse som autocompletes / foreslår filbaner mens du skriver. Hvis du kommer fra en PHPStorm-bakgrunn, vil du kjenne følelsen!
En flott forlengelse når du bruker kreve () eller importere i Node.js, utfyller denne utvidelsen filbaner til Node Modules.
Dette er en veldig nyttig utvidelse for automatisk fullføring av CSS-klassenavn som er definert i dine koblede CSS-filer. Hvis du er en Bootstrap, Foundation eller bare en ramme fan generelt, vil dette spare deg mye tid!
For de forkompilerte CSS-fansen, gjør denne utvidelsen intellisense mulig for import, mixins, inkluderer og funksjoner i SCSS.
Hvis du ennå ikke har kommet over PostCSS så mister du ut. Det er et avansert og ekstremt tenkende sett med plugins for CSS som gjør CSS mye kraftigere. Jeg bruker to PostCSS-utvidelser: Syntaks og sortering; en gjør det mulig å syntax støtte for nye CSS nivå 4 moduler som nesting og den andre lar meg sortere CSS egenskaper alfabetisk.
Selv om det egentlig ikke er Intellisense alene, er dette en flott utvidelse for Vue.js utvikling. Det er en alt-i-ett-løsning for å legge til linting, intellisense og formatering til Vue.js-utvikling og inneholder allerede noen av utvidelsene jeg har nevnt ovenfor.
Dette er en fullstendig løsning for å utvikle React native applikasjoner. Som standard har VSCode massevis av støtte innebygd for React.
Du bruker mye tid foran din IDE, så sørg for at det er lett på øynene og leselig er like viktig som et annet aspekt jeg har nevnt.
Først får du noen mappe / filikoner, slik at du enkelt kan skille mellom filene du bruker.
Kobolt 2 er ikke for mørkt, ikke for lys, og har stor kontrast for et redigerings tema. Det har også et tilsvarende fargevalg for ZSH Terminals.
Hvis du ikke har hørt om Dash, bør det være din nye beste venn. Dash er en API-dokumentasjonsapp for Mac, men denne utvidelsen kobles rett inn i VS-koden. Ved å klikke på en hvilken som helst metode, åpner den Dash på den respektive siden. Det samme plugin støtter Zeal som er et Windows og Linux alternativ.
Som jeg nevnte tidligere, er Forstørrelsesutvidelsen et flott verktøy hvis du holder fast på kodformatering og standardisering av editor. Det lar deg også sette en .jsbeautifyrc fil som du kan forplikte seg til å Git repos for samarbeid. Beautify kan også brukes som erstatning for .editorconfig hvis du ikke støtter det. Beautify formater JS, CSS, Sass, JSON og HTML.
Flere og flere IDEer gir støtte til EditorConfig, som lar deg inkludere en .editorconfig i prosjektreposisjonen din. Dette gir medarbeiderne dine IDEer og linjer for å lese fra en fil for å standardisere tabbing og avstand, samt linje som slutter på tvers av prosjekter.
For en mer robust løsning, prøv Prettier. Prettier følger det samme konfigurasjonsparadigmet som ESLint, og gir deg en .prettierrc fil som en forplikter seg til repositories. Det vil også lese fra .editorconfig filen hvis den eksisterer. Faktisk kan du kvitte deg med ESLint og Sass Lint og bruke Prettier som engangsoppløsning. Den har egne utvidelser for EsLint, StyleLint og mer.
Jeg har nylig flyttet til ZSH, som helt har forvandlet min terminalopplevelse. Selv om det ikke er en direkte forlengelse av VS-kode, kan den integreres gjennom Terminal-ruten. Jeg måtte gjøre litt konfigurasjon for å få det til å fungere på Mac, spesielt med farger og temaer.
ZSH har funksjonalitet som faneavslutning for kataloger, filer, Git-grener og mer. Du kan lese mer om å sette opp ZSH på Github repo eller gi meg en beskjed i kommentarene nedenfor hvis du vil lære mer.
Visual Studio Code leveres med Debugging JavaScript rett ut av boksen. Du kan ta det et skritt videre ved å bruke følgende utvidelser:
Denne utvidelsen tillater direkte synkronisering mellom VS Code Debugger og Chrome Developer Tools, slik at du kan sette brytpunkter og hoppe rett inn i koden.
Det handler om å pakke opp utvidelsene mine for Visual Studio Code-hvilke er dine personlige favoritter? Før jeg går om, ikke glem at kodingen skal være morsomt; Det kan hende du trenger noen melodier å hjelpe deg med. Spotify-utvidelsen legger til en liten inline mediespiller til VS Code UI.
Accentsconagua