İnceleme: En iyi 6 JavaScript IDE'si

JavaScript, günümüzde birçok farklı türde uygulama için kullanılmaktadır. Çoğu zaman JavaScript, web ön uçları oluşturmak için HTML5 ve CSS ile çalışır. Ancak JavaScript, mobil uygulamaların oluşturulmasına da yardımcı olur ve Node.js sunucuları biçiminde arka planda önemli bir yer buldu. Neyse ki hem editörler hem de IDE'ler olan JavaScript geliştirme araçları yeni zorlukların üstesinden gelmek için yükseliyor.

Neden bir editör yerine bir IDE kullanmalı? Ana neden, bir IDE'nin hata ayıklaması ve bazen kodunuzun profilini çıkarmasıdır. IDE'ler ayrıca, sürüm kontrolü için Git, GitHub, Mercurial, Subversion ve Perforce gibi sistemlerle entegre olan ALM sistemleri için desteğe sahiptir. Ancak daha fazla editör bu sistemlere kancalar ekledikçe, ALM desteği daha az farklılaşıyor.

JavaScript Geliştirme Araçları ile Eclipse 2018

Java Swing'in yeni ve heyecan verici olduğu eski günlerde, Java geliştirme için Eclipse kullanmaktan zevk aldım, ancak kısa süre sonra diğer Java IDE'lerine geçtim. Beş yıl önce, Eclipse ile bazı Android geliştirmeleri yaptığımda, bu deneyimi iyi buldum ama biraz zordu. 2014 yılında JavaScript geliştirme için JSDT ile Eclipse Luna'yı kullanmaya çalıştığımda, JSHint'i geçen geçerli kod için sürekli olarak yanlış pozitif hatalar gösteriyordu.

İ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.

Neyse ki, birkaç satıcı ve açık kaynaklı proje o zamandan beri tabağa çıktı. JavaScript Geliştirme Araçlarına sahip Eclipse 2018, iyi bir JavaScript düzenleyicisine ve Chrome tabanlı bir hata ayıklayıcıya sahiptir, ancak Angular tarafından kullanılan TypeScript veya React tarafından kullanılan ES6 ve JSX dosyaları hakkında bilgi sahibi değildir.

Eclipse her zaman büyük bir eklenti pazarından yararlanmıştır. TypeScript için ücretsiz TypeScript 1.0.0 eklentisini düşünün. Angular, TypeScript ve ES6 için ticari Angular IDE'yi (CodeMix tarafından, eski adıyla Webclipse) düşünün ve JSX dosyaları içeren React projeleri için açık kaynaklı TypeScript IDE'yi deneyin. Birden fazla eklerseniz, hangisinin TypeScript dosyalarını düzenlemesi gerektiği konusundaki anlaşmazlığını çözmeniz gerekir, ancak bu çok da önemli değil.

CodeMix araçları, Eclipse'e Visual Studio Code akıllıları ekleyerek faturalandırılır. Çoğu Eclipse eklentisinden farklı olarak, CodeMix'in Angular IDE'si ücretsiz değildir, ancak 45 günlük ücretsiz deneme süresi vardır. Visual Studio Code'un ücretsiz olduğu göz önüne alındığında, bunu Angular IDE için ödeme yapmadan önce düşünürdüm.

Ücretsiz; CodeMix tarafından açısal IDE, yılda 29 $ (Kişisel) veya 48 $ (Ticari) Platform: Windows, MacOS ve Linux.

ActiveState Komodo IDE

2001 yılında ilk piyasaya sürüldüğünden beri Komodo IDE'nin kullanıcısı ve hayranıyım. Visual Studio Code ve WebStorm gibi daha yeni ürünler bazı alanlarda onu geride bıraksa da, yine de iyi bir editör ve IDE.

Komodo IDE, gelişmiş JavaScript düzenleme, sözdizimi vurgulama, gezinme ve hata ayıklama sağlar, ancak JavaScript kod kontrolünü içermez. Bunun için JSHint'i her zaman bir kabukta çalıştırabilirsiniz.

Komodo düzinelerce programlama ve biçimlendirme dilini destekler. Yeniden düzenleme, hata ayıklama ve profil oluşturma dahil olmak üzere geniş programlama ve biçimlendirme dili desteğiyle Komodo IDE, açık kaynak dillerinde uçtan uca geliştirme için çok iyi bir seçimdir.

