Ulasan: 10 penyunting JavaScript terbaik

Pengaturcara JavaScript mempunyai banyak alat yang baik untuk dipilih - hampir terlalu banyak untuk dijejaki. Dalam artikel ini, saya membincangkan 10 editor teks dengan sokongan yang baik untuk mengembangkan dengan JavaScript, HTML5, dan CSS, dan untuk mendokumentasikan dengan Markdown. Mengapa menggunakan editor untuk pengaturcaraan JavaScript dan bukannya IDE? Dalam satu perkataan: kepantasan.

Perbezaan penting antara editor dan IDE adalah IDE dapat menyahpepijat dan kadang-kadang mempromosikan kod anda, dan IDE mempunyai sokongan untuk sistem pengurusan kitaran hayat aplikasi (ALM). Sebilangan besar editor yang kita bincangkan di sini menyokong sekurang-kurangnya satu sistem kawalan versi, sering kali Git, sehingga kriteria ini tidak banyak membezakan antara IDE dan editor daripada dulu.

Teks Sublime dan Kod Visual Studio adalah yang teratas di antara penyunting JavaScript — Teks Sublime untuk kepantasannya sama seperti ciri penyuntingan yang mudah, dan Kod Visual Studio untuk ciri dan kelajuan yang lebih baik yang hampir sama baiknya. Kurungan menduduki tempat ketiga. Walaupun TextMate berada di kedudukan teratas dalam senarai saya beberapa tahun yang lalu, kemampuannya tidak benar-benar mengikuti perkembangan baru.

Kemungkinan besar, anda akan menemui editor JavaScript pilihan anda dalam Teks Sublime, Kod Visual Studio, atau Kurungan. Tetapi beberapa alat lain — Atom, BBEdit, Komodo Edit, Notepad ++, Emacs, dan Vim — semuanya mempunyai sesuatu untuk mengesyorkannya. Bergantung pada tugas yang sedang dilakukan, anda mungkin mendapati ada di antara mereka yang berguna untuk dikendalikan.

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.

Mari kita teliti pilihan dan bandingkan di akhir.

Teks Luhur

Sekiranya anda mahukan penyunting teks pengaturcaraan yang fleksibel, kuat, dapat diperluas yang cepat dan anda tidak keberatan beralih ke tetingkap lain untuk pemeriksaan kod, penyahpepijatan, dan penyebaran, maka jangan melihat lebih jauh daripada Teks Sublime.

Selain kepantasan, banyak kelebihan sokongan Sublime Text yang menyokong lebih dari 70 jenis fail, antaranya JavaScript, HTML, dan CSS; nyaris navigasi dan pertukaran projek segera; beberapa pilihan (buat banyak perubahan sekaligus), termasuk pilihan lajur (pilih kawasan segi empat tepat fail); berbilang tetingkap (gunakan semua monitor anda) dan pecah tetingkap (memanfaatkan harta tanah skrin anda); selesaikan penyesuaian dengan fail JSON ringkas; API pemalam berasaskan Python; dan palet arahan yang digabungkan dan dicari.

Untuk pengaturcara yang berasal dari editor lain, Sublime Text menyokong kumpulan TextMate (tidak termasuk perintah) dan emulasi Vi / Vim. Dokumentasi Sublime Text yang tidak rasmi membuat komen yang tidak baik (dan tidak betul) mengenai pengguna Emacs ( misalnya, moi ), tetapi saya akan mengabaikannya. Mengapa dokumentasi Teks Sublime tidak rasmi wujud? Untuk satu perkara, dokumentasi rasmi kurang lengkap - lebih kurang.

Ketika saya mengatakan "navigasi hampir segera" sebelumnya, saya bermaksud. Sebagai contoh, untuk melompat dari lokasi semasa di skrin ke definisi getResponseHeaderdalam ajax.js, saya dapat mengetik Command-P pada Mac atau Ctrl-P pada PC, kemudian ajuntuk membuka pandangan sementara ke ajax.js, kemudian @grhdan Enter untuk membuka tab dengan yang getResponseHeaderdipilih. Teks Sublime dapat mengikuti penaipan saya. Rasanya responsif seperti beberapa penyunting DOS lama terbaik seperti Brief dan Kedit.

Setelah saya memilih  getResponseHeader, saya dapat mencari semua penggunaan fungsi dalam konteks dengan mengetik Shift-Command-F pada Mac, atau Shift-Ctrl-F pada PC, kemudian Enter. Tab baru akan menunjukkan kepada saya hasil carian dengan istilah carian yang terdapat dalam setiap coretan lima baris. Mengklik dua kali pada teks kotak menunjukkan konteks fail penuh dalam tab baru.

Mengklik nama fail di bar sisi Folder sebelah kiri memunculkan tab sementara yang menunjukkan kandungan fail. Mengklik pada fail yang berbeza akan menggantikan tab tersebut. Di sini sekali lagi, Sublime Text dapat mengikuti penaipan dan klik saya. Begitu juga, navigasi bersaiz kecil di kanan atas halaman membolehkan saya bergerak dalam fail hampir seketika, tanpa overhead menatal. Saya berharap Microsoft Word begitu responsif.

