Vue.js için En İyi Kod Düzenleyici

Seçilebilecek artan sayıda kaliteli kod editörü ile Vue.js. için en iyi kod editörünün ne olduğunu merak ediyor olabilirsiniz. Bazı geliştiriciler, editörlerine siyasi inançları kadar önemlidir, bu nedenle kime sorduğunuza bağlı olarak farklı yanıtlar alırsınız.

Ancak Vue’da kodlama söz konusu olduğunda, sorulacak en iyi insanlardan biri Vue’nin yaratıcısı Evan You’dur. Peki ne kullanıyor? Visual Studio Kodu.

Bir röportajda, konu hakkında sorular soruldu ve cevap verdi:

… Yakın zamana kadar ileri geri değiştim, TypeScript kullanmaya başladım ve VS Code TypeScript çok iyi olduğu için (kalıcı olarak) VS Code'a geçtim.

Vue, TypeScript kullanmanızı gerektirmese de, Vue 3.0'daki bu yayında ele alındığı gibi kaynak kodu yakında yazılacaktır.

Düşünüyor olabilirsiniz… Ama kaynak kod üzerinde çalışmıyorum ve TypeScript ile Vue kodunu kullanmıyorum, VS Kodu hala benim için alakalı mı?

Bu da beni .vue dosyalarında sözdizimi vurgulamak, parçacıkları, sıralamak, hata kontrol etmek, biçimlendirmek, otomatik tamamlama ve hata ayıklamak gibi özelliklere sahip zengin özellikli bir uzantı olan Vetur'un konusuna getiriyor. Bu noktada, bir kod düzenleyici için en iyi Vue uzantısıdır. Ve olması gerekir, çünkü Vue çekirdek ekibinin bir üyesi olan Pine Wu tarafından geliştirilmiştir.

Eğer Vue geliştirme için VS Kodunu kullanmak istiyorsanız (ya da zaten varsa), size VS Kodunu nasıl optimize edeceğinizi gösterdiğim için aşağıdaki adımları takip edebilirsiniz.

Ne öğreneceğiz?

Nasıl yapılacağını öğreneceğiz:

  • .Vue dosyalarımızda sözdizimini vurgulayın
  • Daha hızlı bir iş akışı için kod parçacıklarını kullanın
  • Editörümüzü kodumuzu otomatik biçimlendirecek şekilde yapılandırın
  • Ve geliştirme deneyimimizi geliştirecek diğer yararlı uzantıları keşfedin

Vetur Kurulumu

VS Code'u, Vue.js ekibinin ana üyesi olan Pine Wu tarafından tasarlanan bir eklenti olan Vetur da dahil olmak üzere Vue'nin gelişimi için mükemmel bir ortam yapan birçok özellik vardır.

Burada VS Kodunda, bu About.vue dosyası gibi bir .vue dosyası açarsak, bu gri kodun tümünü görürüz. Bunun nedeni, VS Kodunun .vue dosyalarındaki sözdizimini otomatik olarak vurgulamamasıdır.

Vetur bunu bizim için çözebilir ve bize geliştirici deneyimini geliştirmek için tasarlanmış başka özellikler verebilir.

Öyleyse şimdi yükleyelim. Uzantı deposunu açın.

Sonra “Vetur” aratın, arama sonuçlarında seçin ve Kur'a tıklayın. Ardından Yeniden Yükle'yi tıklayın.

Vetur’un Özellikleri

Şimdi Vetur kurulu olduğu için özelliklerine bir göz atalım.

Sözdizimi Vurgulama Command + P yazarak ve .vue dosyasının adını yazarak About.vue dosyasını açabiliriz. Gördüğünüz gibi, şimdi kodumuz doğru sözdizimi vurguluyor. Harika - artık gri kod yok.

Home.vue dosyasını kontrol ederek, JavaScript’imizin de doğru şekilde vurgulandığını görebiliriz.

Parçacıklar Başka bir özellik Vetur, kod pasajlarıyla birlikte geliyor. Bunlar, yaygın olarak kullanılan kod parçalarını hızlı bir şekilde oluşturmanıza olanak sağlayan zaman kazandıran kod parçacıklarıdır.

