İnceleme: En iyi 10 JavaScript düzenleyicisi

JavaScript programcılarının aralarından seçim yapabilecekleri pek çok iyi aracı vardır — neredeyse izlenemeyecek kadar çok araç vardır. Bu makalede, JavaScript, HTML5 ve CSS ile geliştirme ve Markdown ile belgeleme için iyi desteği olan 10 metin editöründen bahsedeceğim. Neden bir IDE yerine JavaScript programlama için bir düzenleyici kullanmalı? Tek kelimeyle: hız.

Düzenleyiciler ve IDE'ler arasındaki temel fark, IDE'lerin kodunuzda hata ayıklayabilmesi ve bazen profilinin çıkarılabilmesi ve IDE'lerin uygulama yaşam döngüsü yönetimi (ALM) sistemleri için desteğe sahip olmasıdır. Burada tartıştığımız editörlerin çoğu, en az bir sürüm kontrol sistemini, genellikle Git'i desteklemektedir, bu nedenle kriter, IDE'ler ve editörler arasında eskisinden daha az farklılaştırıcıdır.

Sublime Text ve Visual Studio Code, JavaScript editörleri arasında en iyilerdir — kullanışlı düzenleme özellikleri kadar hızı için Sublime Text ve daha da iyi özellikler ve neredeyse aynı hız için Visual Studio Code. Parantezler üçüncü sırada yer alıyor. TextMate birkaç yıl önce listemde üst sıralarda yer alırken, yetenekleri yeni gelişmelere gerçekten ayak uyduramadı.

Büyük olasılıkla, tercih ettiğiniz JavaScript düzenleyicinizi Sublime Text, Visual Studio Code veya Brackets içinde bulacaksınız. Ancak diğer bazı araçlar - Atom, BBEdit, Komodo Edit, Notepad ++, Emacs ve Vim - hepsinin de önerecek bir şeyleri var. Eldeki göreve bağlı olarak, bunlardan herhangi birini etrafta bulundurmak için kullanışlı bulabilirsiniz.

İlgili video: JavaScript nedir? Yaratıcı Brendan Eich açıklıyor

JavaScript programlama dilinin yaratıcısı Brendan Eich, dilin nasıl kullanıldığını ve kullanım kolaylığı nedeniyle programcılar arasında neden hala favori olduğunu açıklıyor.

Seçenekleri gözden geçirip sonunda karşılaştıralım.

Yüce metin

Işık hızında çalışan esnek, güçlü, genişletilebilir bir programlama metin düzenleyicisi istiyorsanız ve kod denetimi, hata ayıklama ve dağıtım için diğer pencerelere geçmeyi düşünmüyorsanız, Sublime Text'ten başkasına bakmayın.

Hızın yanı sıra, Sublime Text'in birçok önemli gücü, aralarında JavaScript, HTML ve CSS'nin de bulunduğu 70'den fazla dosya türünü destekler; neredeyse anında gezinme ve anında proje değiştirme; sütun seçimleri dahil (dosyanın dikdörtgen bir alanını seçin) birden çok seçim (aynı anda bir dizi değişiklik yapın); çoklu pencere (tüm monitörlerinizi kullanın) ve bölünmüş pencereler (ekran alanınızdan yararlanın); basit JSON dosyalarıyla tam özelleştirme; Python tabanlı bir eklenti API'si; ve birleşik, aranabilir bir komut paleti.

Diğer düzenleyicilerden gelen programcılar için Sublime Text, TextMate paketlerini (komutlar hariç) ve Vi / Vim emülasyonunu destekler. Resmi olmayan Sublime Text dokümantasyonu, Emacs kullanıcıları ( örneğin moi ) hakkında aşağılayıcı (ve yanlış) açıklamalar yapıyor , ancak bunları görmezden geleceğim. Resmi olmayan Sublime Text belgeleri neden var? Bir kere, resmi belgeler eksiktir - çok daha az.

