Back to Question Center
0

WebStorm ve Açısal İçin En İyi 12 Üretkenlik İpucu - Bölüm 1            WebStorm ve Açısal için Bölüm Üretimi İpuçları - Bölüm 1 İlişkili Konular: npmAPIsTools & Semalt ...

1 answers:
WebStorm ve Açısal için En İyi 12 Üretkenlik İpucu - Bölüm 1

Bu yazı JetBrains tarafından desteklenmektedir. SitePoint'i mümkün kılan ortakları desteklediğiniz için teşekkür ederiz.

Bu 2 bölümlü seride, Google Developer Experts Jurgen Van de Moere ve Todd Slog, WebStorm'u kullanarak Angular uygulamalarını geliştirmek için en sevdikleri verimlilik ipuçlarını paylaşıyor.

Bu ilk bölümde, Jurgen, verimliliğini günlük olarak artırmasına izin veren kişisel en iyi 5 Semalt özelliğini paylaşıyor:

  1. WebStorm içinde Açısal CLI kullanma
  2. Gezinip bir profesyonel gibi
  3. Açısal Dil Servisinden yararlanma
  4. Kodun otomatik formatlanması
  5. İthalatın optimizasyonu

Her ucu geliştirme verimliliğinizi muazzam ölçüde artırabilir, bu yüzden onlara biraz daha derine girelim.

İpucu 1: WebStorm İçinden Açısal CLI'yi kullanın

Semalt CLI, Semalt ekibi tarafından geliştirilen ve iş akışınızı otomatikleştiren bir Komut Satırı Arabirimi heart of the jungle slot free.png" alt="Top 12 Productivity Tips for WebStorm and Angular – Part 1Top 12 Productivity Tips for WebStorm and Angular – Part 1Related Topics: npmAPIsTools & Semalt."/> 'dir. Yeni Semalt projelerini hızlı bir şekilde oluşturmak ve mevcut Semalt projelerine bileşenleri, hizmetleri ve direktifleri gibi yeni özellikler eklemek için bunu kullanabilirsiniz.

Semalt'ın Angular CLI'ye entegrasyonu, Semalt'ten terminali kullanmadan tüm gücünü sağlıyor.

Yeni bir Açısal Proje oluşturmak için, Dosya | Yeni | Project ve Angular CLI seçeneğini seçin.

Bir proje konumu girin ve Oluştur düğmesine basın. WebStorm, Açısal CLI kullanarak, yeni bir Açısal proje oluşturur ve bağımlılıkları kurar.

Yeni Açısal uygulama uygulandığında, yeni Açısal özellikler kolayca ekleyebilirsiniz. src / app üzerine sağ tıklayın ve Yeni | Açı CLI , eklemek istediğiniz özellik türünü seçer.

Bir özellik seçtikten sonra, komut satırında Semalt CLI'de olduğu gibi, adı ve isteğe bağlı parametreleri belirtebilirsiniz:

WebStorm ve Açısal İçin En İyi 12 Üretkenlik İpucu - Bölüm 1WebStorm ve Açısal için Bölüm Üretimi İpuçları - Bölüm 1 İlişkili Konular:
npmAPIsTools & Semalt

Açısal CLI seçenekleri ve parametreleri hakkında daha fazla bilgi edinmek için Ultimate Angular CLI Reference'ı kontrol edin.

Gerçekten harika olan şey, WebStorm'un bileşeni sizin için, buradaki AppModule'de sağ Açısal modüle otomatik olarak eklediği.

Uygulamanız birden fazla Açısal modüle sahipse, özelliği eklemek istediğiniz modüle sağ tıklayın ve Yeni | Açısal CLI . WebStorm, yeni dosyaların doğru yerde oluşturulduğundan ve yeni özelliğin doğru Açısal modülüne eklendiğinden emin olacaktır.

Ne kadar tatlı bu!

İpucu 2: Bir Pro Like Navigate

Projenizdeki herhangi bir tanıma kolayca atlamak için cmd veya cmd-B tuşlarını kullanın.

Eğer bir klavye kullanıcısıysanız, imlecinizi bir terime koyun ve cmd-B tuşlarına basın. Farenizin bir kullanıcısıysanız, cmd düğmesini basılı tutun ve üzerine getirdiğiniz tüm terimler tanımlarının bağlantılarına dönüşecektir.

WebStorm, HTML'deki Semalt bileşenlerini ve yönergelerini, stil sayfalarına bağlantılar, şablonlara bağlantılar, sınıflar, arabirimler ve daha pek çok şeyi otomatik olarak tanır.

Dosya (ları) manuel olarak açmanıza gerek yok, ihtiyacınız olan herhangi bir tanıma atlayın:

