Beste kodeditor for Vue.js

Med et økende antall kvalitetskodeditorer å velge mellom, lurer du kanskje på hva som er den beste kodeditoren for Vue.js. Noen utviklere er like opptatt av redaktørene sine som for deres politiske overbevisning, så du får forskjellige svar avhengig av hvem du spør.

Men når det kommer til koding i Vue, er en av de beste menneskene å spørre Evan You, skaperen av Vue. Så hva bruker han? Visual Studio Code.

I et intervju ble han spurt om emnet, og han svarte:

... Jeg byttet frem og tilbake til jeg nylig begynte å bruke TypeScript, og fordi VS Code TypeScript er så bra, byttet jeg (permanent) til VS-kode.

Mens Vue ikke krever at du bruker TypeScript, vil kildekoden snart skrives i den, slik vi dekket i dette innlegget på Vue 3.0.

Du tenker kanskje ... Men jeg jobber ikke med kildekoden, og jeg koder ikke Vue med TypeScript, er VS-koden fortsatt relevant for meg?

Det bringer meg til emnet Vetur, som er en funksjonsrik utvidelse som gir deg ting som syntaks-utheving i .vue-filer, tekstutdrag, fôring, feilsjekk og formatering, i tillegg til automatisk fullføring og feilsøking. På dette tidspunktet er det den beste Vue-utvidelsen for en kodeditor. Og det burde det være, for det er utviklet av Pine Wu, som er medlem av Vue-kjerneteamet.

Så hvis du er interessert i å bruke VS-kode for Vue-utvikling (eller allerede er), kan du følge med nedenfor når jeg viser deg hvordan du kan optimalisere VS-koden.

Hva skal vi lære?

Vi skal lære hvordan:

  • Få syntaksutheving i .vue-filene våre
  • Bruk kodebiter for en raskere arbeidsflyt
  • Konfigurer redaktøren vår til å automatisk formatere koden vår
  • Og utforske andre nyttige utvidelser som vil forbedre utviklingsopplevelsen vår

Installere Vetur

Det er flere funksjoner som gjør VS Code til et flott miljø for Vue-utvikling, inkludert Vetur, en plugin designet av Pine Wu, et kjernemedlem i Vue.js-teamet.

Her i VS-kode, hvis vi åpner en .vue-fil, for eksempel denne About.vue-filen, ser vi all denne grå koden. Det er fordi VS-kode ikke automatisk vil utheve syntaksen i .vue-filer.

Vetur kan fikse dette for oss, og gi oss andre funksjoner designet for å forbedre utvikleropplevelsen.

La oss installere det nå. Åpne utvidelsesbutikken.

Søk deretter etter “Vetur”, velg det i søkeresultatene og klikk Installer. Klikk deretter Last inn på nytt.

Veturs funksjoner

Nå som Vetur er installert, la oss se på funksjonene.

Syntax Highlighting Ved å skrive kommando + P, og skrive inn navnet på en .vue-fil, kan vi åpne About.vue-filen. Som du ser, får koden vår riktig syntaksutheving. Fantastisk - ikke mer grå kode.

Ved å sjekke Home.vue-filen, kan vi se at JavaScript også blir uthevet riktig.

Utdrag En annen funksjon Vetur leveres pakket med kodebitene. Dette er tidsbesparende "kodebiter" med kode som lar deg raskt opprette ofte brukte biter med kode.

La oss lage en ny komponent for å se dette i aksjon. Vi skal kalle EventCard.vue. Hvis vi nå skriver ordet "stillas" i en .vue-fil og treffer ENTER, fyller denne filen automatisk med skjelettet, eller stillaset, til en enkelt fil .vue-komponent.

Emmet Vetur kommer også pakket med Emmet. Dette er et populært verktøy som lar deg bruke snarveier til å bygge ut koden din.

For eksempel kan vi skrive h1 og trykke enter, og dette vil skape et åpnings- og lukkingsh1-element.

Når vi skriver noe mer komplekst, for eksempel div> ul> li, vil det produsere:

        
                
  •              

Hvis det ikke ser ut til at Emmet fungerer for deg, kan du legge dette til i brukerinnstillingene dine:

"emmet.includeLanguages": {
          "vue": "html"
      }

Gå hit for å lære mer om hvordan Emmet kan få fart på utviklingen din.

Installere ESLint & Prettier

Nå må vi sørge for at vi har ESLint og Prettier installert. I utvidelsesbutikken skal vi søke etter ESLint og deretter fortsette og installere det. Og vi vil gjøre det samme for Prettier. Når den er installert, treffer vi på nytt for å laste inn VS-koden på nytt.

Konfigurere ESLint

Nå som disse er installert, må vi legge til litt ekstra konfigurasjon til dem.

Da vi opprettet vårt prosjekt fra terminalen, valgte vi å lage det med dedikerte konfigurasjonsfiler, som ga oss denne .eslintrc.js-filen, hvor vi kan konfigurere ESLint for dette prosjektet. Hadde vi ikke valgt dedikerte filer, ville vi funnet ESLint-konfigurasjonene i vår pakke.json.

Så i .eslintrc.js-filen vår legger vi til:

'Plugin: penere / anbefales'

Dette vil aktivere Prettier-støtte i ESLint med standardinnstillingene.

Nå ser filen vår slik ut:

