Review: 10 editor JavaScript terbaik

Pemrogram JavaScript memiliki banyak alat bagus untuk dipilih — hampir terlalu banyak untuk dilacak. Pada artikel ini, saya membahas 10 editor teks dengan dukungan yang baik untuk pengembangan dengan JavaScript, HTML5, dan CSS, dan untuk mendokumentasikan dengan penurunan harga. Mengapa menggunakan editor untuk pemrograman JavaScript daripada IDE? Singkatnya: kecepatan.

Perbedaan mendasar antara editor dan IDE adalah bahwa IDE dapat men-debug dan terkadang membuat profil kode Anda, dan IDE memiliki dukungan untuk sistem manajemen siklus hidup aplikasi (ALM). Banyak editor yang kami diskusikan di sini mendukung setidaknya satu sistem kontrol versi, seringkali Git, sehingga kriteria kurang menjadi pembeda antara IDE dan editor daripada sebelumnya.

Sublime Text dan Visual Studio Code adalah yang teratas di antara editor JavaScript — Sublime Text untuk kecepatannya serta fitur pengeditannya yang nyaman, dan Visual Studio Code untuk fitur yang lebih baik dan kecepatan yang hampir sama baiknya. Tanda kurung menempati posisi ketiga. Sementara TextMate menduduki peringkat tinggi di daftar saya beberapa tahun yang lalu, kemampuannya belum benar-benar mengikuti perkembangan baru.

Kemungkinan besar, Anda akan menemukan editor JavaScript pilihan Anda di Sublime Text, Visual Studio Code, atau Brackets. Tetapi beberapa alat lain — Atom, BBEdit, Komodo Edit, Notepad ++, Emacs, dan Vim — semuanya memiliki sesuatu untuk direkomendasikan. Bergantung pada tugas yang ada, Anda mungkin menemukan salah satu dari mereka berguna untuk dimiliki.

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.

Mari kita telusuri opsi dan bandingkan di bagian akhir.

Teks Sublim

Jika Anda menginginkan editor teks pemrograman yang fleksibel, kuat, dan dapat diperluas yang secepat kilat dan Anda tidak keberatan beralih ke jendela lain untuk pemeriksaan kode, debugging, dan penerapan, maka tidak perlu mencari lagi selain Sublime Text.

Selain kecepatan, banyak kekuatan penting dari Sublime Text yang mendukung lebih dari 70 jenis file, di antaranya JavaScript, HTML, dan CSS; navigasi yang hampir instan dan peralihan proyek secara instan; beberapa pilihan (membuat banyak perubahan sekaligus), termasuk pilihan kolom (pilih area persegi panjang dari file); beberapa jendela (gunakan semua monitor Anda) dan jendela terpisah (manfaatkan layar real estat Anda); kustomisasi lengkap dengan file JSON sederhana; API plugin berbasis Python; dan palet perintah yang terpadu dan dapat dicari.

Untuk programmer yang datang dari editor lain, Sublime Text mendukung bundel TextMate (tidak termasuk perintah) dan emulasi Vi / Vim. Dokumentasi Sublime Text tidak resmi membuat pernyataan yang meremehkan (dan salah) tentang pengguna Emacs ( moi , misalnya), tapi saya akan mengabaikannya. Mengapa dokumentasi Sublime Text tidak resmi ada? Nah, untuk satu hal, dokumentasi resminya kurang dari lengkap — apalagi.

Ketika saya mengatakan "navigasi hampir instan" sebelumnya, saya bersungguh-sungguh. Misalnya, untuk melompat dari lokasi saat ini di layar ke definisi getResponseHeaderdi ajax.js, saya dapat mengetikkan Command-P di Mac atau Ctrl-P di PC, lalu ajmembuka tampilan sementara ke ajax.js, lalu @grhdan Enter untuk membuka tab dengan getResponseHeaderpilihan. Sublime Text mampu mengimbangi ketikan saya. Rasanya responsif seperti beberapa editor DOS lama terbaik seperti Brief dan Kedit.

Setelah saya memilih  getResponseHeader, saya dapat menemukan semua penggunaan fungsi dalam konteks dengan mengetikkan Shift-Command-F di Mac, atau Shift-Ctrl-F di PC, lalu Enter. Tab baru akan menampilkan hasil pencarian dengan istilah pencarian yang dikotakkan di setiap potongan lima baris. Mengklik dua kali pada teks kotak menampilkan konteks file lengkap di tab baru.

Mengklik nama file di sidebar Folder sebelah kiri menampilkan tab sementara yang menampilkan konten file. Mengklik pada file yang berbeda menggantikan tab itu. Di sini sekali lagi, Sublime Text dapat mengikuti pengetikan dan klik saya. Demikian pula, navigasi ukuran yang diperkecil di kanan atas halaman memungkinkan saya berpindah dalam file hampir secara instan, tanpa overhead pengguliran. Saya berharap Microsoft Word responsif.

