Ulasan: 6 IDE JavaScript terbaik

JavaScript digunakan untuk pelbagai jenis aplikasi hari ini. Selalunya, JavaScript berfungsi dengan HTML5 dan CSS untuk membina bahagian depan web. Tetapi JavaScript juga membantu membina aplikasi mudah alih, dan ia telah mendapat tempat penting di bahagian belakang dalam bentuk pelayan Node.js. Nasib baik, alat pengembangan JavaScript — baik editor dan IDE — meningkat untuk menghadapi cabaran baru.

Mengapa menggunakan IDE dan bukannya editor? Sebab utama adalah bahawa IDE dapat menyahpepijat dan kadangkala mempromosikan kod anda. IDE juga mempunyai sokongan untuk sistem ALM, berintegrasi dengan Git, GitHub, Mercurial, Subversion, dan Perforce untuk kawalan versi. Tetapi apabila lebih banyak penyunting menambahkan kaitan ke sistem ini, sokongan ALM menjadi semakin kurang.

Gerhana 2018 dengan Alat Pembangunan JavaScript

Kembali ke zaman kuno ketika Java Swing baru dan menarik, saya menikmati menggunakan Eclipse untuk pengembangan Java, tetapi segera beralih ke IDE Java yang lain. Lima tahun yang lalu, ketika saya melakukan beberapa pengembangan Android dengan Eclipse, saya dapati pengalaman itu baik-baik saja, tetapi tidak menyenangkan. Semasa saya cuba menggunakan Eclipse Luna dengan JSDT untuk pengembangan JavaScript pada tahun 2014, ia selalu menunjukkan ralat positif-positif untuk kod sah yang melepasi JSHint.

Video berkaitan: Apa itu JavaScript? Pencipta Brendan Eich menerangkan

Brendan Eich, pencipta bahasa pengaturcaraan JavaScript, menerangkan bagaimana bahasa itu digunakan, dan mengapa ia tetap menjadi kegemaran di kalangan pengaturcara kerana kemudahan penggunaannya.

Nasib baik, beberapa vendor dan projek sumber terbuka telah naik ke piring sejak itu. Eclipse 2018 with JavaScript Development Tools mempunyai penyunting JavaScript yang baik dan penyahpepijat berbasis Chrome, tetapi tidak mengetahui tentang TypeScript, yang digunakan oleh Angular, atau mengenai fail ES6 dan JSX, yang digunakan oleh React.

Eclipse selalu menikmati pasaran pemalam yang besar. Untuk TypeScript, pertimbangkan plugin TypeScript 1.0.0 percuma. Untuk Angular, TypeScript, dan ES6, pertimbangkan IDE Angular komersial (oleh CodeMix, sebelumnya Webclipse), dan untuk projek React dengan fail JSX, cuba IDE TypeScript sumber terbuka. Sekiranya anda menambahkan lebih dari satu, anda perlu menyelesaikan pertikaian mereka mengenai mana yang harus mengedit fail TypeScript, tetapi itu bukan masalah besar.

Alat CodeMix ditagih sebagai penambahan kecerdasan Kod Visual Studio ke Eclipse. Tidak seperti kebanyakan plugin Eclipse, Angular IDE by CodeMix tidak percuma, tetapi ia mempunyai percubaan percuma selama 45 hari. Memandangkan Kod Visual Studio percuma, saya akan mempertimbangkannya sebelum membayar Angular IDE.

Kos: Percuma; Angular IDE oleh CodeMix, $ 29 (Peribadi) atau $ 48 (Komersial) setahun. Platform: Windows, MacOS, dan Linux.

ActiveState Komodo IDE

Saya telah menjadi pengguna dan peminat Komodo IDE sejak pertama kali diperkenalkan pada tahun 2001. Walaupun produk yang lebih baru seperti Visual Studio Code dan WebStorm telah melampauinya di beberapa bidang, ia masih merupakan editor dan IDE yang baik.

Komodo IDE menyediakan penyuntingan JavaScript lanjutan, penyorotan sintaks, navigasi, dan debug, tetapi tidak termasuk pemeriksaan kod JavaScript. Untuk itu, anda selalu boleh menjalankan JSHint dalam cengkerang.

Komodo menyokong puluhan bahasa pengaturcaraan dan markup. Dengan pelbagai pilihan pengaturcaraan dan bahasa markup, termasuk refactoring, debugging, dan profil, Komodo IDE adalah pilihan yang sangat baik untuk pengembangan ujung ke ujung dalam bahasa sumber terbuka.

