Review: 6 JavaScript IDE terbaik

JavaScript digunakan untuk berbagai jenis aplikasi saat ini. Paling sering, JavaScript bekerja dengan HTML5 dan CSS untuk membangun front end web. Tetapi JavaScript juga membantu membangun aplikasi seluler, dan telah menemukan tempat penting di bagian belakang dalam bentuk server Node.js. Untungnya, alat pengembangan JavaScript — baik editor maupun IDE — meningkat untuk memenuhi tantangan baru.

Mengapa menggunakan IDE daripada editor? Alasan utamanya adalah IDE dapat men-debug dan terkadang membuat profil kode Anda. IDE juga memiliki dukungan untuk sistem ALM, terintegrasi dengan Git, GitHub, Mercurial, Subversion, dan Perforce untuk kontrol versi. Tetapi karena lebih banyak editor menambahkan kaitan ke sistem ini, dukungan ALM menjadi kurang menjadi pembeda.

Eclipse 2018 dengan Alat Pengembangan JavaScript

Kembali ke masa lalu ketika Java Swing masih baru dan menarik, saya menikmati menggunakan Eclipse untuk pengembangan Java, tetapi segera beralih ke Java IDE lainnya. Lima tahun lebih yang lalu, ketika saya melakukan beberapa pengembangan Android dengan Eclipse, saya menemukan pengalaman itu OK, tapi sempit. Ketika saya mencoba menggunakan Eclipse Luna dengan JSDT untuk pengembangan JavaScript pada tahun 2014, itu terus-menerus menampilkan kesalahan positif palsu untuk kode valid yang melewati JSHint.

Video terkait: Apa itu JavaScript? Pencipta Brendan Eich menjelaskan

Brendan Eich, pencipta bahasa pemrograman JavaScript, menjelaskan bagaimana bahasa tersebut digunakan, dan mengapa bahasa tersebut masih menjadi favorit di kalangan programmer karena kemudahan penggunaannya.

Untungnya, beberapa vendor dan proyek open source telah melangkah maju sejak saat itu. Eclipse 2018 dengan JavaScript Development Tools memiliki editor JavaScript yang layak dan debugger berbasis Chrome, tetapi tidak tahu tentang TypeScript, yang digunakan oleh Angular, atau tentang file ES6 dan JSX, yang digunakan oleh React.

Eclipse selalu menikmati pasar plugin yang sangat besar. Untuk TypeScript, pertimbangkan plugin TypeScript 1.0.0 gratis. Untuk Angular, TypeScript, dan ES6, pertimbangkan Angular IDE komersial (oleh CodeMix, sebelumnya Webclipse), dan untuk proyek React dengan file JSX coba IDE TypeScript sumber terbuka. Jika Anda menambahkan lebih dari satu, Anda harus menyelesaikan perselisihan mereka tentang mana yang harus mengedit file TypeScript, tetapi itu bukan masalah besar.

Alat CodeMix ditagih sebagai menambahkan kecerdasan Visual Studio Code ke Eclipse. Tidak seperti kebanyakan plugin Eclipse, Angular IDE by CodeMix tidak gratis, tetapi memiliki uji coba gratis selama 45 hari. Mengingat bahwa Visual Studio Code gratis, saya akan mempertimbangkannya sebelum membayar Angular IDE.

Gratis; Angular IDE oleh CodeMix, $ 29 (Pribadi) atau $ 48 (Komersial) per tahun. Platform: Windows, MacOS, dan Linux.

ActiveState Komodo IDE

Saya telah menjadi pengguna dan penggemar Komodo IDE sejak pertama kali diperkenalkan pada tahun 2001. Meskipun produk baru seperti Visual Studio Code dan WebStorm telah melampaui itu di beberapa area, ia masih merupakan editor dan IDE yang bagus.

Komodo IDE menyediakan pengeditan JavaScript tingkat lanjut, penyorotan sintaksis, navigasi, dan debugging, tetapi tidak termasuk pemeriksaan kode JavaScript. Untuk itu, Anda selalu dapat menjalankan JSHint di shell.

Komodo mendukung lusinan bahasa pemrograman dan markup. Dengan dukungan bahasa pemrograman dan markup yang luas, termasuk refactoring, debugging, dan profiling, Komodo IDE adalah pilihan yang sangat baik untuk pengembangan ujung ke ujung dalam bahasa open source.