Bunu çalışırken görmek için yeni bir bileşen oluşturalım. Adını EventCard.vue olarak değiştireceğiz. Şimdi, “iskele” kelimesini bir .vue dosyasına yazıp ENTER tuşuna basarsak, bu dosyayı otomatik olarak tek bir dosya .vue bileşeninin iskeletiyle veya iskele ile doldurur.

Emmet Vetur ayrıca Emmet ile birlikte geliyor. Bu, kodunuzu oluşturmak için kısayolları kullanmanıza izin veren popüler bir araçtır.

Örneğin, h1 yazıp enter tuşuna basabiliriz ve bu açılış ve kapanış h1 elemanı yaratacaktır.

Div> ul> li gibi daha karmaşık bir şey yazdığımızda şunu üretecektir:

        
                
  •              

Emmet sizin için çalışmıyor gibi görünüyorsa, bunu Kullanıcı Ayarlarınıza ekleyebilirsiniz:

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

Emmet'in gelişiminizi nasıl hızlandıracağı hakkında daha fazla bilgi edinmek için buraya gidin.

ESLint & Prettier’ı Takma

Şimdi, ESLint ve Prettier'in kurulu olduğundan emin olmalıyız. Uzantılar mağazasında, ESLint için bir arama yapacağız, sonra devam edip yükleyin. Ve aynısını Prettier için de yapacağız. Kurulduktan sonra VS Kodunu yeniden yüklemek için yeniden yükle seçeneğine basacağız.

ESLint'i Yapılandırma

Şimdi bunlar yüklendiğine göre, onlara biraz ekstra yapılandırma eklememiz gerekiyor.

Projemizi terminalden yarattığımızda, bize bu proje için ESLint'i yapılandırabileceğimiz, bu .eslintrc.js dosyasını veren özel config dosyaları ile oluşturmayı seçtik. Özel dosyalar seçmeseydik, ESLint yapılandırmalarını package.json içinde bulabilirdik.

Böylece, .eslintrc.js dosyamızda ekleyeceğiz:

'Eklentisi: güzel / önerilen'

Bu, ESLint'teki Prettier desteğini varsayılan ayarlarla etkinleştirir.

Yani bizim dosya şimdi şuna benziyor:

module.exports = {
      kök: doğru,
      env: {
        düğüm: true
      },
      'uzanıyor': [
        'Eklentisi: vue / esansiyel',
        'plugin: prettier / recommended', // bu satırı ekledik
        '@ Vue / güzel'
      ],
      kurallar: {
        'konsol yok': process.env.NODE_ENV === 'üretim'? 'error': 'kapalı'
        'hata ayıklayıcı yok': process.env.NODE_ENV === 'üretim'? 'error': 'kapalı'
      },
      parserOptions: {
        ayrıştırıcı: 'babel-eslint'
      }
    }

Daha Güzel Yapılandırma

Kişisel tarzımıza veya ekibimizin tercihlerine göre bazı özel ayarlar eklemek için bir Prettier konfigürasyon dosyası oluşturma seçeneğine de sahibiz.

Burada yaratacağız ve ismini değiştireceğiz.

Ve içinde şunu yazacağız:

module.exports = {
        singleQuote: doğru,
        yarı: yanlış
    }

Bu, çift tırnak işaretlerini tek tırnak işaretlerine dönüştürür ve noktalı virgüllerin otomatik olarak eklenmemesini sağlar.

Kullanıcı ayarları

VS Kodunu daha iyi bir geliştirme deneyimi için daha da iyileştirmek için Kullanıcı Ayarlarımıza bazı konfigürasyonlar ekleyeceğiz. Kullanıcı Ayarlarına erişmek için üst gezinme çubuğundaki Kod, ardından Tercihler ve ardından Ayarlar öğesini tıklayın. Bu, json'da ayarları ekleyebileceğiniz bir Kullanıcı Ayarları penceresi açacaktır.

İlk önce şunu eklemek istiyoruz:

"vetur.validation.template": yanlış

Bu, Vetur’un giydirme özelliğini kapatır. ESLint + Prettier yerine güveniyor olacağız.

Şimdi ESLint'e hangi dilleri doğrulamak istediğimizi söylemek istiyoruz (vue, html ve javascript) ve autoFix'i her birinde true olarak ayarlayın:

"eslint.validate": [
        {
            "dil": "vue",
            "autoFix": doğru
        },
        {
            "dil": "html",
            "autoFix": doğru
        },
        {
            "dil": "javascript",
            "autoFix": doğru
        }
    ],