Komodo mempunyai modul refactoring kod untuk semua bahasa yang menyediakan kecerdasan kod: PHP, Perl, Python, Ruby, Tcl, JavaScript, dan Node.js. Sayangnya, sifat "penyebut paling umum" pendekatan ini menghadkan keupayaan untuk menamakan semula pemboleh ubah dan ahli kelas, dan mengekstrak kod menjadi kaedah. Walau bagaimanapun, ini adalah beberapa kes yang paling berguna

Komodo IDE mempunyai penyuntingan lajur dan pelbagai pilihan. Ini memberikan keseimbangan yang hampir sama dengan Teks Sublime dan TextMate sejauh mana pengeditan besar-besaran. Selagi kita melakukan perbandingan, Komodo lebih bersifat IDE, sementara Sublime Text jauh lebih pantas. Dan sepanjang kita membincangkan prestasi, kecepatan Komodo telah meningkat dengan ketara berbanding versi yang lebih lama, dalam penggambaran layar, carian, dan pemeriksaan sintaks.

Komodo IDE mempunyai beberapa ciri yang kurang dimiliki oleh kebanyakan produk pesaing. Salah satunya adalah Pemeriksa HTTPnya, yang sangat baik untuk menyahpepijat balik panggilan Ajax. Yang lain adalah toolkit Rx (ungkapan biasa, atau regex), yang merupakan kaedah terbaik untuk membina dan menguji ungkapan biasa untuk JavaScript, Perl, PHP, Python, dan Ruby.

Kerjasama adalah satu lagi pembezaan Komodo IDE — anggap ia sebagai Dokumen Google untuk kod. Anda boleh membuat sesi untuk kumpulan fail, menambahkan kenalan ke sesi sebagai kolaborator, kemudian bekerjasama pada fail yang sama pada masa yang sama, dengan penyegerakan masa nyata.

Kerjasama bukan pengganti kawalan kod sumber, tetapi ia adalah makanan tambahan yang berguna. Komodo IDE mengintegrasikan kawalan kod sumber menggunakan CVS, Subversion, Perforce, Git, Mercurial, dan Bazaar. Hanya operasi kawalan versi asas yang disokong. Operasi lanjutan, seperti bercabang, mesti dilakukan menggunakan klien kawalan kod sumber yang berasingan.

Walaupun Komodo tidak mempunyai penyusun dokumen JavaScript sendiri, ia memanfaatkan sumber terbuka percuma terbaik untuk tujuan ini. Di luar kotak, pemformat default untuk fail JavaScript adalah JS Beautifier, tetapi sembilan pilihan lain tersedia melalui menu drop-down.

Komodo IDE menyokong penyahpepijatan JavaScript sisi pelanggan di Chrome, dan ia dapat menyahpepijat Node.js secara tempatan dan dari jauh. Ia juga debug Perl, Python, PHP, Ruby, Tcl, dan XSLT.

Komodo IDE mempunyai penampil DOM yang membolehkan anda melihat dokumen XML dan HTML sebagai pohon yang boleh dilipat. Ini juga membolehkan anda melakukan carian XPath untuk menyaring pokok.

Modul kod Komodo dan modul pengujian unit tidak menyokong JavaScript. Walau bagaimanapun, JavaScript dan Node.js kedua-duanya disokong oleh modul Code Intelligence Komodo, yang menerapkan penjelajahan kod, pelengkapan automatik, dan petua panggilan.

Komodo IDE dapat menerbitkan kumpulan fail melalui FTP, SFTP, FTPS, atau SCP. Komodo juga dapat menyegerakkan fail dan mengesan kemungkinan konflik penerbitan yang boleh menyebabkan anda menimpa perubahan orang lain.

Secara keseluruhan, Komodo adalah IDE JavaScript yang baik tetapi tidak hebat, dan penyunting JavaScript yang bagus tetapi tidak hebat. Walau bagaimanapun, ia mungkin memenuhi keperluan anda, terutamanya jika anda juga bekerja dengan Perl, Python, PHP, Ruby, Tcl, atau XSLT.

Kos: $ 295, ditambah $ 87 setahun untuk peningkatan dan sokongan. Platform: Windows (7 atau lebih tinggi), MacOS (10.9 atau lebih tinggi), Linux.

Apache NetBeans