Komodo, kod zekası sağladığı tüm diller için bir kod yeniden düzenleme modülüne sahiptir: PHP, Perl, Python, Ruby, Tcl, JavaScript ve Node.js. Ne yazık ki, bu yaklaşımın "en az ortak payda" niteliği, değişkenleri ve sınıf üyelerini yeniden adlandırma ve kodu bir yönteme çıkarma yeteneklerini sınırlar. Yine de bunlar en kullanışlı durumlardan bazılarıdır.

Komodo IDE hem sütun düzenleme hem de çoklu seçime sahiptir. Bu, toplu düzenlemeler söz konusu olduğunda Sublime Text ve TextMate ile neredeyse eşitlik sağlar. Karşılaştırmayı yaptığımız sürece, Komodo daha çok bir IDE, Sublime Text ise çok daha hızlı. Ve performansı tartıştığımız sürece, Komodo'nun hızı, ekran çiziminde, aramada ve sözdizimi kontrolünde eski sürümlere kıyasla önemli ölçüde arttı.

Komodo IDE, çoğu rakip ürünün eksik olduğu birkaç özelliğe sahiptir. Birincisi, Ajax geri aramalarında hata ayıklamak için mükemmel olan HTTP Denetçisi. Diğeri, JavaScript, Perl, PHP, Python ve Ruby için normal ifadeler oluşturmanın ve test etmenin harika bir yolu olan Rx (normal ifade veya regex) araç takımıdır.

İşbirliği başka bir Komodo IDE farklılaştırıcısıdır - bunu kod için Google Dokümanlar olarak düşünün. Dosya grupları için oturumlar oluşturabilir, oturumlara ortak çalışan olarak kişi ekleyebilir, ardından aynı dosyalar üzerinde aynı anda neredeyse gerçek zamanlı senkronizasyonla birlikte çalışabilirsiniz.

İşbirliği, kaynak kod kontrolünün yerini almaz, ancak yararlı bir tamamlayıcıdır. Komodo IDE; CVS, Subversion, Perforce, Git, Mercurial ve Bazaar kullanarak kaynak kodu kontrolünü entegre eder. Yalnızca temel sürüm kontrol işlemleri desteklenir. Dallanma gibi gelişmiş işlemler, ayrı bir kaynak kodu kontrol istemcisi kullanılarak yapılmalıdır.

Komodo'nun kendi JavaScript belge biçimlendiricisi olmamasına rağmen, bu amaç için en iyi ücretsiz açık kaynaktan yararlanır. Kutunun dışında, JavaScript dosyaları için varsayılan biçimlendirici JS Beautifier'dır, ancak bir açılır menü aracılığıyla dokuz seçenek daha mevcuttur.

Komodo IDE, Chrome'da istemci tarafı JavaScript'te hata ayıklamayı destekler ve Node.js'de hem yerel hem de uzaktan hata ayıklayabilir. Ayrıca Perl, Python, PHP, Ruby, Tcl ve XSLT'de hata ayıklama yapar.

Komodo IDE, XML ve HTML belgelerini daraltılabilir ağaçlar olarak görüntülemenizi sağlayan bir DOM görüntüleyiciye sahiptir. Ayrıca ağacı filtrelemek için XPath aramaları yapmanızı sağlar.

Komodo'nun kod profili oluşturma ve birim test modülleri JavaScript'i desteklemez. Bununla birlikte, JavaScript ve Node.js kod taramayı, otomatik tamamlamayı ve çağrı ipuçlarını uygulayan Komodo'nun Kod İstihbaratı modülü tarafından desteklenir.

Komodo IDE, FTP, SFTP, FTPS veya SCP üzerinden dosya grupları yayınlayabilir. Komodo ayrıca dosyaları senkronize edebilir ve başkalarının değişikliklerinin üzerine yazmanıza neden olabilecek olası yayınlama çakışmalarını tespit edebilir.

Genel olarak, Komodo iyi bir JavaScript IDE'sidir ve iyi ama harika olmayan bir JavaScript editörüdür. Bununla birlikte, özellikle Perl, Python, PHP, Ruby, Tcl veya XSLT ile çalışıyorsanız ihtiyaçlarınızı iyi karşılayabilir.

Maliyet: 295 $ artı yükseltmeler ve destek için yıllık 87 $. Platform: Windows (7 veya üstü), MacOS (10.9 veya üstü), Linux.

Apache NetBeans

NetBeans, web projelerinde JavaScript, HTML5 ve CSS3 için çok iyi bir desteğe sahiptir ve JavaScript tabanlı mobil uygulamalar oluşturmak için Cordova / PhoneGap çerçevesini destekler. NetBeans bloktaki en hızlı IDE değil, ancak daha eksiksiz olanlardan biri. Ve tabii ki fiyat doğru: NetBeans, açık kaynak lisansı altında ücretsiz olarak mevcuttur.

