Her Web Geliştiricisi İçin Temel Atom Paketleri


Kodlamak için kullanacağınız editörü seçmek basit bir karar değildir. Neyse ki, günümüzde birçok alternatifiniz var.

Java geliştiricisi olarak başladığımda her zaman bir Eclipse hayranı olduğumu söylemeliyim. Pek çok sistem kaynağını tüketen ağır bir araç olduğu için birçoğunuzun bundan nefret ettiğini biliyorum. Ancak IMHO, sunduğu tüm işlevleri ve programlama yardımcıları bu sorunları açıkça telafi ediyor.

Genel olarak web geliştirmeye ve özellikle WordPress eklenti geliştirmeye atladıktan sonra, Eclipse'e alternatifler aramak için biraz zaman harcadım. Sublime'ı bir süre denedim, ancak her güncellemede sorunsuz çalışan bir kurulumu sürdürmekte çok zorlandım. PHPStorm'u da kullandım ve gerçek şu ki, Eclipse'e en yakın alternatif olarak bulduğum deneyim iyiydi. Ama ne yazık ki, Mac OS X için kullanıcı arayüzü beni ikna etmedi…

Sonunda Atom'u denedim ve bundan oldukça memnun olduğumu söylemeliyim! Aslında, Nelio Content'in Amazon'un bulutunda çalışan sunucu tarafındaki tüm Node.js kodu da dahil olmak üzere, Nelio Content eklentimizin geliştirilmesine tüm katkılarım bu editörden yapılmıştır.

Atom'un ekran görüntüsü.
Atom'un ekran görüntüsü.

Atom'u bilmiyorsanız, web sitesini ziyaret etmenizi ve bir göz atmanızı tavsiye ederim. Benim bakış açıma göre, bugün bir metin düzenleyicide bulabileceğiniz en iyi paket yöneticisine sahip. Ve bugüne kadar Atom bana hiç baş ağrısı vermedi – sadece işe yarıyor. Ve paketlerden bahsetmişken, burada benim geliştirmelerimde kurduğum ve kullandığım en ilginçleri içeren bir liste var. Onları gözden geçirelim!

En Çok Tavsiye Edilen Atom Paketleri

Unutma, bunlar benim için en faydalı paketler – belki daha çok sevdiğin veya sana daha iyi hizmet eden başkalarını bulacaksın. Her neyse, eminim çoğunu da faydalı bulacaksınız.

dosya simgeleri

Bu basit paket, Atom'da sahip olduğumuz dosyalara belirli dosya türlerine göre simgeler ve renkler ekler, böylece onları daha kolay tanımlayabiliriz.

Dosya simgeleri eklentisinin dosya türlerini tanımlamak için kullandığı simgeler.
Dosya simgeleri paketinin dosya türlerini tanımlamak için kullandığı simgeler.

Bir bakışta önünüzdeki dosyanın türünü bileceksiniz. Aptalca görünüyor, ancak bir kez denediğinizde onu kullanmayı bırakamazsınız.

mini harita

Bir programcıysanız, muhtemelen kendinizi çok uzun dosyaları düzenlerken bulacaksınız. Minimap ile, kodun sağ tarafında dosyanın içeriğinin bir temsilini görebilirsiniz. Bu şekilde, bağlamı kaybetmeden dosyada nerede olduğunuzu bir bakışta göreceksiniz.

Koddaki değişiklikleri vurgulayarak sağ taraftaki mini haritaya bakın.
Koddaki değişiklikleri vurgulayarak sağ taraftaki mini haritaya bakın.

Ve buradaki en iyi şey, bunu mini haritada değişiklik yaptığınız yerleri işaretleyen minimap-git-diff paketiyle tamamlayabilmenizdir.

pigmentler

Bu paket, dosyalarınızda bulduğu renkleri size gösterir. Bu, özellikle CSS kurallarını düzenlerken kullanışlıdır:

Atom için pigmentleri de kullanın.
Atom için pigmentlerin kullanım örneği.

renk seçici

Bu paket ile CSS stilinize eklemek istediğiniz rengi kolayca seçebilirsiniz. İhtiyaçlarınıza en uygun rengi görsel olarak seçeceğiniz bir renk seçiciyi açmak için sağ tıklayın ve “Renk Seçici”yi seçin. Önceki paket için en iyi arkadaştır.

Renk seçici de renk seçici.
Renk seçici paketiyle açılan renk seçici.

vurgu seçili