NetBeans mempunyai dukungan yang sangat baik untuk JavaScript, HTML5, dan CSS3 dalam proyek web, dan mendukung kerangka Cordova / PhoneGap untuk membangun aplikasi mudah alih berbasis JavaScript. NetBeans bukan IDE terpantas di blok, tetapi ia adalah salah satu yang lebih lengkap. Dan, tentu saja, harganya betul: NetBeans tersedia percuma di bawah lesen sumber terbuka.

Editor JavaScript NetBeans menyediakan penyorotan sintaks, pelengkapan automatik, dan pelipatan kod, seperti yang anda harapkan. Fitur penyuntingan JavaScript juga berfungsi untuk kod JavaScript yang tersemat dalam file PHP, JSP, dan HTML. Sokongan jQuery dimasukkan ke dalam penyunting. NetBeans 8.2 mempunyai sokongan baru atau lebih baik untuk Node.js dan Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha, dan Selenium.

Analisis kod berjalan di latar belakang semasa anda mengedit, memberikan amaran dan petunjuk. Penyahpepijatan berfungsi di penyemak imbas WebKit dan di Chrome dengan penyambung NetBeans dipasang. Debugger dapat menetapkan titik putus DOM, line, event, dan XMLHttpRequest, dan ia akan memaparkan pemboleh ubah, jam tangan, dan stack panggilan. Tetingkap log penyemak imbas bersepadu memaparkan pengecualian, kesalahan, dan amaran penyemak imbas.

NetBeans dapat mengkonfigurasi dan melakukan pengujian unit dengan JsTestDriver, fail JAR (arkib Java) yang boleh anda muat turun secara percuma. Penyahpepijatan ujian unit diaktifkan secara automatik jika anda menentukan Chrome dengan NetBeans Connector sebagai salah satu penyemak imbas JsTestDriver semasa anda mengkonfigurasi JsTestDriver di tetingkap Perkhidmatan.

Ketika anda melakukan debug aplikasi web di Chrome dengan NetBeans Connector dan mengedit CSS dari Chrome Developer Tools, perubahan akan ditangkap oleh NetBeans dan disimpan ke dalam fail CSS. Walau bagaimanapun, jika fail CSS anda dihasilkan dari helaian gaya Less atau Sass, anda harus mengemas kini lembaran sumber secara manual kerana fail CSS hanyalah output yang disusun.

Di penyemak imbas WebKit dan Chrome yang disertakan dengan Penyambung NetBeans, anda dapat menggunakan monitor rangkaian NetBeans untuk melihat tajuk permintaan, respons, dan tumpukan panggilan untuk komunikasi REST. Untuk komunikasi WebSocket, kedua-dua tajuk dan bingkai teks dipaparkan. Secara keseluruhan, NetBeans memberikan pengalaman debugging yang sedikit lebih baik dengan Chrome daripada yang anda dapatkan di Firefox dengan Firebug.

NetBeans mengintegrasikan kawalan kod sumber dengan Git, Subversion, Mercurial, dan CVS. Sokongan Git ditambah oleh penampil Diff grafik dan sistem rak di dalam IDE. NetBeans memberi kod warna pada status Git fail, membolehkan anda melihat sejarah semakan untuk setiap fail, dan menunjukkan kepada anda semakan dan maklumat pengarang untuk setiap baris fail yang dikendalikan versi. NetBeans mempunyai integrasi serupa dengan Subversion, Mercurial, dan CVS, tetapi saya hanya menguji Git.

NetBeans mengintegrasikan penjejakan masalah dengan Jira dan Bugzilla. Di tetingkap tugas NetBeans, anda dapat mencari tugas, menyimpan carian, mengemas kini tugas, dan menyelesaikan tugas di repositori tugas berdaftar anda. NetBeans juga mempunyai integrasi pelayan pasukan untuk laman web yang menggunakan infrastruktur Kenai.

Sejauh yang saya dapat tentukan, NetBeans tidak memiliki profil JavaScript, walaupun dapat profil aplikasi Java dan modul EJB. Walaupun NetBeans dapat memfaktorkan semula Java dan PHP, ia tidak dapat memfaktorkan semula JavaScript.

Secara keseluruhan, NetBeans adalah pesaing yang baik untuk pengembangan JavaScript, HTML5, dan CSS3 di sisi pelanggan, terutama jika anda juga melakukan pengembangan Java, PHP, atau C ++ di pelayan. Sekiranya anda tidak mempunyai anggaran untuk WebStorm dan tidak menyukai Microsoft, anda akan mendapati bahawa NetBeans melakukan tugas itu, selagi anda tidak terburu-buru.