Komodo memiliki modul pemfaktoran ulang kode untuk semua bahasa yang menyediakan kecerdasan kode: PHP, Perl, Python, Ruby, Tcl, JavaScript, dan Node.js. Sayangnya, sifat "penyebut yang paling tidak umum" dari pendekatan ini membatasi kemampuan untuk mengganti nama variabel dan anggota kelas, dan mengekstrak kode ke dalam metode. Namun demikian, ini adalah beberapa kasus yang paling berguna.

Komodo IDE memiliki pengeditan kolom dan banyak pilihan. Ini memberikan kesamaan yang hampir sama dengan Sublime Text dan TextMate sejauh pengeditan massal diperhatikan. Selama kami melakukan perbandingan, Komodo lebih merupakan IDE, sedangkan Sublime Text jauh lebih cepat. Dan selama kita membahas kinerja, kecepatan Komodo telah meningkat secara nyata dibandingkan dengan versi sebelumnya, dalam menggambar layar, pencarian, dan pemeriksaan sintaks.

Komodo IDE memiliki beberapa fitur yang tidak dimiliki oleh sebagian besar produk pesaing. Salah satunya adalah HTTP Inspector-nya, yang sangat bagus untuk men-debug callback Ajax. Yang lainnya adalah toolkit Rx (ekspresi reguler, atau regex), yang merupakan cara terbaik untuk membangun dan menguji ekspresi reguler untuk JavaScript, Perl, PHP, Python, dan Ruby.

Kolaborasi adalah pembeda lain dari Komodo IDE — anggap saja sebagai Google Dokumen untuk kode. Anda dapat membuat sesi untuk grup file, menambahkan kontak ke sesi sebagai kolaborator, kemudian bekerja bersama pada file yang sama pada waktu yang sama, dengan sinkronisasi hampir real-time.

Kolaborasi bukanlah pengganti kontrol kode sumber, tetapi ini adalah pelengkap yang berguna. Komodo IDE mengintegrasikan kontrol kode sumber menggunakan CVS, Subversion, Perforce, Git, Mercurial, dan Bazaar. Hanya operasi kontrol versi dasar yang didukung. Operasi lanjutan, seperti percabangan, harus dilakukan menggunakan klien kontrol kode sumber terpisah.

Meskipun Komodo tidak memiliki pemformat dokumen JavaScript sendiri, Komodo memanfaatkan open source gratis terbaik untuk tujuan ini. Di luar kotak, pemformat default untuk file JavaScript adalah JS Beautifier, tetapi sembilan opsi lainnya tersedia melalui menu drop-down.

Komodo IDE mendukung debugging JavaScript sisi klien di Chrome, dan dapat men-debug Node.js baik secara lokal maupun jarak jauh. Itu juga men-debug Perl, Python, PHP, Ruby, Tcl, dan XSLT.

Komodo IDE memiliki DOM viewer yang memungkinkan Anda melihat dokumen XML dan HTML sebagai pohon yang dapat dilipat. Ini juga memungkinkan Anda melakukan pencarian XPath untuk memfilter pohon.

Modul pembuatan profil kode dan pengujian unit Komodo tidak mendukung JavaScript. Namun, JavaScript dan Node.js keduanya didukung oleh modul Intelijen Kode Komodo, yang mengimplementasikan penjelajahan kode, pelengkapan otomatis, dan calltips.

Komodo IDE dapat mempublikasikan grup file melalui FTP, SFTP, FTPS, atau SCP. Komodo juga dapat menyinkronkan file dan mendeteksi potensi konflik penerbitan yang dapat menyebabkan Anda menimpa perubahan orang lain.

Secara keseluruhan, Komodo adalah IDE JavaScript yang bagus tapi tidak bagus, dan editor JavaScript yang bagus tapi tidak hebat. Namun, ini mungkin memenuhi kebutuhan Anda, terutama jika Anda juga bekerja dengan Perl, Python, PHP, Ruby, Tcl, atau XSLT.

Biaya: $ 295, ditambah $ 87 per tahun untuk peningkatan dan dukungan. Platform: Windows (7 atau lebih tinggi), MacOS (10.9 atau lebih tinggi), Linux.

Apache NetBeans