Bu paket, (şaşırtıcı bir şekilde) varsayılan olarak Atom'un çekirdeğinde bulunmayan bir işlevsellik ekler. Düzenleyicide bir kelimeye çift tıklayın ve Atom o kelimeyi ve dosyanın geri kalanındaki diğer oluşumları vurgulayacaktır.

Funcionamiento del eklentisi vurgulandı.
Vurgulu seçili paketin nasıl çalıştığına bakın.

Bir geliştiriciyseniz, onu yüklemek ve kodda değişkenlerin veya işlevlerin nerede göründüğünü görmek harika.

git-tanım

En çok özlediğim bir Eclipse işlevi, doğrudan tanımına atlayabilmeniz için bir işleve, nesneye veya sınıfa CTRL+click . Mükemmel olmasa da, Atom'da bulduğum en iyi çözüm bu paket—her gün kodumu atlamak için kullanıyorum!

Navegacion giriş arşivi medyante el eklentisi git-tanım.
Goto-definition paketini kullanarak kod dosyaları arasında gezinme.

İmleci aramak istediğiniz şeyin (örneğin bir işlevin adı) üzerine getirmeniz ve Alt+Cmd+Enter yapmanız gerekir. Bu sizi ya adı geçen işlevin tanımına götürecek ya da nereye atlamak istediğinize karar verebilmeniz için projedeki tüm oluşumlarıyla birlikte kayan bir iletişim kutusu açacaktır.

git artı

Bu paket Git sürüm kontrolünü Atom düzenleyicinizin içine entegre eder. Bu şekilde Git ile yaptığınız her şeyi terminal olmadan terminalden yapabilirsiniz.

Git-plus tr Atom'un Funcionamiento'su.
Atom'da git-plus paketi.

Eskiden çok kullanırdım ama son zamanlarda terminal muadili kullanıyorum. Bu paketi Atom'da kullanmak yerine Git ile değişiklikleri doğrudan komut satırından yönetme konusunda daha rahatım, ancak gelecekte (ikinci) deneyebilirim).


git-zaman makinesi

Ayrı bıraktığım ama yine de kurduğum başka bir paket git-time-machine.

Git-zaman makinesinin işlevi.
git-time-machine paketini kullanan değişiklikleri gösteren zaman çizelgesi.

Git tarafından kontrol edilen bir proje içindeki herhangi bir dosya verildiğinde, yaptığınız değişiklikleri görmek için zamanda geriye gidebilirsiniz. Değişiklikleri gösteren zaman çizelgesiyle birlikte yatay bir çubuk içerir. Kodunuzda eski değişiklikleri görmek istediğinizde çok kullanışlıdır.

birleştirme-çatışmaları

Git'i düzenli olarak kullandığınızda ve diğer geliştiricilerle çalıştığınızda, muhtemelen kendinizi kodunuzun HEAD ile çeliştiği durumlarda bulmuşsunuzdur.

Atomda birleştirme çatışmalarının işlevi.
Atom'da paket birleştirme çakışmaları.

Bu çakışmaları düzeltmek karmaşıktır ve değişikliklerinizi düzeltene kadar yükleyemezsiniz. Neyse ki, birleştirme çakışmaları paketi bu görevde size yardım sağlayarak süreci çok daha görsel ve basit hale getiriyor. Denemek için tereddüt etmeyin.

yapılacaklar

Bahse girerim kodunuz, gelecekte iyileştirilmesi veya ele alınması gereken şeylere işaret eden çok sayıda yorumunuz vardır. Ama onlara asla hitap etmiyorsun çünkü onları unutuyorsun. Neyse ki, Atom'da TODO , FIXME vb. kelimelerini içeren bulduğu tüm yorumlarla birlikte bir panel açan todo-show paketini yükleyebilirsiniz.

TODO, FIXME, vb. etiketli tüm yorumları içeren panel.
TODO, FIXME, vb. etiketli tüm yorumları içeren panel.

Bu şekilde, kodunuzu halka sunmadan önce her zaman hızlıca gözden geçirebilir ve düzeltmeyi bekleyen bir şey bırakıp bırakmadığınızı görebilirsiniz.

linter

Bir Java geliştiricisi olarak, Eclipse'in benden daha akıllı olduğu her zamanı sevdim ve kod programlarken tespit ettiği hataları vurguladım. Hataları minimum ifadeye indirgeyen inanılmaz bir işlevsellik.