Kos: Percuma. Platform: Windows, Solaris, MacOS, Linux. 

Microsoft Visual Studio 2017

Dalam ulasan penuh Visual Studio 2017 saya membincangkan produk secara keseluruhan, dengan hanya sebilangan rujukan mengenai JavaScript. Saya akan membalikkan penekanan di sini.

Secara keseluruhan, Visual Studio 2017 berfungsi dengan baik sebagai IDE JavaScript, walaupun IDE yang lebih baik. Bersih, dan tidak sebagus WebStorm untuk JavaScript. Walaupun ini juga berfungsi dengan baik sebagai editor JavaScript, itu adalah editor C # yang lebih baik, dan tidak sebagus atau secepat Teks Sublime untuk JavaScript.

Seperti yang anda lihat dalam tangkapan skrin di bawah, Visual Studio 2017 berfungsi dengan baik dengan pewarnaan sintaks JavaScript dan pelipatan kod. Ini juga berfungsi dengan baik dengan navigasi kod JavaScript: Klik kanan pada fungsi atau nama ahli, dan anda boleh melompat ke definisi atau mencari semua rujukan dengan mudah. Setelah selesai melihat definisi, anda boleh menekan anak panah belakang di bahagian atas antara muka untuk kembali ke tempat anda berada.

Anda boleh memasukkan potongan dengan mudah dan mengelilingi pilihan anda dengan kod yang sesuai, seperti pengekodan HTML atau URL pemboleh ubah rentetan. Selain JavaScript, HTML, dan CSS, anda dapat mengedit fail Markdown dan melihat Markdown yang diberikan, dan anda dapat bekerja dengan TypeScript.

Di samping itu, anda tentu saja boleh membuat kod dalam bahasa .Net, dalam C ++, dan di Python. Dan seperti yang berlaku untuk Visual Studio sejak sekian lama, anda boleh menggunakan pangkalan data secara langsung dari IDE. Visual Studio sangat kuat ketika bekerja dengan pangkalan data SQL Server. Anda boleh pergi dengan menggunakan Visual Studio dan bukannya SQL Server Management Studio untuk sebahagian besar operasi pangkalan data yang ingin anda lakukan sebagai pembangun.

Visual Studio 2017 menyokong penyahpepijatan pada penyemak imbas yang anda gemari, termasuk penyemak imbas pada peranti mudah alih dan emulator. Ini juga mempunyai dua penyemak imbas sendiri: penyemak imbas web dalaman biasa, yang (mengejutkan!) Versi Internet Explorer, dan Page Inspector, yang menunjukkan halaman yang diberikan bersama dengan semua sumber dan gaya. Walaupun Page Inspector melakukan banyak perkara yang berpotensi memakan masa, untuk membuat rekayasa terbalik untuk menyediakan halaman, setelah anda berada di dalamnya, anda boleh tinggal di sana tanpa perlu menyulap Visual Studio, penyemak imbas, dan alat pembangun penyemak imbas .

Prestasi Visual Studio 2017 biasanya cukup bagus jika anda memberikan memori dan kuasa CPU yang mencukupi, tetapi cenderung memerlukan sumber daya yang besar. Visual Studio 2017 mempunyai diagnostik prestasi yang hebat untuk aplikasi, tetapi pada umumnya tidak semuanya berguna untuk kod JavaScript biasa, yang biasanya berjalan jauh di dalam penyemak imbas. Visual Studio mempunyai waktu fungsi JavaScript tertentu, responsif UI HTML, dan alat memori JavaScript, tetapi aplikasi ini hanya berlaku untuk proyek Platform Windows Universal Universal berbasis JavaScript, bukan proyek web yang kebetulan menggunakan JavaScript.

Visual Studio 2017 merangkumi penyuntingan aplikasi Node.js yang sangat baik, IntelliSense, profil, integrasi NPM, sokongan TypeScript, penyahpepijatan lokal dan jarak jauh (Windows, MacOS, Linux), dan penyahpepijatan pada Aplikasi Web Azure dan Perkhidmatan Awan Azure. Ini juga memiliki dukungan untuk CSS, HTML, JavaScript, TypeScript, CoffeeScript, dan Less. Ini termasuk menjalankan JSHint ketika anda mengetik, memungkinkan anda meminimumkan fail JavaScript dari menu konteks, dan menyusun fail CoffeeScript secara automatik ketika disimpan, menunjukkan pratonton bersebelahan dari JavaScript yang dihasilkan.