Daha önce "neredeyse anında navigasyon" dediğimde, bunu kastetmiştim. Örneğin, ekrandaki mevcut konumdan getResponseHeaderajax.js'deki tanımına atlamak için, Mac'te Command-P veya PC'de Ctrl-P ajyazabilir, ardından ajax.js'de geçici bir görünüm açabilir ve sonra @grhve getResponseHeaderSeçili sekmeyi açmak için Enter'a basın . Sublime Text, yazmama ayak uydurabiliyor. Brief ve Kedit gibi en iyi eski DOS editörlerinden bazıları kadar duyarlıdır.

Seçtikten sonra  getResponseHeader, bir Mac'te Shift-Komut-F veya PC'de Shift-Ctrl-F ve ardından Enter tuşlarına basarak işlevin tüm kullanımlarını bağlam içinde bulabilirim. Yeni bir sekme, bana her beş satırlık ön bilgide arama terimi kutucuğu içeren arama sonuçlarını gösterecek. Kutulu metne çift tıklandığında tüm dosya içeriği yeni bir sekmede açılır.

Soldaki Klasörler kenar çubuğunda bir dosya adına tıklandığında, dosyanın içeriğini gösteren geçici bir sekme açılır. Farklı bir dosyaya tıklamak o sekmenin yerini alır. Burada yine Sublime Text, yazmama ve tıklamama ayak uydurabiliyor. Benzer şekilde, sayfanın sağ üst tarafındaki küçültülmüş boyutlu gezinme, bir dosya içinde kaydırma ek yükü olmadan neredeyse anında hareket etmemi sağlıyor. Keşke Microsoft Word de duyarlı olsaydı.

Birden çok seçim ve sütun seçimi, normal ifadeler gerektiren rahatsız edici düzenleme türlerinin hızlı çalışmasını sağlar. Bir kelime listesini, her kelimenin çift tırnak içine alındığı ve alıntılanan her kelimenin bir sonrakinden virgülle ayrıldığı bir JSON yapısına dönüştürmeniz mi gerekiyor? Listede kaç kelimeniz olursa olsun, Sublime Text'de yaklaşık sekiz tuş vuruşu gerektirir.

Windows geliştirme kutumda iki geniş monitör kullanıyorum. MacBook'umda Retina ekran ve bir Thunderbolt ekran kullanıyorum. Bir ekranda düzenleme yapmadığım ve diğerinde hata ayıklamadığım sürece, genellikle aynı anda birçok farklı kaynak dosyası ve farklı görünümleri kaynak dosyalarda görmek isterim. Sublime Text, birden çok pencereyi, bölünmüş pencereyi, proje başına birden çok çalışma alanını, birden çok görünümü ve görünümler içeren birden çok bölmeyi destekler. İstediğimde tüm ekran alanımı kullanmak ve hata ayıklama ve test için yer açmam gerektiğinde konsolide etmek oldukça basit.

Sublime Text ile ilgili her şeyi özelleştirebilirsiniz: renk şeması, metin yazı tipi, genel tuş bağlamaları, sekme durakları, dosyaya özel tuş bağlamaları ve parçacıklar ve hatta sözdizimi vurgulama kuralları. Tercihler JSON dosyaları olarak kodlanmıştır. Dile özgü tanımlar XML tercih dosyalarıdır. Sublime Text etrafında Sublime Text paketleri ve eklentileri oluşturan ve sürdüren aktif bir topluluk var. Başlangıçta Sublime Text'in eksik olduğunu düşündüğüm birçok özellik - JSLint ve JSHint arayüzleri, JsFormat, JsMinify, PrettyJSON ve Git desteği dahil - Paket Yükleyici kullanılarak toplulukta kullanılabilir hale geldi.

Sublime Text'in harika performansının nedenlerinden biri, sıkı kodlanmış olmasıdır. Diğer bir neden de Sublime Text'in bir IDE olmaması ve bir IDE'nin muhasebe ek yüküne ihtiyaç duymamasıdır.

