Labākais koda redaktors vietnei Vue.js

Pieaugot skaitam kvalitatīvu kodu redaktoru, no kuriem izvēlēties, jums varētu rasties jautājums, kurš ir labākais koda redaktors vietnei Vue.js. Daži izstrādātāji ir apņēmušies gan pret saviem redaktoriem, gan ar savu politisko pārliecību, tāpēc jūs saņemsit atšķirīgas atbildes atkarībā no tā, ko lūdzat.

Bet, kad runa ir par kodēšanu Vjū, viens no labākajiem cilvēkiem, ko jautāt, ir Vue radītājs Evans Tu. Ko viņš izmanto? Vizuālās studijas kods.

Intervijā viņam jautāja par šo tēmu, un viņš atbildēja:

... Es pārslēdzos uz priekšu un atpakaļ līdz nesenam laikam, kad sāku lietot TypeScript, un, tā kā VS Code TypeScript ir tik labs, es pārslēdzu (pastāvīgi) uz VS Code.

Lai arī Vue neprasa, lai jūs izmantotu TypeScript, drīzumā tajā tiks rakstīts avota kods, kā mēs to aplūkojām šajā Vue 3.0.

Jūs, iespējams, domājat ... Bet es nestrādāju ar avota kodu, un es nekodu Vue ar TypeScript. Vai VS kods joprojām ir piemērots man?

Tas mani noved pie Vetur tēmas, kas ir ar funkcijām bagāts paplašinājums, kas sniedz tādas lietas kā sintakse izcelšana .vue failos, fragmentus, iekrāsošanu, kļūdu pārbaudi un formatēšanu, kā arī automātisko pabeigšanu un atkļūdošanu. Šajā brīdī tas ir labākais koda redaktora Vue paplašinājums. Un tā tam vajadzētu būt, jo to ir izstrādājis Pīns Vu, kurš ir Vue galvenās komandas loceklis.

Tātad, ja jūs interesē VS koda izmantošana Vue izstrādē (vai tādi jau ir), varat sekot līdzi tālāk sniegtajam, kā parādīšu, kā optimizēt VS Code.

Ko mēs mācīsimies?

Mēs iemācīsimies:

  • Iegūstiet sintakses izcelšanu mūsu .vue failos
  • Izmantojiet koda fragmentus, lai nodrošinātu ātrāku darbplūsmu
  • Konfigurējiet mūsu redaktoru, lai tas automātiski formatētu kodu
  • Izpētiet arī citus noderīgus paplašinājumus, kas uzlabos mūsu attīstības pieredzi

Instalējot Vetur

Ir vairākas funkcijas, kas padara VS Code par lielisku vidi Vue attīstībai, ieskaitot Vetur, spraudni, kuru izstrādājis Pine Wu, Vue.js komandas galvenais loceklis.

Šeit, VS kodā, ja atveram .vue failu, piemēram, šo About.vue failu, mēs redzam visu šo pelēko kodu. Tas ir tāpēc, ka VS kods automātiski neizcels .vue failu sintakse.

Vetur var to labot mums un dot mums citas funkcijas, kas izstrādātas, lai uzlabotu izstrādātāja pieredzi.

Instalēsim to tagad. Atveriet paplašinājumu veikalu.

Pēc tam meklējiet “Vetur”, atlasiet to meklēšanas rezultātos un noklikšķiniet uz Instalēt. Pēc tam noklikšķiniet uz Pārlādēt.

Vetur's Features

Tagad, kad Vetur ir instalēts, apskatīsim tā funkcijas.

Sintakse izceļot, ierakstot komandu + P un ierakstot .vue faila nosaukumu, mēs varam atvērt failu About.vue. Kā redzat, tagad mūsu kods iegūst pareizu sintakses izcelšanu. Satriecošs - vairs nav pelēkā koda.

Pārbaudot failu Home.vue, mēs redzam, ka arī mūsu JavaScript ir pareizi izcelts.

Fragmenti Vēl viena funkcija, ko Vetur piegādā kopā ar saviem koda fragmentiem. Šie ir laiku taupoši koda “fragmenti”, kas ļauj ātri izveidot parasti izmantojamus koda fragmentus.

Izveidosim jaunu komponentu, lai to redzētu darbībā. Mūsu vārds būs EventCard.vue. Tagad, ja .vue failā ierakstīsim vārdu “sastatnes” un nospiedīsim taustiņu ENTER, tas automātiski aizpildīs šo failu ar viena faila .vue komponenta skeletu vai sastatnēm.