NetBeans memiliki dukungan yang sangat baik untuk JavaScript, HTML5, dan CSS3 dalam proyek web, dan mendukung kerangka kerja Cordova / PhoneGap untuk membangun aplikasi seluler berbasis JavaScript. NetBeans bukanlah IDE tercepat saat ini, tapi salah satu yang lebih lengkap. Dan, tentu saja, harganya tepat: NetBeans tersedia gratis di bawah lisensi open source.

Editor JavaScript NetBeans menyediakan penyorotan sintaks, pelengkapan otomatis, dan pelipatan kode, seperti yang Anda harapkan. Fitur pengeditan JavaScript juga berfungsi untuk kode JavaScript yang disematkan dalam file PHP, JSP, dan HTML. Dukungan jQuery dimasukkan ke dalam editor. NetBeans 8.2 memiliki dukungan baru atau lebih baik untuk Node.js dan Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha, dan Selenium.

Analisis kode berjalan di latar belakang saat Anda mengedit, memberikan peringatan dan petunjuk. Debugging berfungsi di browser WebKit tertanam dan di Chrome dengan Konektor NetBeans terpasang. Debugger dapat menyetel titik putus DOM, baris, peristiwa, dan XMLHttpRequest, dan akan menampilkan variabel, jam tangan, dan tumpukan panggilan. Jendela log browser terintegrasi menampilkan pengecualian browser, kesalahan, dan peringatan.

NetBeans dapat mengonfigurasi dan melakukan pengujian unit dengan JsTestDriver, file JAR (arsip Java) yang dapat Anda unduh secara gratis. Debugging pengujian unit secara otomatis diaktifkan jika Anda menentukan Chrome dengan Konektor NetBeans sebagai salah satu browser JsTestDriver saat Anda mengonfigurasi JsTestDriver di jendela Layanan.

Saat Anda men-debug aplikasi web di Chrome dengan Konektor NetBeans dan mengedit CSS dari Alat Pengembang Chrome, perubahan tersebut akan ditangkap oleh NetBeans dan disimpan ke dalam file CSS. Namun, jika file CSS Anda dibuat dari lembar gaya Less atau Sass, Anda harus memperbarui lembar sumber secara manual karena file CSS hanyalah hasil kompilasi.

Di browser WebKit tertanam dan di Chrome dengan Konektor NetBeans terpasang, Anda dapat menggunakan monitor jaringan NetBeans untuk melihat header permintaan, tanggapan, dan tumpukan panggilan untuk komunikasi REST. Untuk komunikasi WebSocket, header dan bingkai teks akan ditampilkan. Secara keseluruhan, NetBeans memberikan pengalaman debugging yang sedikit lebih baik dengan Chrome daripada yang Anda dapatkan di Firefox dengan Firebug.

NetBeans mengintegrasikan kontrol kode sumber dengan Git, Subversion, Mercurial, dan CVS. Dukungan Git ditambah dengan penampil grafis Diff dan dengan sistem rak di dalam IDE. NetBeans memberi kode warna pada status Git file, memungkinkan Anda melihat riwayat revisi untuk setiap file, dan menunjukkan informasi revisi dan pembuat untuk setiap baris file yang dikontrol versi. NetBeans memiliki integrasi yang serupa dengan Subversion, Mercurial, dan CVS, tetapi saya hanya menguji Git.

NetBeans mengintegrasikan pelacakan masalah dengan Jira dan Bugzilla. Di jendela tugas NetBeans, Anda dapat mencari tugas, menyimpan pencarian, memperbarui tugas, dan menyelesaikan tugas di repositori tugas terdaftar Anda. NetBeans juga memiliki integrasi server tim untuk situs yang menggunakan infrastruktur Kenai.

Sejauh yang saya bisa tentukan, NetBeans tidak memiliki profil JavaScript, meskipun dapat membuat profil aplikasi Java dan modul EJB. Dan meskipun NetBeans dapat merefaktor Java dan PHP, NetBeans tidak dapat merefaktor JavaScript.

Secara keseluruhan, NetBeans adalah pesaing yang layak untuk pengembangan JavaScript, HTML5, dan CSS3 sisi klien, terutama jika Anda juga melakukan pengembangan Java, PHP, atau C ++ di server. Jika Anda tidak memiliki anggaran untuk WebStorm dan tidak menyukai Microsoft, Anda akan menemukan bahwa NetBeans melakukan pekerjaan itu, selama Anda tidak terburu-buru.