Bir geliştiricinin bakış açısından, bu aldatıcı bir değiş tokuş. "Kırmızı, yeşil, yeniden düzenleme" gibi sıkı bir test odaklı geliştirme döngüsündeyseniz, düzenleme, test etme, yeniden düzenleme ve izleme kodu kapsamı için ayarlanmış bir IDE size en çok yardımcı olacaktır. Öte yandan, kod incelemeleri veya büyük düzenlemeler yapıyorsanız, bulabileceğiniz en hızlı, en verimli düzenleyiciyi isteyeceksiniz. Bu düzenleyici Sublime Text olabilir.

Maliyet: Sınırsız ücretsiz deneme; İşletme veya kişisel lisans için kullanıcı başına 70 ABD doları. Platformlar: Windows, MacOS ve Linux.

Visual Studio Kodu

Visual Studio Code, Microsoft'tan ücretsiz bir hafif düzenleyici ve IDE'dir. Açık kaynak Atom Electron kabuğu ile karıştırılmış Visual Studio bileşenlerine sahiptir ve C # ile ASP.Net Core geliştirme ve TypeScript ve JavaScript ile Node.js geliştirme için mükemmel destek sağlar. Microsoft'un yalnızca Windows üzerinde Visual Studio'yu destekleme şeklindeki tarihsel kalıbını bozan Visual Studio Code, MacOS ve Linux üzerinde de çalışır. Aşağıdaki ekran görüntüsü MacOS'ta alınmıştır.

Visual Studio Code, TypeScript derleyicisinin ve Salsa motorunun eklenmesi sayesinde inanılmaz derecede iyi JavaScript kod tamamlama özelliğine sahiptir. Visual Studio Code, türleri çıkarmak ve bir sembol tablosu oluşturmak için JavaScript kodunuzu arka planda TypeScript derleyicisine gönderir. hasOwnProperty Yöntemle ilgili bilgileri gösteren ekran görüntüsünün altına yakın bir kutuda sonuçları görebilirsiniz  .

Aynı sembol tablosu, IntelliSense'in size bir ifadenin yazılması boyunca kod tamamlama için harika açılır seçenek listeleri sunmasını sağlar. Otomatik parantez kapatma, otomatik sözcük tamamlama seçenekleri, yazdıktan sonra otomatik yöntem listeleri .ve bir yöntem içinde otomatik parametre listeleri alırsınız . D.ts dosyalarına referanslar ekleyerek IntelliSense'i geliştirebilirsiniz DefinitelyTypedve Visual Studio Code, __dirnameNode.js yerleşik değişkeni olan kullanımı gibi yaygın sorunları algıladığında  bunu sizin için sunacaktır  .

Git desteği çok iyi ve kullanımı oldukça basit. Visual Studio Code hata ayıklayıcı, Node.js geliştirme (ve ASP.Net geliştirme) için mükemmel bir hata ayıklama deneyimi sağlar. Visual Studio Code, HTML, CSS, Less, Sass ve JSON için çok iyi araçlara sahiptir ve bu, Internet Explorer F12 geliştirici araçlarını destekleyen aynı teknolojiye dayanmaktadır. Ek olarak, gulp ve  gibi harici görev koşucularla özelleştirilebilir entegrasyona sahiptir  jake.

Visual Studio Code, örneğin Angular ve React'i desteklemek için güçlü bir eklenti ekosistemi çekmiştir. Artık JavaScript ve TypeScript çerçeveleri ve kitaplıkları ile uygulama oluşturma hakkında eğitimler yazarken önerdiğim düzenleyicidir.

Maliyet: Ücretsiz açık kaynak. Platform: Windows, MacOS ve Linux.

Parantez

Brackets; JavaScript, HTML ve CSS'nin yanı sıra ilgili açık web teknolojileri için daha iyi araçlar sağlamak üzere oluşturulmuş, orijinal olarak Adobe'den ücretsiz bir açık kaynak düzenleyicidir. Parantezlerin kendisi JavaScript, HTML ve CSS ile yazılır ve geliştiriciler Parantez oluşturmak için Parantez kullanır. Yerleşik yeteneklere ek olarak, Brackets bir uzantı yöneticisine sahiptir ve ön uç geliştiricilerin kullandığı birçok dil ve araç için uzantılar mevcuttur. Parantezler Sublime Text veya TextMate kadar hızlı değildir, ancak web'den program içeriğini yüklemek veya güncellemek için duraklamalar dışında yine de oldukça hızlıdır.