NetBeans JavaScript düzenleyicisi, beklediğiniz gibi söz dizimi vurgulama, otomatik tamamlama ve kod katlama sağlar. JavaScript düzenleme özellikleri ayrıca PHP, JSP ve HTML dosyalarına gömülü JavaScript kodu için de çalışır. jQuery desteği, düzenleyiciye eklenir. NetBeans 8.2, Node.js ve Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha ve Selenium için yeni veya geliştirilmiş desteğe sahiptir.

Kod analizi, siz düzenlerken arka planda çalışır ve uyarılar ve ipuçları sağlar. Hata ayıklama, katıştırılmış WebKit tarayıcısında ve NetBeans Bağlayıcısı yüklü Chrome'da çalışır. Hata ayıklayıcı DOM, satır, olay ve XMLHttpRequest kesme noktalarını ayarlayabilir ve değişkenleri, saatleri ve çağrı yığınını görüntüler. Entegre bir tarayıcı günlüğü penceresi, tarayıcı istisnalarını, hatalarını ve uyarılarını görüntüler.

NetBeans, ücretsiz olarak indirebileceğiniz bir JAR (Java arşivi) dosyası olan JsTestDriver ile birim testini yapılandırabilir ve gerçekleştirebilir. Hizmetler penceresinde JsTestDriver'ı yapılandırırken JsTestDriver tarayıcılarından biri olarak Chrome'u NetBeans Bağlayıcısı ile belirtirseniz birim testlerinde hata ayıklama otomatik olarak etkinleştirilir.

Chrome'da NetBeans Bağlayıcısı ile bir web uygulamasında hata ayıklarken ve CSS'yi Chrome Geliştirici Araçlarından düzenlerken, değişiklikler NetBeans tarafından yakalanır ve CSS dosyalarına kaydedilir. Bununla birlikte, CSS dosyalarınız Less veya Sass stil sayfalarından oluşturulmuşsa, CSS dosyaları yalnızca derlenmiş çıktı olduğundan kaynak sayfayı manuel olarak güncellemeniz gerekir.

Gömülü WebKit tarayıcısında ve NetBeans Bağlayıcısı yüklü Chrome'da, REST iletişimleri için istek başlıklarını, yanıtları ve çağrı yığınlarını görüntülemek için NetBeans ağ izleyicisini kullanabilirsiniz. WebSocket iletişimleri için hem başlıklar hem de metin çerçeveleri görüntülenir. Genel olarak, NetBeans, Chrome ile Firebug ile Firefox'ta elde ettiğinizden biraz daha iyi bir hata ayıklama deneyimi sağlar.

NetBeans, kaynak kodu kontrolünü Git, Subversion, Mercurial ve CVS ile entegre eder. Git desteği, bir grafik Diff görüntüleyici ve IDE içindeki bir raf sistemi ile artırılır. NetBeans, dosyaların Git durumunu renk kodluyor, her dosya için revizyon geçmişini görüntülemenizi sağlıyor ve sürüm kontrollü dosyaların her satırı için revizyon ve yazar bilgilerini gösteriyor. NetBeans, Subversion, Mercurial ve CVS ile benzer entegrasyonlara sahiptir, ancak yalnızca Git'i test ettim.

NetBeans, sorun izlemeyi Jira ve Bugzilla ile entegre eder. NetBeans görev penceresinde, kayıtlı görev havuzunuzdaki görevleri arayabilir, aramaları kaydedebilir, görevleri güncelleyebilir ve görevleri çözebilirsiniz. NetBeans ayrıca Kenai altyapısını kullanan siteler için ekip sunucusu entegrasyonuna sahiptir.

Belirleyebildiğim kadarıyla, NetBeans herhangi bir JavaScript profilinden yoksun, ancak Java uygulamaları ve EJB modüllerinin profilini oluşturabilir. NetBeans, Java ve PHP'yi yeniden düzenleyebilirken, JavaScript'i yeniden düzenleyemez.

Genel olarak, NetBeans, özellikle sunucuda Java, PHP veya C ++ geliştirme yapıyorsanız, istemci tarafı JavaScript, HTML5 ve CSS3 geliştirme için iyi bir rakiptir. WebStorm için bütçeniz yoksa ve Microsoft'tan hoşlanmıyorsanız, aceleniz olmadığı sürece NetBeans'in işi yaptığını göreceksiniz.