Emmet Vetur piegādāts arī kopā ar Emmet. Šis ir populārs rīks, kas ļauj izmantot īsceļus koda izveidošanai.

Piemēram, mēs varam ierakstīt h1 un nospiest taustiņu Enter, un tas radīs atvēršanas un aizvēršanas elementu h1.

Ierakstot kaut ko sarežģītāku, piemēram, div> ul> li, tas iegūs:

        
                
  •         
    

Ja šķiet, ka Emmets nedarbojas jūsu labā, varat to pievienot saviem lietotāja iestatījumiem:

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

Lai uzzinātu vairāk par to, kā Emmets var paātrināt jūsu attīstību, dodieties šeit.

Instalējot programmu ESLint & Prettier

Tagad mums jāpārliecinās, vai esam instalējuši ESLint un Prettier. Paplašinājumu veikalā mēs meklēsim ESLint, pēc tam darbosimies un instalēsim to. Mēs tāpat darīsim Prettier. Kad tas būs instalēts, mēs noklikšķināsim uz pārlādēt, lai atkārtoti ielādētu VS kodu.

ESLint konfigurēšana

Tagad, kad tie ir instalēti, mums tiem jāpievieno mazliet papildu konfigurācija.

Kad mēs izveidojām savu projektu no termināļa, mēs izvēlējāmies to izveidot ar īpašiem konfigurācijas failiem, kas mums deva šo .eslintrc.js failu, kurā mēs varam konfigurēt ESLint šim projektam. Ja mēs nebūtu izvēlējušies speciālus failus, ESLint konfigurācijas mēs atrastos mūsu paketē.json.

Tātad, mūsu .eslintrc.js failā mēs pievienosim:

'spraudnis: skaistāks / ieteicams'

Tas ļaus Prettier atbalstu ESLint ar noklusējuma iestatījumiem.

Tātad mūsu fails tagad izskatās šādi:

module.exports = {
      sakne: taisnība,
      env: {
        mezgls: patiess
      },
      “pagarina”: [
        “spraudnis: vērtīgs / būtisks”,
        'spraudnis: skaistāks / ieteicams', // mēs pievienojām šo rindu
        “@ vue / glītāks”
      ],
      noteikumi: {
        'bez konsoles': process.env.NODE_ENV === 'ražošana'? 'kļūda': 'izslēgta',
        'bez atkļūdotāja': process.env.NODE_ENV === 'ražošana'? 'kļūda': 'izslēgta'
      },
      parserOptions: {
        parsētājs: “babel-eslint”
      }
    }

Prettier konfigurēšana

Mums ir arī iespēja izveidot Prettier konfigurācijas failu, pievienot dažus īpašus iestatījumus atbilstoši mūsu personīgajam stilam vai mūsu komandas vēlmēm.

Mēs to izveidosim šeit un nosauksim to .prettierrc.js.

Un iekšpusē mēs ierakstīsim:

module.exports = {
        singleQuote: taisnība,
        daļēji: nepatiess
    }

Tas pārveidos dubultās pēdiņas par vienām pēdiņām un pārliecinieties, ka semikoli nav automātiski ievietoti.

Lietotāja iestatījumi

Lai vēl vairāk optimizētu VS kodu lieliskai attīstības pieredzei, mūsu lietotāja iestatījumos mēs pievienosim dažas konfigurācijas. Lai piekļūtu lietotāja iestatījumiem, augšējā navigācijas joslā noklikšķiniet uz Kods, pēc tam uz Preferences un pēc tam uz Iestatījumi. Tiks atvērts lietotāja iestatījumu logs, kurā json var pievienot iestatījumus.

Pirmkārt, mēs vēlamies piebilst:

"vetur.validation.template": nepatiess

Tas izslēgs Vetur iekrāsošanas funkciju. Tā vietā mēs paļausimies uz ESLint + Prettier.

Tagad mēs vēlamies pateikt ESLint, kādās valodās mēs to vēlamies validēt (vue, html un javascript) un iestatīt autoFix patiesu katrā:

"eslint.validate": [
        {
            "valoda": "vue",
            "autoFix": patiess
        },
        {
            "valoda": "html",
            "autoFix": patiess
        },
        {
            "valoda": "javascript",
            "autoFix": patiess
        }
    ],