Parantezler JavaScript, CSS, HTML ve Node.js için iyi bir desteğe sahiptir. Ayrıca, bir HTML ID (Hızlı Düzenleme) ile ilgili CSS'nin yerinde düzenlenmesi gibi hoş özelliklere sahiptir. Buna ek olarak, Brackets temiz bir kullanıcı arayüzü ve düzenlediğiniz web sayfaları için canlı bir önizleme sunar. Ücretsiz bir kod düzenleyici için çok iyi bir seçim.

Parantezler, açılı parantezler ve köşeli parantezlerin otomatik olarak kapatılması ve siz yazdıktan sonra jQuery yöntemleri dahil olmak üzere anahtar kelimeler, değişkenler ve yöntemler için otomatik açılır menülerle Parantez içindeki JavaScript otomatik tamamlama özelliği çok iyidir $. Parantezler Node.js hata ayıklayıcısını kontrol edebilir ve Node'u bir menü öğesinden yeniden başlatabilir. TypeScript ve JSX desteği, Bower entegrasyonu ve Git entegrasyonu gibi ek işlevler için uzantılar eklemek kolaydır.

Hızlı Düzenleme, Hızlı Belgeler, Hızlı Açma ve Canlı Önizleme, web uygulaması düzenlemeyi kolaylaştırmaya yardımcı olur ve kodladığınız veya tasarladığınız şeye odaklanmanızı sağlar. Olumsuz tarafı, bazı Brackets uzantılarının yapılandırılması zor olabilir, ancak Emacs paketleri veya Vim eklentileri kadar zor olmayabilir.

Maliyet: Ücretsiz açık kaynak. Platformlar: Windows, MacOS, Linux. 

Atom

Atom, GitHub uygulamasıyla entegre olan ve binlerce paket ve temaya sahip olan, Windows, MacOS ve Linux için GitHub'ın ücretsiz, açık kaynaklı, hacklenebilir bir programlama editörüdür. Birkaç topluluk paketi, artı temel paketler ve temalarla idare ediyorum.

Kökeni düşünüldüğünde, Atom kaynağının GitHub'da barındırılması şaşırtıcı değildir. CoffeeScript ile yazılmıştır ve Node.js ile entegre edilmiştir. Atom, bir web tarayıcısı yerine bir metin düzenleyici olarak tasarlanmış özel bir Chromium çeşididir; her Atom penceresi aslında yerel olarak oluşturulmuş bir web sayfasıdır. Atom ekibi Atom'da Atom geliştirir.

Atom kendini güncellemediğinde performansı oldukça iyidir. Bulanık bulucu, proje genelinde hızlı arama ve değiştirme, çoklu imleçler ve seçimler, çoklu bölmeler, parçacıklar, kod katlama ve TextMate gramerlerini ve temalarını içe aktarma özelliği ile kutudan çıkar çıkmaz tam özellikli. Atom iki komut satırı yardımcı programı kurabilir: Düzenleyiciyi bir kabuktan başlatmak için Atom ve Node.js için NPM ruhuna uygun olarak Atom paketlerini yönetmek için APM. GitHub'dan klonladığım depolara göz atarken kendimi Atom kullanırken buluyorum çünkü GitHub uygulaması bunu yapmak için bir bağlam menüsü öğesi içeriyor.

Maliyet: Ücretsiz açık kaynak. Platformlar: Windows, MacOS, Linux.

Komodo Düzenle

ActiveState'in Komodo IDE'nin ücretsiz azaltılmış işlevsellik sürümü olan Komodo Edit, oldukça iyi bir çoklu dil editörüdür. Bir editör olarak Komodo IDE hakkında söylemem gereken her şey (bkz. "İnceleme: En iyi 6 JavaScript IDE'si") Komodo Edit için geçerlidir.