Vue.js uchun eng yaxshi kod muharriri

Sifat kodlari tahrirlovchilarining soni ortib borishi bilan Vue.js uchun eng yaxshi kod muharriri kim ekanligi haqida qiziqishingiz mumkin. Ayrim ishlab chiquvchilar o'zlarining muharrirlariga va siyosiy e'tiqodlariga sodiq bo'lganliklari sababli, siz kimdan so'rashingizga qarab turli xil javob olasiz.

Ammo Vue-da kodlash haqida gap ketganda, eng yaxshi odamlardan biri bu Vue-ning yaratuvchisi Evan You. Xo'sh, u nimadan foydalanadi? Visual Studio kodi.

Intervyuda, bu mavzu haqida so'rashdi va u quyidagicha javob berdi.

... Men yaqinda TypeScript-dan foydalanishni boshlaganimga qadar oldinga va orqaga o'girildim va VS Code TypeScript juda yaxshi bo'lgani uchun VS Code-ga (doimiy ravishda) o'tdim.

Vue sizdan TypeScript-ni ishlatishingizni talab qilmasa ham, Vue 3.0-da ushbu xabarda keltirilganidek, uning dastlabki kodi tez orada unda yoziladi.

Siz shunday deb o'ylagandirsiz ... Ammo men kod kodi ustida ishlamayman va TypeScript bilan Vue-kodni ishlatmayman, VS kodi men uchun hali ham dolzarbmi?

Bu meni Vetur mavzusiga olib keladi, bu sizga xususiyatlarga boy kengaytma .vue fayllar, parchalar, tartiblash, xatolarni tekshirish va formatlash, shuningdek avtomatik tugatish va disk raskadrovka kabi sintaksisni ajratib ko'rsatish kabi ma'lumotlarni beradi. Hozirgi vaqtda bu kod muharriri uchun eng yaxshi Vue kengaytmasi. Va bo'lishi kerak, chunki u Vue yadro jamoasining a'zosi Pine Vu tomonidan ishlab chiqilgan.

Agar siz VS-kodni Vue-ni ishlab chiqish uchun ishlatmoqchi bo'lsangiz (yoki allaqachon mavjud), siz VS-kodni qanday optimallashtirishni sizga ko'rsataman.

Biz nimani bilib olamiz?

Biz quyidagilarga o'rganmoqchimiz:

  • Bizning .vue fayllarimizda sintaksisni ta'kidlashni oling
  • Tezroq ishlash uchun kod parchalarini ishlating
  • Bizning kodni avtomatik formatlash uchun muharririmizni sozlang
  • Bizning tajribamizni yaxshilaydigan boshqa foydali kengaytmalar bilan tanishing

Veturni o'rnatish

VS Code-ni Vue-ni rivojlantirish uchun ajoyib muhitga aylantiradigan bir nechta xususiyatlar mavjud, ular orasida Vine, Vue.js jamoasining asosiy a'zosi Pine Wu tomonidan yaratilgan plagin mavjud.

Bu erda VS kodda, biz About.vue fayli kabi .vue faylini ochsak, biz ushbu kulrang kodning barchasini ko'ramiz. VS kod avtomatik ravishda .vue fayllaridagi sintaksisini ajratib ko'rsatolmaydi.

Vetur buni biz uchun tuzatishi mumkin va ishlab chiquvchilar tajribasini yaxshilash uchun yaratilgan boshqa xususiyatlarni ham berishi mumkin.

Endi uni o'rnatamiz. Kengaytmalar do'konini oching.

Keyin "Vetur" ni qidirib toping, uni qidiruv natijalarida tanlang va "O'rnatish" ni bosing. Keyin "Qayta yuklash" ni bosing.

Veturning xususiyatlari

Endi Vetur o'rnatilgan ekan, uning xususiyatlarini ko'rib chiqaylik.

Sintaksisning ta'kidlanishi + P buyrug'ini kiritib va ​​.vue fayl nomini yozib, About.vue faylini ochishimiz mumkin. Ko'rib turganingizdek, endi bizning kodimiz sintaksisni aniq ta'kidlashni boshlamoqda. Ajoyib - endi kulrang kod yo'q.

Home.vue faylini tekshirib ko'rishimiz bilan bizning JavaScript ham to'g'ri ta'kidlanganligini ko'rishimiz mumkin.

Snippets Vetur-ning yana bir xususiyati uning kod parchalari bilan to'ldirilgan. Bular vaqtni tejaydigan "parchalar" bo'lib, ular tez-tez ishlatiladigan kodlarni yaratishga imkon beradi.

Buni amalda ko'rish uchun yangi tarkibiy qism yarataylik. Biz EventCard.vue nomini beramiz. Endi, agar biz "iskala" so'zini .vue fayliga yozsak va Enter ni bossak, bu faylni bitta fayl .vue komponentining skeletlari yoki iskala bilan to'ldiradi.