Beberapa pilihan dan pilihan kolom membuat pekerjaan cepat dari jenis pengeditan menjengkelkan yang biasanya membutuhkan ekspresi reguler. Apakah Anda perlu mengubah daftar kata menjadi struktur JSON di mana setiap kata diapit oleh tanda kutip ganda dan setiap kata yang dikutip dipisahkan oleh koma? Dibutuhkan sekitar delapan penekanan tombol di Sublime Text, tidak peduli berapa banyak kata yang Anda miliki dalam daftar.

Pada kotak pengembangan Windows saya, saya menggunakan dua monitor lebar. Di MacBook saya, saya menggunakan layar Retina plus layar Thunderbolt. Kecuali saya mengedit pada satu tampilan dan debugging di sisi lain, saya biasanya ingin melihat banyak file sumber yang berbeda dan tampilan yang berbeda ke dalam file sumber secara bersamaan. Sublime Text mendukung banyak jendela, jendela terpisah, beberapa ruang kerja per proyek, beberapa tampilan, dan beberapa panel yang berisi tampilan. Cukup mudah untuk menggunakan semua real estate layar saya saat saya ingin dan mengkonsolidasikannya saat saya perlu menyediakan ruang untuk debugging dan pengujian.

Anda dapat menyesuaikan segala sesuatu tentang Sublime Text: skema warna, font teks, binding kunci global, tab berhenti, cuplikan dan binding kunci khusus file, dan bahkan aturan penyorotan sintaks. Preferensi dikodekan sebagai file JSON. Definisi khusus bahasa adalah file preferensi XML. Ada komunitas aktif di sekitar Sublime Text yang membuat dan mengelola paket dan plugin Sublime Text. Banyak fitur yang awalnya saya pikir kurang Sublime Text — termasuk antarmuka JSLint dan JSHint, JsFormat, JsMinify, PrettyJSON, dan dukungan Git — ternyata tersedia melalui komunitas, menggunakan Package Installer.

Salah satu alasan performa hebat Sublime Text adalah karena kode tersebut sangat ketat. Alasan lainnya adalah Sublime Text bukan IDE dan tidak membutuhkan pembukuan IDE.

Dari sudut pandang pengembang, ini adalah pertukaran yang rumit. Jika Anda berada dalam lingkaran pengembangan yang didorong pengujian ketat "merah, hijau, refactor", maka IDE yang disiapkan untuk mengedit, menguji, memfaktor ulang, dan cakupan kode trek akan sangat membantu Anda. Sebaliknya, jika Anda melakukan tinjauan kode atau pengeditan besar, Anda akan menginginkan editor tercepat dan paling efisien yang dapat Anda temukan. Editor itu mungkin Sublime Text.

Biaya: Uji coba gratis tanpa batas; $ 70 per pengguna untuk bisnis atau lisensi pribadi. Platform: Windows, MacOS, dan Linux.

Kode Visual Studio

Visual Studio Code adalah editor dan IDE ringan gratis dari Microsoft. Ini memiliki komponen Visual Studio, dicampur dengan shell Atom Electron open source, memberikan dukungan yang sangat baik untuk pengembangan ASP.Net Core dengan C # dan untuk pengembangan Node.js dengan TypeScript dan JavaScript. Melanggar pola historis Microsoft yang hanya mendukung Visual Studio di Windows, Visual Studio Code juga berjalan di MacOS dan Linux. Tangkapan layar di bawah ini diambil di MacOS.

Visual Studio Code memiliki penyelesaian kode JavaScript yang luar biasa bagus, berkat penyertaan compiler TypeScript dan mesin Salsa. Visual Studio Code mengirimkan kode JavaScript Anda ke compiler TypeScript di latar belakang untuk menyimpulkan tipe dan membuat tabel simbol. Anda dapat melihat hasilnya di kotak dekat bagian bawah gambar layar yang menunjukkan informasi untuk  hasOwnProperty metode tersebut.

Tabel simbol yang sama memungkinkan IntelliSense untuk memberi Anda daftar opsi pop-up yang bagus untuk pelengkapan kode selama pengetikan ekspresi. Anda mendapatkan penutupan tanda kurung otomatis, opsi penyelesaian kata otomatis, daftar metode otomatis setelah Anda mengetik ., dan daftar parameter otomatis dalam suatu metode. Anda dapat meningkatkan IntelliSense dengan menambahkan referensi ke file d.ts dari  DefinitelyTyped, dan Visual Studio Code akan menawarkan untuk melakukannya untuk Anda saat mengenali masalah umum, seperti penggunaan  __dirname, yang merupakan variabel bawaan Node.js.