Atom'da benim için en iyi olan eşdeğer linter. Düzenleyicinin kendisinde hataların kontrolünü ve görselleştirilmesini ekleyen bir pakettir. Ve her şeyi algılamasa da bana çok yardımcı oluyor.

Atomdaki hataların yeniden kontrol edilmesi.
Atom'da linter ile vurgulama ve hata kontrolü.

Bu temel linter paketine ek olarak, kurulumum Atom için aşağıdaki linter uzantılarını da içeriyor:

  • linter-alex: Daha iyi yazdığınızı kontrol eder. Yorumlarınızda işe yarar.
  • linter-csslint: CSS dosyalarında hata algılama.
  • linter-jscs: JavaScript dosyalarında hata algılama.
  • linter-jsonlint: JSON dosyalarında hata algılama.
  • linter-php: PHP dosyalarında hata tespiti.
  • linter-phpcs: PHP_CodeSniffer kullanarak PHP dosyalarında hata tespiti ( WordPress stil kılavuzlarını takip etmek yararlıdır).
  • linter-shellcheck: SHELL betiklerinde hata tespiti.
  • linter-swagger: Swagger dosyalarında hata algılama (API'leri tanımlamak için kullanılır).
  • linter-write-good: İngilizce metinler yazarken hata algılama.
  • linter-xmllint: XML dosyalarında hata algılama.
  • minimap-linter: mini haritada linter tarafından algılanan hataları vurgular.

atom güzelleştirmek

Bu paket, girintinin doğru olup olmadığını kontrol etmekten sorumlu olduğu için dosyalarınızın daha güzel ve daha okunaklı görünmesini sağlayacaktır. Yani kod satırlarının iyi sıralandığını ve doğru yerden başladığını kontrol eder. İç içe geçmiş birden çok döngüye veya diğer işlevleri çağıran işlevlere sahip dosyalarda stil kılavuzlarını takip etmek için özellikle yararlıdır. Ayrıca bugün kodlamak için kullanabileceğiniz dillerin çoğunu da destekler.

atom terimleri

Son olarak, Atom gibi editörlerde bugün düzgün bir şekilde çözülmeyen bir başka işlev de otomatik tamamlamadır. Bir programcı olarak sizi daha verimli hale getirmenin yanı sıra, iyi bir otomatik tamamlama işlevi, kodunuzu yazarken hataları önleyecektir. Benim durumumda, genellikle Atom'da yazdığım kodun çoğu JavaScript'tir, bu yüzden otomatik tamamlamayı yöneten atom-ternjs paketini kurdum. Mükemmel değil, ama hiç yoktan iyidir?

Bonus: atom-2048

İşten bir süreliğine ara vermek istiyorsanız, popüler oyun 2048'i editör içinde oynamanıza izin veren bir paket burada mı?

Jugando al 2048 desde el propio Atom. Kusura bakmayın!
2048'i Atom'un içinden oynamak. Patronunun seni yakalamasına izin verme!

Son açıklamalar

Atom editörü bugün benim favori kod editörüm. Kullanabileceğiniz çok sayıda paketiniz var ve bunlar oldukça kararlı. Ancak, her zaman geliştirilebilecek şeyler vardır. Özellikle, bir dosya içinde tanımlanmış işlevlerin listesini içeren bir panele sahip olma olasılığını hala özlüyorum. Bu Eclipse'den ayrıldığımdan beri özlediğim bir şey ve henüz onu iyi çözen bir editör bulamadım. Geçenlerde Atom için "çalışan" bir paket buldum, ancak kalitesi korkunç.

Siz de Atom kullanıyorsanız ve bazı paketleri unuttuğumu düşünüyorsanız, bana bir yorum bırakın. Listeyi birlikte tamamlayalım!

Atom tarafından öne çıkan görsel.

Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.

Check Also

Divi's Theme Builder ile Özel Global Başlık Nasıl Oluşturulur

Artık Tema Oluşturucu burada olduğuna göre, web sitenizi A'dan Z'ye kurmanıza yardımcı olacak yeni eğitimlere dalmak için sabırsızlanıyoruz. Buna Divi'nin yerleşik seçeneğini kullanarak özel başlıklar oluşturma da dahildir. Bu eğitimde Divi's Theme Builder'ı kullanarak global bir başlık oluşturmaya odaklanacağız. Bu sayfaya veya gönderiye farklı bir başlık atamadıysanız, web sitenizin her yerinde genel bir başlık görünecektir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir