Kodunuzu Daha Güzel Tutmak

Kod biçimlendirme önemsiz bir konu gibi görünebilir, ancak kodunuzun kalitesini ve doğruluğunu, sürümün nasıl kontrol edildiğini ve başkalarıyla nasıl işbirliği yaptığınızı etkileyebilecek bir şeydir. Bununla birlikte, her son küme ayracının nereye gittiğine dair ayrıntılarda boğulmak istemiyorsanız, sorunu açık kaynaklı araç Prettier'a aktarmayı deneyin.

Biçimlendirme Önemlidir

Yazılım geliştirme ekipleri tarih boyunca, maksimum hat uzunluğu veya bir korsenin hangi hatta gitmesi gerektiğini tartışarak sayısız saati boşa harcadı. Kişisel tercih ne derse desin, çoğu insan en az bir konuda hemfikirdir: kod biçimlendirme bir proje genelinde tutarlı olmalıdır.

Prettier, bunu başarmak için tasarlanmış bir araçtır. Ona biraz kod verin ve aynı kodu tutarlı bir şekilde biçimlendirilmiş olarak geri verecektir. Prettier, metin düzenleyici entegrasyonuna, bir komut satırı aracına ve çevrimiçi bir demoya sahiptir.

Doğru Dili Konuşmak

Öncelikle, Prettier'in tipik olarak çalıştığınız dil veya dillerle uyumlu olup olmadığını bilmek isteyeceksiniz. Prettier şu anda temel olarak ön uç web geliştirmeye adanmış bir dizi temel dil üzerine odaklanmıştır:

• JavaScript
• HTML
• CSS
• Sass
• Markdown
• YAML

Eklentiler aracılığıyla ek diller için açık uçlu destek de vardır.

Çevrimiçi Oyun Alanını Kullanarak Daha Güzel Deneyin

Prettier'ı yüklemeye çalışmadan önce, kontrol etmek isteyebilirsiniz. oyun alanı. Bir web arayüzü kullanarak, bazı örnek kodları yapıştırabilir ve Prettier'in onu nasıl dönüştüreceğini gözlemleyebilirsiniz. Bu, aracın gerçekte ne yaptığına dair bir izlenim edinmenin harika bir yoludur, ancak gereksinimleriniz daha hafifse, Prettier'ı kullanmak için birincil yönteminiz olarak da hareket edebilir.

Varsayılan olarak oyun alanı, biri solda girdiniz için, diğeri de Prettier’ın çıktısını gösteren sağda olmak üzere iki temel metin düzenleme paneli gibi görünmelidir. Başlangıçta bazı örnek kodlar göreceksiniz, ancak bunların hepsini kaldırabilir ve kendi kodunuzu yapıştırabilirsiniz.

Örneğin, aşağıdaki JavaScript’i girmeyi deneyin:

(işlev ()
{
window.alert ('tamam')
}())

Daha güzel onu şuna çevirmeli:

(işlev () {
window.alert ("tamam");
})();

Prettier'in yaptığı değişikliklerin varsayılan olarak şunları içerdiğine dikkat edin:

• Tek tırnaklı dizeleri çift tırnaklı dizelere dönüştürme
• Noktalı virgül ekleme
• Girintileri iki boşluğa dönüştürme

Sol altta, seçenekleri görüntülemenizi sağlayan bir düğme var. Önceki örnekte, sekme genişliğini ayarlamayı deneyin, --tek alıntı altında bayrak Yaygınveya geçiş yapmak - yarı yarıya altında bayrak JavaScript.

Seçenekleri yapılandırma

Prettier, kendi kendini "fikir sahibi" olarak tanımlanır, kasıtlı bir tasarım seçimi, özelliklerin kontrolünün basitlik ve tutarlılık için feda edildiği anlamına gelir. Kodunuzun her son biçimlendirme ayrıntısıyla meşgul olmak yerine, ayarlamanız ve sonra unutmanız için tasarlanmıştır. (Her son biçimlendirme ayrıntısı üzerinde çok daha hassas kontrole sahip bir alternatif için, eslint.)

Bununla birlikte, yazarlar, bazı kararların, kodun nasıl göründüğünün ötesinde işlevsel bir etkiye sahip olduğunun da farkındadır. Bazı seçenekler - bazıları eski amaçlar için dahil - kalır, bu nedenle Prettier'ı varsayılan durumunda kullansanız bile en azından ne yaptıklarını anlamalısınız.

Yönetmenin en iyi yolu Daha güzel seçenekler onları bir yapılandırma dosyasına kaydetmektir. Bunu organize etmenin birçok yolu vardır, ancak adında bir dosya oluşturarak başlayın. .prettierrc.json yerel proje dizininizde. Standart bir JSON nesnesinde desteklenen seçeneklerden herhangi birini içerebilir, ör.

{
"tabWidth": 8
}

Komut satırı veya desteklenen bir metin düzenleyici aracılığıyla çalıştırıyor olsanız da, aynı yapılandırma dosyası Prettier tarafından okunacaktır.

İplik veya npm kullanarak kurulum basit olmalıdır. İplik için:

$ iplik global daha güzel ekler

Ve npm için:

$ npm install --global güzel

Prettier'ı global olarak kurduktan sonra şunları yazabilmelisiniz:

$ güzel

Varsayılan olarak, aracın doğru şekilde yüklendiğini ve çalıştığını onaylayan bir yardım metni ekranı alırsınız.

Bir Dosyayı Temizleme

Bir dosyayı yeniden biçimlendirmek için aşağıdakine benzer bir komut kullanın:

$ prettier --write dosyaadı.js

Bu, genellikle en uygun yaklaşım olan orijinal dosyanın üzerine yazacaktır. Alternatif olarak, bir projedeki her dosyada daha güzel davranmak isteyebilirsiniz:

$ güzel - yaz.

Prettier, tanıdığı tüm dosyaları biçimlendirerek geçerli dizinin altındaki tüm dosyalarda çalışır.

Orijinal dosyayı değiştirmek yerine sonucu standart çıktı olarak da yazdırabilirsiniz; bu, çıktıyı farklı bir dosyaya kaydetmenize veya başka bir yere yönlendirmenize olanak tanır:

$ prettier test.js> test2.js

Bir Dosyayı Kontrol Etme

Prettier'in kodunuzun temizliği hakkında gerçekten herhangi bir değişiklik yapmadan rapor vermesi için, --Kontrol tek bir dosya adı veya çok sayıda bayrak:

$ güzel - işaretleyin.

Prettier’in yapılandırmasına göre, beklenen biçime uymayan her dosya için bir çıktı satırı alacaksınız:

Biçimlendirme kontrol ediliyor ...
[uyarı] .prettierrc
[uyarı] .prettierrc.json
[uyarı] Yukarıdaki dosyalarda bulunan kod stili sorunları. Prettier'ı çalıştırmayı unuttunuz mu?

Komut Satırı Seçenekleri

Prettier'in standart seçenekleri, gerekirse komut satırı seçenekleri olarak mevcuttur. İşte bunun nasıl olduğuna dair bir örnek --tek alıntı bayrak çıktıyı etkiler:

$ güzel tmp.js
function örneği () {
console.log ("merhaba, dünya");
}
$ güzel - tek-alıntı tmp.js
function örneği () {
console.log ('merhaba, dünya');
}

Yardım almak

Komut Satırı aracı, herhangi bir seçenek hakkında bilgilendirici yardım sağlar. --Yardım Edin bayrak:

$ güzel --help sondaki-virgül
--trailing-virgül 
Çok satırlı olduğunda mümkün olan her yerde son virgül yazdırın.
Geçerli seçenekler:
es5 ES5'te geçerli olduğunda sondaki virgül (nesneler, diziler vb.)
yok Sonda virgül yok.
Mümkün olan her yerde sondaki virgüller (işlev bağımsız değişkenleri dahil).
Varsayılan: es5