Dukungan Git sangat bagus dan cukup mudah digunakan. Debugger Visual Studio Code memberikan pengalaman debugging yang sangat baik untuk pengembangan Node.js (dan pengembangan ASP.Net). Visual Studio Code memiliki perkakas yang sangat bagus untuk HTML, CSS, Less, Sass, dan JSON, yang didasarkan pada teknologi yang sama yang memberdayakan alat pengembang Internet Explorer F12. Selain itu, ia memiliki integrasi yang dapat disesuaikan dengan pelari tugas eksternal seperti  gulp dan  jake.

Visual Studio Code telah menarik ekosistem plugin yang kuat — misalnya, untuk mendukung Angular dan React. Sekarang editor yang saya rekomendasikan ketika saya menulis tutorial tentang membangun aplikasi dengan JavaScript dan kerangka kerja dan perpustakaan TypeScript.

Biaya: Sumber terbuka gratis. Platform: Windows, MacOS, dan Linux.

Tanda kurung

Brackets adalah editor open source gratis, aslinya dari Adobe, dibuat untuk menyediakan perkakas yang lebih baik untuk JavaScript, HTML, dan CSS, serta teknologi web terbuka terkait. Brackets sendiri ditulis dalam JavaScript, HTML, dan CSS, dan pengembang menggunakan Brackets untuk membuat Brackets. Selain kemampuan bawaan, Brackets memiliki pengelola ekstensi, dan ekstensi tersedia untuk banyak bahasa dan alat yang digunakan pengembang front-end. Brackets tidak secepat Sublime Text atau TextMate, tetapi masih cukup cepat kecuali jeda untuk memuat atau memperbarui konten program dari web.

Brackets memiliki dukungan yang baik untuk JavaScript, CSS, HTML, dan Node.js. Ini juga memiliki fitur bagus seperti pengeditan in-line CSS yang terkait dengan ID HTML (Edit Cepat). Selain itu, Brackets menampilkan UI yang bersih dan pratinjau langsung untuk halaman web yang Anda edit. Ini adalah pilihan yang sangat bagus untuk editor kode gratis.

Pelengkapan otomatis JavaScript di Brackets sangat bagus, dengan penutupan otomatis tanda kurung, tanda kurung siku, dan tanda kurung siku, serta menu drop-down otomatis untuk kata kunci, variabel, dan metode, termasuk metode jQuery setelah Anda mengetik $. Brackets dapat mengontrol debugger Node.js dan memulai ulang Node dari item menu. Sangat mudah untuk menambahkan ekstensi untuk fungsionalitas tambahan seperti dukungan TypeScript dan JSX, integrasi Bower, dan integrasi Git.

Edit Cepat, Dokumen Cepat, Buka Cepat, dan Pratinjau Langsung semuanya membantu menyederhanakan pengeditan aplikasi web dan membiarkan Anda fokus pada apa yang Anda kodekan atau rancang. Sisi negatifnya, beberapa ekstensi Brackets bisa jadi rumit untuk dikonfigurasi, tetapi tidak serumit paket Emacs atau plugin Vim.

Biaya: Sumber terbuka gratis. Platform: Windows, MacOS, Linux. 

Atom

Atom adalah editor pemrograman gratis, sumber terbuka, dan dapat diretas dari GitHub untuk Windows, MacOS, dan Linux yang terintegrasi dengan aplikasi GitHub dan memiliki ribuan paket dan tema yang tersedia. Saya bertahan dengan beberapa paket komunitas, ditambah paket inti dan tema.

Tidak mengherankan, mengingat asalnya, sumber Atom dihosting di GitHub. Itu ditulis dalam CoffeeScript dan terintegrasi dengan Node.js. Atom adalah varian khusus Chromium yang dirancang untuk menjadi editor teks daripada browser web; setiap jendela Atom pada dasarnya adalah halaman web yang dirender secara lokal. Tim Atom mengembangkan Atom di Atom.

Performa Atom cukup bagus jika tidak diperbarui sendiri. Ini sepenuhnya ditampilkan di luar kotak, dengan pencari yang kabur, pencarian dan penggantian seluruh proyek yang cepat, beberapa kursor dan pilihan, beberapa panel, cuplikan, pelipatan kode, dan kemampuan untuk mengimpor tata bahasa dan tema TextMate. Atom dapat menginstal dua utilitas baris perintah: Atom untuk memulai editor dari shell, dan APM untuk mengelola paket Atom, dalam semangat NPM untuk Node.js. Saya sering menggunakan Atom saat menjelajahi repositori yang saya kloning dari GitHub, karena aplikasi GitHub menyertakan item menu konteks untuk melakukan itu.

Biaya: Sumber terbuka gratis. Platform: Windows, MacOS, Linux.

Komodo Sunting

Komodo Edit, versi Komodo IDE ActiveState yang dikurangi fungsinya, adalah editor multibahasa yang cukup bagus. Semua yang saya katakan tentang Komodo IDE sebagai editor (lihat “Review: 6 JavaScript IDE terbaik”) berlaku untuk Komodo Edit.