Pelbagai pilihan dan pemilihan lajur membuat kerja cepat dari jenis penyuntingan yang mengganggu yang biasa memerlukan ungkapan biasa. Adakah anda perlu mengubah senarai kata menjadi struktur JSON di mana setiap perkataan dikelilingi oleh petikan ganda dan setiap perkataan yang dipetik dipisahkan dari yang berikutnya dengan koma? Ia memerlukan kira-kira lapan penekanan kekunci dalam Teks Sublime, tidak kira berapa banyak perkataan yang anda ada dalam senarai.

Pada kotak pengembangan Windows saya, saya menggunakan dua monitor lebar. Pada MacBook saya, saya menggunakan paparan Retina dan paparan Thunderbolt. Kecuali saya mengedit pada satu paparan dan melakukan debug pada yang lain, saya biasanya ingin melihat banyak fail sumber yang berbeza dan pandangan yang berbeza ke dalam fail sumber secara serentak. Teks Sublime menyokong pelbagai tetingkap, tetingkap perpecahan, beberapa ruang kerja setiap projek, pelbagai paparan, dan pelbagai panel yang mengandungi pandangan. Cukup mudah untuk menggunakan semua harta tanah skrin saya ketika saya mahu dan menggabungkan ketika saya perlu memberi ruang untuk debugging dan ujian.

Anda boleh menyesuaikan segala-galanya mengenai Teks Sublime: skema warna, fon teks, pengikatan kunci global, tab berhenti, pengikatan dan coretan kunci khusus fail, dan bahkan peraturan penekanan sintaks. Keutamaan dikodkan sebagai fail JSON. Definisi khusus bahasa adalah fail pilihan XML. Terdapat komuniti aktif di sekitar Teks Sublime yang membuat dan mengekalkan pakej dan pemalam Teks Sublime. Banyak ciri yang pada awalnya saya anggap kekurangan Teks Sublime — termasuk antara muka JSLint dan JSHint, JsFormat, JsMinify, PrettyJSON, dan sokongan Git - ternyata tersedia melalui komuniti, menggunakan Package Installer.

Salah satu sebab prestasi Sublime Text yang hebat adalah kerana ia dikodkan dengan ketat. Sebab lain ialah Teks Sublime bukan IDE dan tidak memerlukan overhead pembukuan IDE.

Dari sudut pandangan pemaju, ini adalah pertukaran yang sukar. Sekiranya anda berada dalam lingkaran pengembangan yang didorong oleh ujian "merah, hijau, refaktor," maka IDE yang disediakan untuk mengedit, menguji, refaktor, dan liputan kod trek akan sangat membantu anda. Sekiranya anda melakukan tinjauan kod atau pengeditan utama, sebaliknya, anda mahukan editor terpantas dan paling cekap yang anda dapat. Editor itu mungkin Teks Sublime

Kos: Percubaan percuma tanpa had; $ 70 setiap pengguna untuk perniagaan atau lesen peribadi. Platform: Windows, MacOS, dan Linux.

Kod Visual Studio

Visual Studio Code adalah editor ringan percuma dan IDE dari Microsoft. Ia memiliki komponen Visual Studio, dicampur dengan shell terbuka Atom Electron, memberikan sokongan yang sangat baik untuk pengembangan Core ASP.Net dengan C # dan untuk pengembangan Node.js dengan TypeScript dan JavaScript. Berpisah dengan corak sejarah Microsoft yang hanya menyokong Visual Studio pada Windows, Visual Studio Code juga berjalan di MacOS dan Linux. Tangkapan skrin di bawah diambil di MacOS.

Visual Studio Code mempunyai penyelesaian kod JavaScript yang sangat baik, berkat penyertaan penyusun TypeScript dan mesin Salsa. Kod Visual Studio menghantar kod JavaScript anda ke penyusun TypeScript di latar untuk menyimpulkan jenis dan membina jadual simbol. Anda dapat melihat hasilnya di kotak berhampiran bahagian bawah gambar skrin yang menunjukkan maklumat untuk  hasOwnProperty kaedah tersebut.

Jadual simbol yang sama membolehkan IntelliSense memberi anda senarai pilihan pop-up yang bagus untuk penyelesaian kod sepanjang mengetik ekspresi. Anda mendapat penutupan kurungan automatik, pilihan penyelesaian kata automatik, senarai kaedah automatik setelah anda menaip ., dan senarai parameter automatik dalam satu kaedah. Anda dapat meningkatkan IntelliSense dengan menambahkan rujukan ke fail d.ts dari  DefinitelyTyped, dan Visual Studio Code akan menawarkan untuk melakukannya apabila anda mengenali masalah umum, seperti penggunaan  __dirname, yang merupakan pemboleh ubah terbina dalam Node.js.

