Bedste kodeeditor for Vue.js

Med et voksende antal kvalitetskodeditorer at vælge imellem, undrer du dig måske over, hvad der er den bedste kodeditor for Vue.js. Nogle udviklere er lige så engagerede i deres redaktører, som de er til deres politiske overbevisning, så du får forskellige svar, afhængigt af hvem du spørger.

Men når det kommer til kodning i Vue, er en af ​​de bedste mennesker at spørge Evan You, skaberen af ​​Vue. Så hvad bruger han? Visual Studio-kode.

I et interview blev han spurgt om emnet, og han svarede:

… Jeg skiftede frem og tilbage, indtil for nylig begyndte jeg at bruge TypeScript, og fordi VS-kode TypeScript er så god, skiftede jeg (permanent) til VS-kode.

Mens Vue ikke kræver, at du bruger TypeScript, skrives dens kildekode snart i det, som vi dækkede i dette indlæg på Vue 3.0.

Du tænker måske ... Men jeg arbejder ikke på kildekoden, og jeg koder ikke Vue med TypeScript, er VS-kode stadig relevant for mig?

Det bringer mig til emnet Vetur, som er en funktionsrig udvidelse, der giver dig ting som syntaks-fremhævning i .vue-filer, kodestykker, fnugning, fejlkontrol og formatering samt auto-færdiggørelse og fejlfinding. På dette tidspunkt er det den bedste Vue-udvidelse til en kodeditor. Og det burde det være, fordi det er udviklet af Pine Wu, der er medlem af Vue-kerneteamet.

Så hvis du er interesseret i at bruge VS-kode til udvikling af Vue (eller allerede er), kan du følge med nedenfor, mens jeg viser dig, hvordan du optimerer VS-koden.

Hvad skal vi lære?

Vi lærer at:

  • Få syntaksbelysning i vores .vue-filer
  • Brug kodestykker til en hurtigere arbejdsgang
  • Konfigurer vores editor til automatisk at formatere vores kode
  • Og udforsk andre nyttige udvidelser, der forbedrer vores udviklingsoplevelse

Installation af Vetur

Der er flere funktioner, der gør VS-kode til et fantastisk miljø til Vue-udvikling, herunder Vetur, et plugin designet af Pine Wu, et kernemedlem i Vue.js-teamet.

Her i VS-kode, hvis vi åbner en .vue-fil, såsom denne About.vue-fil, ser vi alle denne grå kode. Det skyldes, at VS-kode ikke automatisk fremhæver syntaks i .vue-filer.

Vetur kan løse dette for os og give os andre funktioner designet til at forbedre udvikleroplevelsen.

Så lad os installere det nu. Åbn udvidelsesbutikken.

Søg derefter efter “Vetur”, vælg det i søgeresultaterne, og klik på Installer. Klik derefter på Genindlæs igen.

Veturs funktioner

Nu hvor Vetur er installeret, lad os se på dens funktioner.

Syntaksbelysning Ved at skrive kommando + P og skrive navnet på en .vue-fil, kan vi åbne filen About.vue. Som du kan se, får vores kode nu en korrekt syntaksbelysning. Awesome - ikke mere grå kode.

Når du kontrollerer filen Home.vue, kan vi se, at vores JavaScript også fremhæves korrekt.

Uddrag En anden funktion Vetur leveres pakket med hans kodestykker. Dette er tidsbesparende "kodestykker" af kode, der giver dig mulighed for hurtigt at oprette ofte anvendte stykker af kode.

Lad os oprette en ny komponent for at se dette i handling. Vi hedder EventCard.vue. Hvis vi nu skriver ordet "stillads" i en .vue-fil og rammer ENTER, vil dette automatisk udfylde denne fil med skelet eller stillads af en enkelt fil .vue-komponent.

Emmet Vetur leveres også pakket med Emmet. Dette er et populært værktøj, der giver dig mulighed for at bruge genveje til at opbygge din kode.

For eksempel kan vi skrive h1 og trykke på enter, og dette vil skabe et åbnings- og lukkeh1-element.

Når vi skriver noget mere komplekst, såsom div> ul> li, producerer det:

        
                
  •              

Hvis det ikke ser ud til, at Emmet fungerer for dig, kan du tilføje dette til dine brugerindstillinger:

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

Gå hertil for at lære mere om, hvordan Emmet kan fremskynde din udvikling.

Installation af ESLint & Prettier

Nu skal vi sikre os, at vi har ESLint og Prettier installeret. I extensionsbutikken skal vi søge efter ESLint og derefter gå videre og installere det. Og vi gør det samme for Prettier. Når den er installeret, rammer vi reload for at genindlæse VS-kode.

Konfiguration af ESLint

Nu når disse er installeret, er vi nødt til at tilføje en smule ekstra konfiguration til dem.

Da vi oprettede vores projekt fra terminalen, valgte vi at oprette det med dedikerede konfigurationsfiler, som gav os denne .eslintrc.js-fil, hvor vi kan konfigurere ESLint til dette projekt. Havde vi ikke valgt dedikerede filer, ville vi finde ESLint-konfigurationer i vores package.json.

Så i vores .eslintrc.js-fil tilføjer vi:

'Plugin: pænere / anbefalede'

Dette aktiverer Prettier support i ESLint med standardindstillingerne.

Så vores fil ser nu sådan ud:

module.exports = {
      rod: sandt,
      env: {
        node: sandt
      },
      'strækker sig': [
        'Plugin: vue / afgørende',
        'plugin: pænere / anbefalet', // vi tilføjede denne linje
        '@ Vue / kønnere'
      ],
      regler: {
        'no-console': process.env.NODE_ENV === 'produktion'? 'error': 'off',
        'no-debugger': process.env.NODE_ENV === 'produktion'? 'error': 'off'
      },
      parserOptions: {
        parser: 'babel-eslint'
      }
    }

Konfiguration af smukkere

Vi har også muligheden for at oprette en Prettier-konfigurationsfil, tilføje nogle specielle indstillinger i henhold til vores personlige stil eller vores teams præferencer.

Vi opretter det her og navngiver det .prettierrc.js.

Og indeni skriver vi:

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

Dette konverterer dobbelt citater til enkelt citater, og sørg for, at semikolon ikke automatisk indsættes.

Brugerindstillinger

For yderligere at optimere VS-koden til en god udviklingsoplevelse, tilføjer vi nogle konfigurationer til vores brugerindstillinger. For at få adgang til Brugerindstillinger skal du klikke på Kode i øverste navigationslinje, derefter Præferencer og derefter Indstillinger. Dette åbner et vindue med Brugerindstillinger, hvor du kan tilføje indstillinger i json.

Først vil vi tilføje:

"vetur.validation.template": falsk

Dette vil deaktivere Veturs fnugfunktion. Vi stoler i stedet på ESLint + Prettier.

Nu vil vi fortælle ESLint, hvilke sprog vi ønsker, at den skal validere (vue, html og javascript) og indstille autoFix til true på hver:

"eslint.validate": [
        {
            "sprog": "vue",
            "autoFix": sandt
        },
        {
            "sprog": "html",
            "autoFix": sandt
        },
        {
            "sprog": "javascript",
            "autoFix": sandt
        }
    ],

Så med god målsætning fortæller vi ESLint at autoFixOnSave.

"eslint.autoFixOnSave": sandt,

Og fortæl vores editor selv om at formatere OnSave.

"editor.formatOnSave": sandt,

Test det ud

For at teste, at dette fungerer, tilføjer vi en dataejendom til vores EventCard-komponent her og tilføjer et tilbud: "Jeg vil være single", så smider vi også en semikolon her. Når vi rammer Gem, konverteres vores citater til enkelt citater, og semikolonet fjernes. Fantastisk - det fungerer.

Yderligere værktøjer

Lad os nu se på nogle ekstra værktøjer, der kan hjælpe med at fremskynde din udvikling.

Copy Relative Path Copy Relative Path er en udvidelse, der giver dig mulighed for at kopiere den placering, som en fil lever, baseret på dens forhold til det bibliotek, den linkes til.

Lad os søge efter det, installere det, og se det derefter i handling.

I vores Home.vue-fil ser vi, at der allerede er en relativ sti her, hvor vi importerer HelloWorld-komponenten.

For at få den relative sti for en fil, vi vil importere, skal vi højreklikke på filen og derefter vælge Copy Relative Path. Når vi nu indsætter det, der blev kopieret, ser vi, at vi har den nøjagtige relative sti. Bemærk dette src. Kommentaren her fortæller os, at på grund af den måde, vores projekt er oprettet, kan vi bruge @ i stedet.

Integreret terminal En praktisk indbygget funktion i VS Code Editor er dens integrerede terminal, som du kan bruge i stedet for at skifte til din separate terminal. Du kan åbne det med tastaturgenvejen: `ctrl +` `

Flere uddrag Hvis du er interesseret i at installere nogle ekstra praktiske kodestykker, kan du downloade en komplet pakke Vue VSCode-uddrag, oprettet af Core Vue-teammedlem Sarah Drasner.

Lad os søge efter udvidelsen med hendes navn, sarah.drasner. Der er de. Nu kan vi installere og genindlæse.

Lad os se på dem i handling.

Hvis vi skriver vif på et element i vores skabelon, giver det os en v-if-erklæring, og at skrive von giver os en fuld begivenhedshåndterer. I stedet for manuelt at udtaste en dataegenskab, kan vi blot indtaste vdata, som vil skabe en for os. Vi kan gøre den samme ting for at tilføje rekvisitter med vprops. Vi kan endda bruge den til at oprette koden til hurtigt at importere en bibliotek med vimport-lib. Som du kan se, er disse meget hjælpsomme og tidsbesparende kodestykker.

Bemærk, at hvis du bruger denne Snippets-udvidelse, anbefales det at tilføje en linje til dine brugerindstillinger:

vetur.completion.useScaffoldSnippets skal være falske

Dette vil sikre dig, at disse uddrag ikke er i konflikt med Veturs.

Farvetemaer Endelig, hvis du spekulerer på, hvordan du ændrer dit tema i VS-kode, eller hvis du spekulerer på, hvilket jeg bruger her, kan du gå til Kode> Præferencer> Farvetema.

Som du kan se, bruger jeg FlatUI Dark. Du kan ændre din temafarve til en af ​​disse indstillinger her, eller du kan søge efter andre temaer i udvidelseslageret.

Hvis du ikke ser en, du ønsker, kan du også gå til Visual Studio Marketplace online. Her kan du få vist mange forskellige plugins og temaer som Night Owl af vores ven Sarah Drasner. Du kan installere det direkte fra browseren og derefter finde det i dine indstillinger for farvetema.

Fortsæt med at lære

For at fortsætte med at lære hos mig kan du tage det fulde Real World Vue-kursus på VueMaster.com.