Gratis. Platform: Windows, Solaris, MacOS, Linux. 

Microsoft Visual Studio 2017

Dalam ulasan lengkap saya tentang Visual Studio 2017 saya membahas produk secara keseluruhan, dengan hanya sedikit referensi ke JavaScript. Saya akan membalikkan penekanan di sini.

Secara keseluruhan, Visual Studio 2017 berfungsi dengan sangat baik sebagai JavaScript IDE, meskipun ini adalah .Net IDE yang lebih baik, dan tidak sebagus WebStorm untuk JavaScript. Meskipun juga berfungsi dengan sangat baik sebagai editor JavaScript, ini adalah editor C # yang lebih baik, dan tidak sebagus atau secepat Sublime Text untuk JavaScript.

Seperti yang Anda lihat pada gambar di bawah, Visual Studio 2017 melakukan pekerjaan yang baik dengan pewarnaan sintaks JavaScript dan pelipatan kode. Ini juga berfungsi dengan baik dengan navigasi kode JavaScript: Klik kanan pada fungsi atau nama anggota, dan Anda dapat dengan mudah melompat ke definisi atau menemukan semua referensi. Setelah selesai melihat definisi, Anda dapat menekan panah kembali di bagian atas antarmuka untuk kembali ke tempat Anda sebelumnya.

Anda dapat dengan mudah menyisipkan cuplikan dan mengelilingi pilihan Anda dengan kode yang sesuai, seperti pengkodean HTML atau URL variabel string. Selain JavaScript, HTML, dan CSS, Anda dapat mengedit file Markdown dan melihat Markdown yang ditampilkan, dan Anda dapat bekerja dengan TypeScript.

Selain itu, tentu saja Anda dapat membuat kode dalam bahasa .Net apa pun, dalam C ++, dan Python. Dan seperti yang telah terjadi pada Visual Studio untuk waktu yang lama, Anda dapat bekerja dengan database langsung dari IDE. Visual Studio sangat kuat saat bekerja dengan database SQL Server. Anda dapat menggunakan Visual Studio sebagai ganti SQL Server Management Studio untuk sebagian besar operasi database yang ingin Anda lakukan sebagai pengembang.

Visual Studio 2017 mendukung debugging di hampir semua browser yang ingin Anda gunakan, termasuk browser di perangkat seluler dan emulator. Ia juga memiliki dua browsernya sendiri: browser web internal biasa, yang merupakan (kejutan!) Versi Internet Explorer, dan Page Inspector, yang menunjukkan halaman yang dirender bersama dengan semua sumber dan gaya. Meskipun Page Inspector melakukan banyak hal yang berpotensi memakan waktu, rekayasa balik untuk mengatur dirinya sendiri untuk sebuah halaman, setelah Anda berada di dalamnya, Anda dapat tetap di sana tanpa harus menggunakan Visual Studio, browser, dan alat pengembang browser. .

Performa Visual Studio 2017 biasanya cukup baik jika Anda memberinya cukup memori dan daya CPU, namun cenderung membutuhkan resource yang signifikan. Visual Studio 2017 memiliki diagnostik kinerja yang hebat untuk aplikasi, tetapi pada umumnya tidak semuanya berguna untuk kode JavaScript biasa, yang biasanya berjalan jauh di dalam browser. Visual Studio memiliki pengaturan waktu fungsi JavaScript tertentu, responsif HTML UI, dan alat memori JavaScript, tetapi mereka hanya berlaku untuk proyek Universal Windows Platform berbasis JavaScript, bukan proyek web yang kebetulan menggunakan JavaScript.

Visual Studio 2017 mencakup pengeditan aplikasi Node.js yang sangat baik, IntelliSense, profiling, integrasi NPM, dukungan TypeScript, debugging secara lokal dan jarak jauh (Windows, MacOS, Linux), dan debugging pada Azure Web Apps dan Azure Cloud Services. Ini juga memiliki dukungan untuk CSS, HTML, JavaScript, TypeScript, CoffeeScript, dan Less. Ini termasuk menjalankan JSHint saat Anda mengetik, memungkinkan Anda mengecilkan file JavaScript dari menu konteks, dan secara otomatis mengompilasi file CoffeeScript saat disimpan, menampilkan pratinjau JavaScript yang dihasilkan secara berdampingan.