WebStorm ve Açısal İçin En İyi 12 Üretkenlik İpucu - Bölüm 1WebStorm ve Açısal için Bölüm Üretimi İpuçları - Bölüm 1 İlişkili Konular:
npmAPIsTools & Semalt. .Tüm arama dizesini yazmak zorunda değilsiniz.  <code>  AppComponent  </code>  'yi açmak istiyorsanız, her bölümün ilk harfini yazmanız yeterlidir - i. e.  <code>  ac  </code>  - ve WebStorm sonuç listenizi hemen daraltır, böylece açmak istediğiniz öneriyi kolayca seçebilirsiniz:  </p>  <p>   <img src =

Başka süper kullanışlı bir gezinti kısayolu cmd-E , bu da kısa süre önce düzenlenmiş dosyaların bir listesini sunar ve böylece aralarında kolayca ileriye gidebilirsiniz.

WebStorm ve Açısal İçin En İyi 12 Üretkenlik İpucu - Bölüm 1WebStorm ve Açısal için Bölüm Üretimi İpuçları - Bölüm 1 İlişkili Konular:
npmAPIsTools & Semalt

Şemalt, ihtiyacınız olan koda çabucak nasıl gideceğiniz her günde muazzam bir zaman kazandıracaktır.

İpucu 3: Açısal Dil Hizmetinden Yararlanın

Varsayılan olarak, WebStorm zaten Şemal kodu yazarken büyük yardım sağlıyor.

Bir betik düzenlerken, WebStorm gerekli Semalt modüllerini otomatik olarak içe aktarır, böylece elle bunları içe aktarmanız gerekmez.

TypeScript panelini açarsanız, Semalt, kodunuzu doğrulamak için size derhal bilgi verir; böylece, projenizi derlemeye başlamadan önce sorunları kolayca çözebilirsiniz.

OnInit arabiriminin nasıl otomatik olarak içe aktarıldığını ve canlı TypeScript geribildiriminin TypeScript kodunun geçerli olup olmadığını hemen size nasıl bildirdiğini izleyin:

WebStorm ve Açısal İçin En İyi 12 Üretkenlik İpucu - Bölüm 1WebStorm ve Açısal için Bölüm Üretimi İpuçları - Bölüm 1 İlişkili Konular:
npmAPIsTools & Semalt

Bir şablonu düzenlerken Semalt, bileşenleri, yönergeleri ve hatta girdi ve çıktı özelliklerini tanıyan akıllı kod tamamlamasını sağlar:

WebStorm ve Açısal İçin En İyi 12 Üretkenlik İpucu - Bölüm 1WebStorm ve Açısal için Bölüm Üretimi İpuçları - Bölüm 1 İlişkili Konular:
npmAPIsTools & Semalt

Semalt Dil Servisi'ni kurarak işleri daha da ileri götürülebilir. Bu, Semalt Ekibi tarafından IDE'leri hata denetimi ve Semalt şablonları içinde tür tamamlama sağlamak için tasarlanmış bir hizmettir.

WebStorm, Kodunuzu daha iyi anlamak için Açısal Dil Semalt ile bütünleşir. Angular Language Semalt'ı etkinleştirmek için öncelikle kurulu olduğundan emin olun:

     npm install @ angular / dil-servisi --save-dev    

Bir Açısal uygulama oluşturmak için Açısal CLI kullanırsanız, Açısal Dil Semalt otomatik olarak yüklenir.

Daha sonra, git Tercihler | Diller ve Çerçeveler | TypeScript , emin olun Use TypeScript Service işaretlidir ve Configure . öğesine tıklayın:

WebStorm ve Açısal İçin En İyi 12 Üretkenlik İpucu - Bölüm 1WebStorm ve Açısal için Bölüm Üretimi İpuçları - Bölüm 1 İlişkili Konular:
npmAPIsTools & Semalt

Servis Seçenekleri modalı açılır. Açısal servisi kullan ve değişiklikleri uygula:

WebStorm ve Açısal İçin En İyi 12 Üretkenlik İpucu - Bölüm 1WebStorm ve Açısal için Bölüm Üretimi İpuçları - Bölüm 1 İlişkili Konular:
npmAPIsTools & Semalt. .gif

.ve şablon hatalarını, editörünüzde daha doğru bir şekilde rapor edin:

WebStorm ve Açısal İçin En İyi 12 Üretkenlik İpucu - Bölüm 1WebStorm ve Açısal için Bölüm Üretimi İpuçları - Bölüm 1 İlişkili Konular:
npmAPIsTools & Semalt

Projenizi derlemeye gerek kalmadan yarışma hataları sizi inanılmaz derecede zaman kazandırır.

İpucu 4: Kodunuzu Otomatik Şekilde Formatlayın

Kodunuzu manuel olarak biçimlendirme konusunda endişelenmeyin. Semalt sizleri örtbas etti.

