Parim koodiredaktor saidile Vue.js

Kuna üha enam on valida kvaliteetsete koodiredaktorite hulgast, võiksite küsida, milline on Vue.js jaoks parim koodiredaktor. Mõned arendajad on sama pühendunud oma toimetajatele kui ka nende poliitilistele veendumustele, nii et saate erinevaid vastuseid sõltuvalt sellest, kellelt te küsite.

Kui aga rääkida Vue's kodeerimisest, siis on üks paremaid inimesi, kes küsib, Vue looja Evan Sina. Mida ta siis kasutab? Visuaalse stuudio kood.

Intervjuus küsiti temalt selle teema kohta ja ta vastas:

… Vahetasin edasi-tagasi kuni hiljuti, kui hakkasin TypeScripti kasutama ja kuna VS Code TypeScript on nii hea, siis lülitasin (jäädavalt) välja VS Code.

Ehkki Vue ei nõua teilt TypeScripti kasutamist, kirjutatakse sellesse lähtekood, nagu me seda ka Vue 3.0 selles postituses kirjeldasime.

Võib-olla mõtlete ... Kuid ma ei tööta lähtekoodi kallal ja ma ei koodi Vue-i TypeScriptiga, kas VS-kood on minu jaoks endiselt asjakohane?

See viib mind teema Vetur juurde, mis on funktsioonirikas laiend, mis annab teile selliseid asju nagu süntaksi esiletõstmine .vue-failides, katkendid, viimistlemine, vigade kontrollimine ja vormindamine, samuti automaatne lõpetamine ja silumine. Praegu on see koodiredaktori parim Vue-laiend. Ja see peakski nii olema, sest selle on välja töötanud Vine tuumimeeskonna liige Pine Wu.

Nii et kui olete huvitatud VS-koodi kasutamisest Vue arendamiseks (või juba olete), võite järgida allpool toodud juhiseid, nagu näitan teile, kuidas VS-koodi optimeerida.

Mida me õpime?

Õpime, kuidas:

  • Hankige süntaksi esiletõstmine meie .vue-failides
  • Kiirema töövoo jaoks kasutage koodilõike
  • Seadistage meie redaktor koodi automaatseks vormindamiseks
  • Ja uurige muid kasulikke laiendusi, mis parandavad meie arenduskogemust

Vetur paigaldamine

VS Code'i jaoks on Vue arendamiseks suurepärane keskkond, sealhulgas mitu funktsiooni, sealhulgas Vetur, pistikprogramm, mille on kujundanud Vue.js meeskonna tuumik Pine Wu.

Kui avame VS-koodis .vue-faili, näiteks selle About.vue-faili, näeme kogu seda halli koodi. Selle põhjuseks on asjaolu, et VS-kood ei tõsta automaatselt .vue-failide süntaksit esile.

Vetur saab selle meie jaoks parandada ja pakkuda meile muid funktsioone, mis on mõeldud arendaja kogemuse parandamiseks.

Installigem see siis nüüd. Avage laienduste pood.

Seejärel otsige “Vetur”, valige see otsingutulemustes ja klõpsake nuppu Installi. Seejärel klõpsake nuppu Laadi uuesti.

Vetur omadusi

Nüüd, kui Vetur on installitud, vaatame selle funktsioone.

Süntaksi esiletõstmine Tippides käsu + P ja tippides .vue faili nime, saame avada faili About.vue. Nagu näete, on meie kood nüüd süntaksilt korralikult esile tõstetud. Vinge - enam pole halli koodi.

Home.vue faili kontrollides näeme, et ka meie JavaScripti on õigesti esile tõstetud.

Katkendid Veel üks omadus, mille Vetur komplekteerib, on koos koodilõikudega. Need on aja kokkuhoidlikud koodilõigud, mis võimaldavad teil kiiresti luua sagedamini kasutatavaid koodilõike.

Loome selle komponendi nägemiseks uue komponendi. Meie nimi on EventCard.vue. Kui kirjutame .vue-faili sõna “tellingud” ja vajutame sisestusklahvi (ENTER), täidab see faili automaatselt ühe faili .vue komponendi skeletiga või karkassiga.

Emmet Vetur tuleb ka Emmetiga pakitult. See on populaarne tööriist, mis võimaldab teil kasutada koodide koostamiseks otseteid.

Näiteks võime tippida h1 ja vajutada sisestusklahvi (Enter) ning see loob h1 avamise ja sulgemise.

Kui kirjutame midagi keerukamat, näiteks div> ul> li, annab see:

        
                
  •         
    

Kui tundub, et Emmet ei tööta teie heaks, saate selle oma kasutajaseadetesse lisada:

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

Lisateavet selle kohta, kuidas Emmet teie arengut kiirendada saab, minge siia.

ESLint & Prettieri installimine

Nüüd peame veenduma, et meil on installitud ESLint ja Prettier. Otsime laienduste poes ESLinti, seejärel jätkame ja installime selle. Ja sama teeme ka Prettieri puhul. Kui see on installitud, vajutame VS-koodi uuesti laadimiseks uuesti laadimist.

ESLinti seadistamine

Nüüd, kui need on installitud, peame neile lisama natuke lisakonfiguratsioone.

Terminaalist oma projekti loomisel otsustasime selle luua spetsiaalsete konfiguratsioonifailidega, mis andsid meile selle .eslintrc.js faili, kus saame selle projekti jaoks ESLinti konfigureerida. Kui me poleks valinud spetsiaalseid faile, leiaksime ESLinti konfiguratsioonid meie paketist.json.

Seega lisame oma .eslintrc.js faili:

'plugin: ilusam / soovitatav'

See lubab ESLinti vaikeseadetega Prettier tuge.

Nii et meie fail näeb nüüd välja selline:

moodul.exports = {
      juur: tõsi,
      env: {
        sõlm: tõsi
      },
      'laieneb': [
        'plugin: vue / oluline',
        'plugin: uhkem / soovitatav', // lisasime selle rea
        '@ vue / uhkem'
      ],
      reeglid: {
        'no-console': protsess.env.NODE_ENV === 'tootmine'? 'viga': 'välja',
        'pole silumist': protsess.env.NODE_ENV === 'tootmine'? 'viga': 'välja'
      },
      parserOptions: {
        parser: 'babel-eslint'
      }
    }

Uuema seadistamine

Samuti on meil võimalus luua uhkem konfiguratsioonifail, et lisada erisätteid vastavalt meie isiklikule stiilile või meeskonna eelistustele.

Loome selle siin ja paneme sellele nime .prettierrc.js.

Ja seespool kirjutame:

moodul.exports = {
        singleQuote: tõsi,
        pool: vale
    }

See teisendab topelt jutumärgid üksikuteks jutumärkideks ja veenduge, et semikoolone ei sisestataks automaatselt.

Kasutaja seaded

VS-koodi optimeerimiseks veelgi suuremaks arenduskogemuseks lisame oma kasutajaseadetesse mõned konfiguratsioonid. Kasutajaseadete juurde pääsemiseks klõpsake ülemisel navigeerimisribal nuppu Kood, siis nuppu Eelistused ja siis Seaded. See avab kasutaja sätete akna, kuhu saate sätteid lisada jsonis.

Esiteks tahame lisada:

"vetur.validation.template": vale

See lülitab Veturi värvimise funktsiooni välja. Loodame selle asemel ESLint + Prettier.

Nüüd tahame öelda ESLintile, millistes keeltes me seda valideerida soovime (vue, html ja javascript) ja seada autoFix tõeseks kõigil:

"eslint.validate": [
        {
            "keel": "vue",
            "autoFix": tõsi
        },
        {
            "keel": "html",
            "autoFix": tõsi
        },
        {
            "keel": "javascript",
            "autoFix": tõsi
        }
    ],

Seejärel ütleme ESLintile, et see toimiks automaatselt: autoFixOnSave.

"eslint.autoFixOnSave": true,

Ja öelge meie redigeerijal endal formatOnSave.

"editor.formatOnSave": true,

Selle katsetamine

Selle toimimise kontrollimiseks lisame siin oma EventCardi komponendile andmeomandi ja tsitaadi: “Ma tahan olla vallaline”, siis viskame siia ka semikooloni. Kui vajutame nuppu Salvesta, teisendatakse meie pakkumised üksikuteks jutumärkideks ja semikoolon eemaldatakse. Vinge - see töötab.

Lisatööriistad

Vaatame nüüd mõnda lisatööriista, mis võivad teie arengut kiirendada.

Kopeerimise suhteline tee Kopeerimise suhteline tee on laiend, mis võimaldab teil faili asukohta kopeerida, tuginedes selle seosele kataloogiga, millega see linkib.

Otsime selle üles, installige see ja siis näeme seda toimimas.

Failis Home.vue näeme, et siin on juba olemas suhteline tee, kuhu impordime komponenti HelloWorld.

Importitava faili suhtelise tee saamiseks klõpsake hiire parema nupuga failil ja valige siis käsk Kopeeri suhteline tee. Kopeeritut kleepides näeme, et meil on täpne suhteline tee. Pange tähele seda src. Siinne kommentaar annab meile teada, et meie projekti ülesseadmise viisi tõttu võime kasutada @ asemel.

Integreeritud terminal VS-koodiredaktori mugav sisseehitatud funktsioon on selle integreeritud terminal, mida saate kasutada oma eraldi terminalile üleminemise asemel. Saate selle avada kiirklahviga: `ctrl +` `

Veel kärpeid Kui olete huvitatud mõne täiendava mugava koodilõigu installimisest, saate alla laadida täieliku komplekti Vue VSCode lõigud, mille on loonud Core Vue meeskonna liige Sarah Drasner.

Otsime laiendit tema nimega sarah.drasner. Seal nad on. Nüüd saame installida ja uuesti laadida.

Vaatame neid siis tegevuses.

Kui kirjutame oma malli elemendile vif, annab see meile v-if-lause ja voni tippimine annab meile täieliku sündmuste käitleja. Andmeomandi käsitsi väljakirjutamise asemel võime lihtsalt sisestada vdata, mis meile selle loob. Sama võime teha rekvisiitidega vpropsidega lisamiseks. Saame seda kasutada isegi selleks, et koodiga vimport-lib kiiresti importida koodi. Nagu näete, on need väga kasulikud ja ajakulu säästvad lõigud.

Pange tähele, et kui kasutate seda lõiku Snippets, on soovitatav lisada oma kasutajaseadetesse rida:

vetur.completion.useScaffoldSnippets peaksid olema valed

See tagab, et need katkendid pole vastuolus Veturuga.

Värviteemad Kui soovite küsida, kuidas oma teemat VS-koodis muuta, või kui teil on küsimus, mida ma siin kasutan, siis minge jaotisse Kood> Eelistused> Värviteema.

Nagu näete, kasutan FlatUI Darki. Siin saate muuta oma teema värvi mõneks neist suvanditest või otsida laienduste poest muid teemasid.

Kui te ei näe sellist, mida soovite, võite suunduda ka veebis Visual Studio Marketplace'ile. Siin saate vaadata palju erinevaid pistikprogramme ja teemasid, näiteks meie sõbra Sarah Drasneri öökull. Saate selle otse brauserist installida ja seejärel leida oma värviteemade eelistustest.

Jätkake õppimist

Minuga koos õppimiseks võite osaleda kogu reaalainete kursuse VueMastery.com veebisaidil.