Sokongan git sangat bagus dan mudah digunakan Debugger Visual Studio Code memberikan pengalaman debugging yang sangat baik untuk pembangunan Node.js (dan pengembangan ASP.Net). Visual Studio Code mempunyai perkakas yang sangat baik untuk HTML, CSS, Less, Sass, dan JSON, yang didasarkan pada teknologi yang sama yang memberi kuasa kepada alat pembangun Internet Explorer F12. Di samping itu, ia mempunyai penyatuan yang dapat disesuaikan dengan pelari tugas luaran seperti  gulp dan  jake.

Visual Studio Code telah menarik perhatian ekosistem plugin yang kuat — sebagai contoh, untuk menyokong Angular and React. Sekarang adalah editor yang saya cadangkan ketika saya menulis tutorial tentang membina aplikasi dengan kerangka kerja JavaScript dan TypeScript dan perpustakaan.

Kos: Sumber terbuka percuma. Platform: Windows, MacOS, dan Linux.

Kurungan

Brackets adalah editor sumber terbuka percuma, berasal dari Adobe, yang dibangun untuk menyediakan perkakas yang lebih baik untuk JavaScript, HTML, dan CSS, serta teknologi web terbuka yang berkaitan. Kurungan itu sendiri ditulis dalam JavaScript, HTML, dan CSS, dan para pembangun menggunakan Kurungan untuk membina Kurungan. Sebagai tambahan kepada kemampuan yang ada, Bracket mempunyai pengurus peluasan, dan sambungan tersedia untuk banyak bahasa dan alat yang digunakan oleh pembangun front-end. Tanda kurung tidak sepantas Sublime Text atau TextMate, tetapi masih cukup pantas kecuali jeda untuk memuatkan atau mengemas kini kandungan program dari web.

Kurungan mempunyai sokongan yang baik untuk JavaScript, CSS, HTML, dan Node.js. Ini juga mempunyai ciri-ciri bagus seperti penyuntingan CSS dalam talian yang berkaitan dengan ID HTML (Quick Edit). Di samping itu, Kurungan mempunyai UI yang bersih dan pratonton langsung untuk laman web yang anda edit. Ini adalah pilihan yang sangat baik untuk penyunting kod percuma.

Pelengkap automatik JavaScript dalam Kurungan sangat bagus, dengan penutupan kurungan automatik, kurungan sudut, dan tanda kurung persegi, serta menu lungsur automatik untuk kata kunci, pemboleh ubah, dan kaedah, termasuk kaedah jQuery setelah anda menaip $. Tanda kurung dapat mengawal debugger Node.js dan memulakan semula Node dari item menu. Sangat mudah untuk menambahkan peluasan untuk fungsi tambahan seperti sokongan TypeScript dan JSX, integrasi Bower, dan integrasi Git.

Edit Pantas, Dokumen Pantas, Buka Cepat, dan Pratonton Langsung semuanya membantu menyederhanakan penyuntingan aplikasi web dan membiarkan anda fokus pada apa yang anda kodkan atau rancang. Pada sisi negatifnya, beberapa sambungan Braket sukar dikonfigurasi, tetapi tidak semudah pakej Emacs atau pemalam Vim.

Kos: Sumber terbuka percuma. Platform: Windows, MacOS, Linux. 

Atom

Atom adalah editor pengaturcaraan bebas sumber terbuka dan bebas dari GitHub untuk Windows, MacOS, dan Linux yang berintegrasi dengan aplikasi GitHub dan mempunyai ribuan pakej dan tema yang tersedia. Saya dapat dengan beberapa pakej komuniti, ditambah dengan pakej dan tema teras.

Tidak menghairankan, memandangkan asalnya, sumber Atom dihoskan di GitHub. Ia ditulis dalam CoffeeScript dan disatukan dengan Node.js. Atom adalah varian khusus Chromium yang direka untuk menjadi penyunting teks dan bukannya penyemak imbas web; setiap tetingkap Atom pada asasnya adalah laman web yang dibuat secara tempatan. Pasukan Atom mengembangkan Atom di Atom.

Prestasi Atom cukup bagus apabila tidak diperbaharui sendiri. Ia dipaparkan sepenuhnya di luar kotak, dengan pencari kabur, carian dan penggantian projek yang cepat, pelbagai kursor dan pilihan, pelbagai panel, potongan, lipatan kod, dan kemampuan untuk mengimport tatabahasa dan tema TextMate. Atom boleh memasang dua utiliti baris perintah: Atom untuk memulakan penyunting dari shell, dan APM untuk menguruskan pakej Atom, dalam semangat NPM untuk Node.js. Saya sering menggunakan Atom ketika melayari repositori yang saya kloning dari GitHub, kerana aplikasi GitHub merangkumi item menu konteks untuk melakukan itu.

Kos: Sumber terbuka percuma. Platform: Windows, MacOS, Linux.

Komodo Edit

Komodo Edit, versi bebas fungsi ActiveState dari Komodo IDE, adalah penyunting berbilang bahasa yang cukup baik. Semua yang saya katakan mengenai Komodo IDE sebagai editor (lihat "Ulasan: The 6 ID JavaScript terbaik") berlaku untuk Komodo Edit.