Bir Metin Düzenleyicinin Kullanılması

Prettier'ı kurduktan sonra, kullanmakta olduğunuz araç setine bağlı olarak onu çeşitli senaryolarda kullanabilirsiniz. Muhtemelen bir metin editörü kullanıyorsunuz. Prettier, popüler olanların çoğu için bağlamalara sahiptir, işte bunlardan üçünü nasıl ayarlayacağınız:

Yüce metin

JsPrettier Prettier'ı editörde kullanılabilir hale getiren bir Sublime Text eklentisidir. JsPrettier'i kurmanın birkaç farklı yolu olmasına rağmen, Paket Kontrol yöntemini kullanmanızı öneririz. Prettier'ı önceden yüklemiş olmanız, ardından Sublime Text’in Komut Paletini açmanız ve "Paket Kontrolü: Paketi Kur" seçeneğini seçmeniz gerekir:

Ardından "jsprettier" için arama yapın ve yüklemek için tıklayın:

JsPrettier kurulduktan sonra, biçimlendirmek için herhangi bir açık dosyaya sağ tıklayabilirsiniz. Ayrıca değerini de ayarlayabilirsiniz. auto_format_on_save -e doğru JsPrettier ayarlarında, JsPrettier'in uyumlu dosyaları Sublime Text'e kaydettiğinizde otomatik olarak temizlemesiyle sonuçlanacaktır.

Atom

Atom kurulumu, Sublime Text'e çok benzer: yüklemek için düzenleyicinin yerleşik paket yöneticisini kullanmanız yeterlidir güzel atom:

Kurulduktan sonra kullanım aşinadır: bir kısayol veya menü öğesi, bir dosyayı talep üzerine biçimlendirmenize izin verirken, bir Atom ayarı bir dosya kaydedildiğinde Prettier'ı otomatik olarak çalıştırmanıza izin verir.

Vim

Vim, yeni başlayanlar için uygun olmayan çok güçlü, komut satırı tabanlı bir düzenleyicidir. Vim ile daha güzel çalışmak uygun şekilde karmaşıktır, ancak yine de yalnızca birkaç adımdır:

mkdir -p ~ / .vim / pack / plugins / start
git klon https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-prettier

Git muhtemelen gerekli dosyaları indirmenin en kolay yoludur, ancak o başlangıç ​​dizinine vim-güzelleştirmenin herhangi bir yolu işi yapmalı.

Prettier kurulduktan sonra vi'de bir dosya kaydedildiğinde otomatik olarak çalışacaktır. Ayrıca herhangi bir zamanda manuel olarak da çalıştırılabilir. Daha güzel komut:

Bu, temizlenmiş bir dosya ile sonuçlanmalıdır:

Prettier'ı Projenize Entegre Edin

Prettier gibi bir kod formatlayıcı kullanmak, okunması daha kolay olan bir kod tabanını korumaya yardımcı olabilir. Ayrıca, kodlama sırasında hangi belirli stilin kullanılacağı konusundaki tartışmalardan kaçınmaya da yardımcı olabilir - sadece bu kararları Prettier'e dış kaynak olarak verin!

Son olarak, kodun projenizin havuzuna işlendiğinde her zaman temizlenmesini sağlamak için bir git kancası ayarlanabilir. Bireysel geliştiriciler kodlarını istedikleri gibi biçimlendirmekte özgür olabilirler, ancak merkezi kopya her zaman temiz ve tutarlı olacaktır.

nano vs. Vim: Karşılaştırıldığında En İyi Terminal Metin Düzenleyicileri

Linux için bir terminal metin düzenleyicisi mi arıyorsunuz? Ana seçim Vim ve nano arasındadır! Karşılaştırma yöntemleri aşağıda açıklanmıştır.

Yazar hakkında