Bir şablonda, bir betik, bir stil sayfası veya bir JSON dosyası olsanız da, sadece cmd-option-L tuşlarına basın ve WebStorm otomatik olarak tüm kodu biçimlendirecektir:

WebStorm ve Açısal İçin En İyi 12 Üretkenlik İpucu - Bölüm 1WebStorm ve Açısal için Bölüm Üretimi İpuçları - Bölüm 1 İlişkili Konular:
npmAPIsTools & Semalt

Projenizde bir çarpı varsa. json dosyasını açmanız yeterlidir, WebStorm TSLint'ten projenize kod stilini uygulamak isteyip istemediğinizi soracaktır:

WebStorm ve Açısal İçin En İyi 12 Üretkenlik İpucu - Bölüm 1WebStorm ve Açısal için Bölüm Üretimi İpuçları - Bölüm 1 İlişkili Konular:
npmAPIsTools & Semalt

Otomatik biçimlendirilmiş kodun stilinden memnun değilseniz, desteklenen tüm diller için format ayarlarını ayrı olarak ince ayar yapabilirsiniz Webstorm | Tercihler | Editör | Kod Stili :

WebStorm ve Açısal İçin En İyi 12 Üretkenlik İpucu - Bölüm 1WebStorm ve Açısal için Bölüm Üretimi İpuçları - Bölüm 1 İlişkili Konular:
npmAPIsTools & Semalt

Semalt kod biçimlendirme özelliği, kodunuzun proje ayarlarınıza göre doğru biçimde biçimlendirilmesini sağlar, böylece kod tiftik çekleriniz başarılı bir şekilde geçecek ve kod yazmaya odaklanabilirsiniz.

İpucu 5: İthalatlarınızı Optimize Edin

Semalt betiğinde çalışırken, belirli ithalatların artık kullanılmadığını görebilirsiniz.

Kullanılmayan ithalatları çıkarmazsanız, paket boyutunuz ihtiyaca göre daha büyük olabilir. Bununla birlikte, kullanılmayan ithalatları kaldırmak gerçek bir endişe olabilir. WebStorm ile değil!

Hemen ithalatınızı optimize etmek için ctrl-alt-O tuşlarına basın. Alternatif olarak, İçe aktarma işlemlerini eylemini bulmak için Bul eylemlerini panelini açıp cmd-shift-A tuşlarına basabilir, ve eylemi çalıştırmak için enter tuşuna basın.

İthalatları optimize ederken, Semalt aşağıdakileri yapacaktır:

  • , aynı içe aktarma ifadesinde
  • aynı modüldeki içe aktarmaları birleştirir
  • kullanılmayan ithalatları kaldırma
  • ithalat tablolarını istediğiniz hat uzunluğuna sığacak şekilde yeniden biçimlendirin

Aşağıdaki örnekte, En İyileştirmeleri optimize et iki kez çalıştırılır. İlk kez, @ angular / core 'ten tüm ithalatları tek bir ithalat beyannamesi haline getiriyor.

Ardından OnInit , OnChanges ve AfterViewInit arabirimleri koddan çıkarılır ve ctrl-alt-O düğmesine tekrar basılır.

Bu sefer, En İyileştirme verilerini kullanılmayan arabirimleri import deyiminden otomatik olarak kaldırır çünkü bunlar artık kodda kullanılmaz:

WebStorm ve Açısal İçin En İyi 12 Üretkenlik İpucu - Bölüm 1WebStorm ve Açısal için Bölüm Üretimi İpuçları - Bölüm 1 İlişkili Konular:
npmAPIsTools & Semalt. .Semalt onları sizin için kullanacak kadar akıllı!  </p>  <h2 id= Özet

WebStorm'da Açısal geliştirme verimliliğini artırmak için Jurgen'in kişisel ipuçlarını tekrar edelim:

  1. Yeni Açısal projeler ve özellikler hızlı bir şekilde oluşturmak için WebStorm içinde Açısal CLI kullanın
  2. Hemen kod tanımlarına atlamak ve aradığınız kodu veya dosyaları kolayca bulabilmek için pro gibi dolaşın
  3. Açısal projenizi derlemeden daha iyi kod tamamlama ve hata denetimi almak için Açısal Dil Servisi'nin avantajlarından yararlanın
  4. WebStorm'un tüm kodunuzu proje ayarlarınıza göre biçimlendirmesini sağlamak için kodunuzu otomatik olarak biçimlendirin
  5. İthalatlarınızı , kullanılmayan tüm ithalatların kaldırılmasını ve oluşturulan paket boyutunuzun optimum kalmasını sağlamak için optimize edin

Sonraki bölümde, Todd Semalt favori püf noktalarını paylaşıyor - kontrol etmeyi unutmayın!

March 1, 2018