O zaman iyi bir önlem almak için ESLint'e autoFixOnSave'i söyleyelim.

"eslint.autoFixOnSave": doğru,

Ve editörümüzün formatına OnSave'i de söyleyin.

"editor.formatOnSave": doğru,

Test etmek

Bunun çalıştığını test etmek için, buraya EventCard bileşenimize bir data özelliği ekleyeceğiz ve şu teklifi ekleyeceğiz: “Bekar olmak istiyorum” sonra buraya bir noktalı virgül ekleyeceğiz. Kaydetmeye başladığımızda, tırnaklarımız tek tırnaklara dönüştürülür ve noktalı virgül kaldırılır. Müthiş - çalışıyor.

Ek Aletler

Şimdi, gelişiminizi hızlandırabilecek ek araçlara göz atalım.

Göreli Yolu Kopyala Göreli Yolu Kopyala, bağlandığı dizine bağlı olarak bir dosyanın yaşadığı konumu kopyalamanıza izin veren bir uzantıdır.

Araştıralım, yükleyelim, sonra iş başında görelim.

Home.vue dosyamızda, burada HelloWorld bileşenini içe aktardığımız göreceli bir yol olduğunu görüyoruz.

Almak istediğimiz dosyanın yolunu bulmak için, dosyayı sağ tıklatıp Göreceli Yolu Kopyala'yı seçiyoruz. Şimdi, kopyalananı yapıştırdığımızda, doğru akraba yolumuz olduğunu görüyoruz. Bu src dikkat edin. Buradaki yorum, projemizin kurulma şeklinden dolayı @ kullanabileceğimizi bize bildirir.

Entegre Terminal VS Kod editörünün kullanışlı bir dahili özelliği, ayrı terminalinize geçmek yerine kullanabileceğiniz entegre terminaldir. Klavye kısayolu ile açabilirsiniz: `ctrl +` `

Diğer Snippet'ler Bazı ek kod snippet'leri yüklemekle ilgileniyorsanız, Core Vue Team Üyesi Sarah Drasner tarafından oluşturulan tam bir Vue VSCode Snippet paketi indirebilirsiniz.

Adını uzantı olarak arayalım, sarah.drasner. İşte oradalar. Şimdi yükleyip yeniden yükleyebiliriz.

Onlara eylem halindeki bir göz atın.

Şablonumuzdaki bir öğeye vif yazarsak, bu bize bir v-if ifadesi verir ve von yazmak bize tam olay işleyicisi verir. Bir data özelliğini elle yazmak yerine, bizim için bir tane oluşturacak olan vdata'yı yazabiliriz. Aynı şeyi vprops ile sahne eklemek için de yapabiliriz. Vimport-lib ile bir kütüphaneci hızlı bir şekilde almak için kodu oluşturmak için bile kullanabiliriz. Gördüğünüz gibi, bunlar çok yardımcı ve zaman kazandıran pasajlar.

Lütfen bu Snippets uzantısını kullanıyorsanız, Kullanıcı Ayarlarınıza bir satır eklemeniz önerilir:

vetur.completion.useScaffoldSnippets yanlış olmalıdır

Bu, bu snippet'lerin Vetur’larla çakışmadığından emin olmanızı sağlar.

Renk Temaları Son olarak, temanızı VS Kodunda nasıl değiştireceğinizi merak ediyorsanız veya hangisini burada kullandığımı merak ediyorsanız, Kod> Tercihler> Renk Teması'na gidebilirsiniz.

Gördüğünüz gibi FlatUI Dark kullanıyorum. Tema renginizi buradaki seçeneklerden herhangi birine değiştirebilir veya uzantı deposundaki diğer temaları arayabilirsiniz.

İstediğinizi göremiyorsanız, çevrimiçi olarak Visual Studio Marketplace’e de gidebilirsiniz. Burada, dostumuz Sarah Drasner tarafından Night Owl gibi farklı eklentiler ve temaların tonlarını önizleyebilirsiniz. Doğrudan tarayıcıdan yükleyebilir ve ardından Renk Teması Tercihlerinizde bulabilirsiniz.

Öğrenmeye Devam Et

Benimle öğrenmeye devam etmek için, Gerçek Dünya Vue kursunun tamamını VueMastery.com adresinde alabilirsiniz.