Emmet Vetur ham Emmet bilan birga keladi. Bu sizning kodingizni yaratish uchun yorliqlardan foydalanishga imkon beradigan mashhur vositadir.

Masalan, biz h1 va Enter tugmachalarini yozib olamiz va bu h1 elementini ochish va yopish imkoniyatini yaratadi.

Agar biz div> ul> li kabi murakkabroq bir narsani yozsak, u hosil bo'ladi:

        
                
  •         
    

Agar Emmet siz uchun ishlamasa, buni foydalanuvchi sozlamalariga qo'shishingiz mumkin:

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

Emmet sizning rivojlanishingizni qanday tezlashtirishi haqida ko'proq bilish uchun bu erga o'ting.

ESLint & Prettier-ni o'rnatish

Endi biz ESLint va Prettier o'rnatilganligiga ishonch hosil qilishimiz kerak. Kengaytmalar do'konida biz ESLint-ni qidiramiz, so'ng uni o'rnatamiz. Prettier uchun ham xuddi shunday qilamiz. O'rnatilganidan so'ng, VS kodini qayta yuklash uchun biz qayta yuklashni bosamiz.

ESLint-ni sozlash

Endi ular o'rnatildi, biz ularga biroz konfiguratsiyani qo'shishimiz kerak.

Bizning loyihamizni terminaldan yaratganimizda, biz uni ushbu .eslintrc.js faylini taqdim etgan va ushbu loyiha uchun ESLint-ni sozlashimiz mumkin bo'lgan maxsus konfiguratsiya fayllari bilan yaratishni tanladik. Agar biz ajratilgan fayllarni tanlamagan bo'lsak, biz o'z paketimizdagi ESLint konfiguratsiyalarini topamiz.

Shunday qilib, .eslintrc.js faylimizda biz quyidagilarni qo'shamiz:

'plagin: chiroyli / tavsiya etilgan'

Bu standart sozlamalar bilan ESLint-da Prettier-ni qo'llab-quvvatlashga imkon beradi.

Endi bizning faylimiz quyidagicha ko'rinadi:

modul.exports = {
      ildiz: haqiqiy,
      env: {
        tugun: haqiqiy
      },
      "kengayadi": [
        'plagin: vue / essential',
        'plagin: chiroyli / tavsiya qilingan', // biz ushbu qatorni qo'shdik
        '@ vue / chiroyli
      ],
      qoidalar: {
        "konsol yo'q": process.env.NODE_ENV === "ishlab chiqarish"? 'error': 'off',
        "nosozliklarni tuzatuvchi": process.env.NODE_ENV === 'ishlab chiqarish'? 'error': 'off'
      },
      parserOptions: {
        tahlil: "babel-eslint"
      }
    }

Prettier-ni sozlash

Shuningdek, bizda Prettier konfiguratsiya faylini yaratish, shaxsiy uslubimizga yoki jamoamizning xohishiga ko'ra maxsus sozlamalarni qo'shish imkoniyati mavjud.

Biz bu erda yaratamiz va uni .prettierrc.js deb nomlaymiz.

Ichkarida esa quyidagini yozamiz:

modul.exports = {
        singleQuote: haqiqiy,
        yarim: noto'g'ri
    }

Bu qo'shtirnoqni bitta qo'shtirnoqqa aylantiradi va nuqta-vergullar avtomatik ravishda kiritilmaganligiga ishonch hosil qiling.

Foydalanuvchi sozlamalari

VS Code-ni yanada rivojlantirishi uchun yanada optimallashtirish uchun biz foydalanuvchi sozlamalariga ba'zi konfiguratsiyalarni qo'shamiz. Foydalanuvchi sozlamalariga kirish uchun yuqori navigatsiya panelidagi Kodni, so'ngra Parametrlarni, so'ng Sozlamalarni bosing. Json-da sozlashingiz mumkin bo'lgan foydalanuvchi sozlamalari oynasi paydo bo'ladi.

Birinchidan, biz quyidagilarni qo'shmoqchimiz:

"vetur.validation.template": noto'g'ri

Bu Veturning oqlash xususiyatini o'chirib qo'yadi. Biz buning o'rniga ESLint + Prettier-ga ishonamiz.

Endi biz ESLint-ga qaysi tillarni (vue, html va javascript) tasdiqlashini aytamiz va har birida autoFix-ni rost qilib qo'yamiz:

"eslint.validate": [
        {
            "til": "vue",
            "autoFix": to'g'ri
        },
        {
            "til": "html",
            "autoFix": to'g'ri
        },
        {
            "til": "javascript",
            "autoFix": to'g'ri
        }
    ],