Pēc tam, lai veiktu labu mēru, mēs jums pateiksim ESLint uz autoFixOnSave.

"eslint.autoFixOnSave": true,

Un pasakiet mūsu redaktoram pašam formatOnSave.

"editor.formatOnSave": taisnība,

Pārbaudot to

Lai pārbaudītu, vai tas darbojas, mēs šeit savam EventCard komponentam pievienosim datu īpašumu un pievienosim citātu: “Es vēlos būt viens”, tad arī mēs šeit iemetīsim semikolu. Kad esam sasnieguši taustiņu Saglabāt, mūsu pēdiņas tiek pārveidotas vienotās pēdiņās un semikols tiek noņemts. Satriecoši - tas darbojas.

Papildu rīki

Tagad apskatīsim dažus papildu rīkus, kas var palīdzēt paātrināt jūsu attīstību.

Kopēšanas relatīvais ceļš Kopijas relatīvais ceļš ir paplašinājums, kas ļauj kopēt faila atrašanās vietu, pamatojoties uz tā saistību ar direktoriju, kuru tas savieno.

Meklēsim to, instalēsim un tad redzēsim, kā tas darbojas.

Failā Home.vue mēs redzam, ka šeit jau ir relatīvs ceļš, kurā mēs importējam HelloWorld komponentu.

Lai iegūtu importējamā faila relatīvo ceļu, ar peles labo pogu noklikšķiniet uz faila un pēc tam atlasiet Kopēt relatīvo ceļu. Kad ielīmējam kopēto, redzam, ka mums ir precīzs relatīvais ceļš. Ievērojiet šo src. Šeit sniegtais komentārs ļauj mums zināt, ka mūsu projekta izveidošanas veida dēļ mēs varam izmantot @.

Integrēts terminālis Ērta VS koda redaktora iebūvētā iezīme ir tā integrētais terminālis, kuru varat izmantot tā vietā, lai pārslēgtos uz atsevišķo termināli. To var atvērt, izmantojot īsinājumtaustiņu: `ctrl +` `

Vairāk fragmentu Ja vēlaties instalēt dažus papildu ērtus koda fragmentus, varat lejupielādēt pilnu Vue VSCode fragmentu komplektu, ko izveidojusi Core Vue komandas locekle Sāra Drasnere.

Meklēsim paplašinājumu ar viņas vārdu sarah.drasner. Tur viņi ir. Tagad mēs varam instalēt un pārlādēt.

Apskatīsim tos darbībā.

Ja mūsu veidnes elementā ierakstīsim vif, tas dos mums paziņojumu v-if, un, ierakstot von, tiks nodrošināts pilns notikumu apstrādātājs. Tā vietā, lai manuāli ierakstītu datu īpašumu, mēs varam vienkārši ievadīt vdata, kas mums to izveidos. Mēs varam rīkoties tāpat, lai pievienotu butaforijas ar vprops. Mēs to pat varam izmantot, lai izveidotu kodu, lai ātri importētu krātuvi ar vimport-lib. Kā redzat, šie ir ļoti noderīgi un laiku taupoši fragmenti.

Lūdzu, ņemiet vērā: ja jūs izmantojat šo fragmentu paplašinājumu, ieteicams pievienot rindiņu saviem lietotāja iestatījumiem:

vetur.completion.useScaffoldSnippeps ir nepatiesas

Tas pārliecinās, ka šie fragmenti nav pretrunā ar Vetur.

Krāsu motīvi Visbeidzot, ja jums rodas jautājums, kā mainīt savu tēmu VS kodā, vai arī jums rodas jautājums, kuru no tiem es šeit izmantoju, varat doties uz Kods> Preferences> Krāsu tēma.

Kā redzat, es izmantoju FlatUI Dark. Šeit varat mainīt motīva krāsu uz jebkuru no šīm opcijām vai arī paplašinājumu veikalā varat meklēt citas motīvas.

Ja neredzat vajadzīgo, varat arī doties uz Visual Studio Marketplace tiešsaistē. Šeit varat priekšskatīt daudz dažādu spraudņu un motīvu, piemēram, mūsu draudzenes Sāras Drasneres nakts pūce. Varat to instalēt tieši no pārlūka un pēc tam atrast to krāsu izvēles preferencēs.

Turpiniet mācīties

Lai turpinātu mācīties kopā ar mani, varat apmeklēt visu reālās pasaules Vue kursu vietnē VueMastery.com.