Ücretsiz. Platform: Windows, Solaris, MacOS, Linux. 

Microsoft Visual Studio 2017

Visual Studio 2017 hakkındaki tam incelememde, yalnızca JavaScript'e birkaç referansla ürünü bir bütün olarak tartıştım. Burada vurguyu tersine çevireceğim.

Genel olarak, Visual Studio 2017 bir JavaScript IDE'si kadar iyi hizmet verir, ancak daha iyi bir .Net IDE'dir ve JavaScript için WebStorm kadar iyi değildir. Aynı zamanda bir JavaScript editörü olarak çok iyi hizmet verirken, daha iyi bir C # editörüdür ve JavaScript için Sublime Text kadar iyi veya hızlı değildir.

Aşağıdaki ekran görüntüsünde görebileceğiniz gibi, Visual Studio 2017 JavaScript sözdizimi renklendirme ve kod katlama ile iyi bir iş çıkarıyor. Ayrıca JavaScript kod gezintisi ile iyi bir iş çıkarır: Bir işleve veya üye adına sağ tıklayın ve kolayca tanıma atlayabilir veya tüm referansları bulabilirsiniz. Tanıma bakmayı bitirdiğinizde, bulunduğunuz yere geri dönmek için arayüzün üst kısmındaki geri okuna basabilirsiniz.

Parçacıklar ekleyebilir ve seçiminizi HTML veya dize değişkenlerinin URL kodlaması gibi uygun kodla çevreleyebilirsiniz. JavaScript, HTML ve CSS'nin yanı sıra, Markdown dosyalarını düzenleyebilir ve oluşturulmuş Markdown'u görebilir ve TypeScript ile çalışabilirsiniz.

Ek olarak, tabii ki herhangi bir .Net dilinde, C ++ 'da ve Python'da kod yazabilirsiniz. Uzun süredir Visual Studio'da olduğu gibi, veritabanlarıyla doğrudan IDE'den çalışabilirsiniz. Visual Studio, özellikle SQL Server veritabanlarıyla çalışırken güçlüdür. Geliştirici olarak yapmak isteyeceğiniz veritabanı işlemlerinin çoğu için SQL Server Management Studio yerine Visual Studio kullanmaktan kurtulabilirsiniz.

Visual Studio 2017, mobil cihazlardaki ve öykünücülerdeki tarayıcılar da dahil olmak üzere hemen hemen her tarayıcıda hata ayıklamayı destekler. Aynı zamanda kendine ait iki tarayıcısı vardır: Internet Explorer'ın bir sürümü olan (sürpriz!) Düz dahili web tarayıcısı ve size tüm kaynaklar ve stillerle birlikte işlenmiş sayfayı gösteren Sayfa Denetçisi. Sayfa Denetçisi, bir sayfa için kendisini ayarlamak için potansiyel olarak zaman alıcı, tersine mühendislik birçok şey yapsa da, içeri girdikten sonra Visual Studio, tarayıcı ve tarayıcının geliştirici araçlarını karıştırmak zorunda kalmadan orada kalabilirsiniz. .

Yeterli bellek ve CPU gücü verirseniz, Visual Studio 2017'nin performansı genellikle oldukça iyidir, ancak önemli kaynaklar gerektirme eğilimindedir. Visual Studio 2017, uygulamalar için harika performans tanılamalarına sahiptir, ancak genel olarak bunlar, genellikle bir tarayıcının derinliklerinde çalışan sıradan JavaScript kodu için pek kullanışlı değildir. Visual Studio'nun belirli JavaScript işlevi zamanlaması, HTML kullanıcı arabirimi duyarlılığı ve JavaScript bellek araçları vardır, ancak bunlar yalnızca JavaScript tabanlı Evrensel Windows Platformu projeleri için geçerlidir, JavaScript kullanan web projeleri için geçerli değildir.

Visual Studio 2017, mükemmel Node.js uygulama düzenleme, IntelliSense, profil oluşturma, NPM entegrasyonu, TypeScript desteği, yerel ve uzaktan hata ayıklama (Windows, MacOS, Linux) ve Azure Web Apps ve Azure Bulut Hizmetlerinde hata ayıklamayı içerir. Ayrıca CSS, HTML, JavaScript, TypeScript, CoffeeScript ve Less desteği vardır. Bu, yazarken JSHint'i çalıştırmayı, bir bağlam menüsünden JavaScript dosyalarını küçültmenizi ve kaydederken CoffeeScript dosyalarını otomatik olarak derlemeyi, oluşturulan JavaScript'in yan yana önizlemesini göstermeyi içerir.