Yaxshi o'lchov uchun biz ESLint-ga autoFixOnSave-ga aytamiz.

"eslint.autoFixOnSave": rost,

Va muharririmizning o'zi formatlashini aytib beringOnSave.

"editor.formatOnSave": rost,

Uni sinab ko'rish

Bu ishlayotganligini sinab ko'rish uchun, biz bu erda EventCard tarkibiy qismimizga ma'lumotlar xususiyatini qo'shamiz va "men yolg'iz bo'lishni xohlayman" degan qo'shimchani qo'shamiz, keyin biz ham bu erda nuqta-vergul qoldiramiz. Biz tejashni urganimizda, bizning tirnoqlarimiz bitta tirnoqqa aylantiriladi va nuqta-vergul olib tashlanadi. Ajoyib - ishlamoqda

Qo'shimcha vositalar

Endi sizning rivojlanishingizni tezlashtirishga yordam beradigan qo'shimcha vositalarni ko'rib chiqaylik.

Nisbiy yo'lni nusxalash. Nusxalashtirishning nisbiy yo'li - bu fayl yashaydigan joyni unga ulanadigan katalog bilan bog'liqligiga qarab nusxalash imkonini beruvchi kengaytma.

Uni qidirib, o'rnatib, keyin amalda ko'raylik.

Home.vue faylimizda biz HelloWorld komponentini import qilayotgan nisbiy yo'l mavjudligini ko'rmoqdamiz.

Biz import qilmoqchi bo'lgan faylning nisbiy yo'lini olish uchun biz sichqonchaning o'ng tugmachasini bosib, Nisbiy yo'lni nusxalash-ni tanlang. Endi biz ko'chirilgan nusxani qo'yganimizda, biz aniq nisbiy yo'limiz borligini ko'ramiz. E'tibor bering, bu src. Bu yerdagi sharh bizga loyihamizning tuzilishi tufayli biz buning o'rniga @ dan foydalanishimiz mumkinligini bildiradi.

Integrated Terminal VS Code muharririning qulay ichki xususiyati bu uning alohida terminaliga o'tish o'rniga foydalanishingiz mumkin bo'lgan o'rnatilgan terminal. Siz uni klaviatura yorlig'i bilan ochishingiz mumkin: `ctrl +` `

Qo'shimcha parchalar

Keling, kengaytmani uning ismi sarah.drasner bilan izlaylik. Ular o'sha erda. Endi biz o'rnatamiz va qayta yuklaymiz.

Keling, ularni amalda ko'rib chiqaylik.

Agar biz shablonimizdagi elementga vifni qo'ysak, u bizga v-if bayonotini beradi va vonni yozish bizga to'liq voqealarni qayta ishlash vositasini beradi. Ma'lumotlar xususiyatini qo'lda terishning o'rniga, bizda vdata-ni yozib olishimiz mumkin. Rekvizitlarni vproplar bilan qo'shish uchun biz xuddi shu narsani qila olamiz. Biz undan vimport-lib bilan tezkor yukni olib kirish uchun kod yaratish uchun ham foydalanishimiz mumkin. Ko'rib turganingizdek, bu juda foydali va vaqtni tejaydigan parchalar.

E'tibor bering, agar siz ushbu Snippets kengaytmasidan foydalanayotgan bo'lsangiz, foydalanuvchi sozlamalariga chiziq qo'shish tavsiya etiladi:

vetur.completion.useScaffoldSnippets noto'g'ri bo'lishi kerak

Bu ushbu parchalar Vetur-ga zid kelmasligiga ishonch hosil qiladi.

Rangli mavzular Va nihoyat, agar VS Code-da mavzuni qanday o'zgartirish kerakligi haqida savol tug'ilsa yoki men bu erda qaysi birini ishlatayotganimni bilmoqchi bo'lsangiz, Kod> Afzalliklar> Rang mavzusi-ga o'tishingiz mumkin.

Ko'rib turganingizdek, men FlatUI Dark-dan foydalanyapman. Mavzu rangini bu erda istalgan variantga o'zgartirishingiz mumkin yoki kengaytmalar do'konida boshqa mavzularni qidirishingiz mumkin.

Agar siz xohlaganingizni ko'rmasangiz, Visual Studio Marketplace-ga ham borishingiz mumkin. Bu erda siz do'stimiz Sara Drasnerning "Tungi boyqush" kabi turli xil plaginlari va mavzularini oldindan ko'rishingiz mumkin. Siz uni to'g'ridan-to'g'ri brauzerdan o'rnatishingiz mumkin, keyin uni Rang mavzularingizning afzalliklaridan topishingiz mumkin.

O'rganishni davom ettiring

Men bilan o'rganishni davom ettirish uchun siz VueMastery.com saytida to'liq Real World Vue kursini olishingiz mumkin.