module.exports = {
      rot: sant,
      env: {
        node: sant
      }
      'strekker': [
        'Plugin: vue / viktig',
        'plugin: penere / anbefalt', // vi la til denne linjen
        '@ Vue / penere'
      ]
      regler: {
        'no-console': prosess.env.NODE_ENV === 'produksjon'? 'feil': 'av',
        'no-debugger': prosess.env.NODE_ENV === 'produksjon'? 'feil': 'av'
      }
      parserOptions: {
        parser: 'babel-eslint'
      }
    }

Konfigurere penere

Vi har også muligheten til å lage en penere konfigurasjonsfil, legge til noen spesielle innstillinger i henhold til vår personlige stil eller teamets preferanser.

Vi oppretter den her og navngir den .prettierrc.js.

Og inne, skriver vi:

module.exports = {
        singleQuote: true,
        semi: falsk
    }

Dette vil konvertere doble sitater til enkelt sitater, og sørge for at semikolon ikke blir satt inn automatisk.

Brukerinstillinger

For å optimalisere VS-koden ytterligere for en god utviklingsopplevelse, legger vi til noen konfigurasjoner i brukerinnstillingene våre. For å få tilgang til brukerinnstillinger, klikk på Kode i den øverste navigasjonslinjen, deretter Innstillinger, og deretter Innstillinger. Dette vil åpne et User Settings-vindu der du kan legge til innstillinger i json.

Først vil vi legge til:

"vetur.validation.template": falsk

Dette vil slå av Veturs fôringsfunksjon. Vi stoler på ESLint + Prettier.

Nå vil vi fortelle ESLint hvilke språk vi vil at den skal validere (vue, html og javascript) og sette autoFix til true på hver:

"eslint.validate": [
        {
            "språk": "vue",
            "autoFix": true
        }
        {
            "språk": "html",
            "autoFix": true
        }
        {
            "språk": "javascript",
            "autoFix": true
        }
    ]

Så for godt mål, vil vi fortelle ESLint til autoFixOnSave.

"eslint.autoFixOnSave": sant,

Og fortell redaktøren vår om å formatere OnSave.

"editor.formatOnSave": sant,

Tester det ut

For å teste at dette fungerer, legger vi til en dataegenskap til EventCard-komponenten vår her, og legger til et tilbud: "Jeg vil være singel", så kaster vi inn en semikolon her også. Når vi trykker på lagre, blir sitatene våre konvertert til enkeltnoteringer og semikolonet blir fjernet. Fantastisk - det fungerer.

Ytterligere verktøy

La oss nå se på noen ekstra verktøy som kan bidra til å øke hastigheten på utviklingen.

Copy Relative Path Copy Relative Path er en utvidelse som lar deg kopiere stedet en fil lever, basert på forholdet til katalogen den lenker til.

La oss søke etter det, installere det og se det i aksjon.

I Home.vue-filen ser vi at det er en relativ bane her allerede, der vi importerer HelloWorld-komponenten.

For å få den relative banen til en fil vi vil importere, høyreklikk vi på filen og velg deretter Kopier relativ sti. Når vi limer inn det som ble kopiert, ser vi at vi har den nøyaktige relative banen. Legg merke til denne src. Kommentaren her gir oss beskjed om at på grunn av måten prosjektet vårt er satt opp på, kan vi bruke @ i stedet.

Integrert terminal En praktisk innebygd funksjon i VS Code Editor er den integrerte terminalen, som du kan bruke i stedet for å bytte til din separate terminal. Du kan åpne den med tastatursnarveien: `ctrl +` `

Flere utdrag Hvis du er interessert i å installere noen ekstra praktiske kodebiter, kan du laste ned en komplett pakke med Vue VSCode-utdrag, opprettet av Core Vue-teammedlem Sarah Drasner.

La oss søke etter utvidelsen med navnet hennes, sarah.drasner. Der er de. Nå kan vi installere og laste inn på nytt.

La oss se på dem i aksjon.

Hvis vi skriver vif på et element i malen vår, vil det gi oss en v-if-uttalelse, og å skrive von vil gi oss en fullstendig hendelsesbehandler. I stedet for å manuelt skrive ut en dataegenskap, kan vi ganske enkelt skrive vdata som vil lage en for oss. Vi kan gjøre det samme for å legge rekvisitter med vprops. Vi kan til og med bruke den til å lage koden for raskt å importere en bibliotek, med vimport-lib. Som du kan se, dette er veldig nyttige og tidsbesparende utdrag.

Vær oppmerksom på at hvis du bruker denne utvidelsen av Snippets, anbefales det å legge en linje til brukerinnstillingene dine:

vetur.completion.useScaffoldSnippets skal være usanne

Dette vil sørge for at disse tekstutdragene ikke er i konflikt med Veturs.

Fargetemaer Til slutt, hvis du lurer på hvordan du endrer temaet ditt i VS-kode, eller hvis du lurer på hvilken jeg bruker her, kan du gå til Kode> Innstillinger> Fargetema.

Som du ser bruker jeg FlatUI Dark. Du kan endre temafarge til et av disse alternativene her, eller du kan søke etter andre temaer i utvidelsesbutikken.

Hvis du ikke ser en du ønsker, kan du også gå til Visual Studio Marketplace online. Her kan du forhåndsvise mange forskjellige plugins og temaer, for eksempel Night Owl av vår venn Sarah Drasner. Du kan installere det direkte fra nettleseren og deretter finne det i innstillingene for fargetema.

Fortsett å lære

For å fortsette å lære med meg, kan du ta hele Real World Vue-kurset, over på VueMaster.com.