รีวิว: ตัวแก้ไข JavaScript ที่ดีที่สุด 10 อันดับ

โปรแกรมเมอร์ JavaScript มีเครื่องมือดีๆมากมายให้เลือก - เกือบจะมากเกินไปที่จะติดตาม ในบทความนี้ฉันจะพูดถึงโปรแกรมแก้ไขข้อความ 10 รายการพร้อมการสนับสนุนที่ดีสำหรับการพัฒนาด้วย JavaScript, HTML5 และ CSS และสำหรับการจัดทำเอกสารด้วย Markdown เหตุใดจึงต้องใช้โปรแกรมแก้ไขสำหรับการเขียนโปรแกรม JavaScript แทน IDE ในคำ: ความเร็ว

ความแตกต่างที่สำคัญระหว่างบรรณาธิการและ IDE คือ IDE สามารถดีบักและบางครั้งก็สร้างโปรไฟล์โค้ดของคุณและ IDE มีการสนับสนุนระบบการจัดการวงจรการใช้งานแอปพลิเคชัน (ALM) บรรณาธิการหลายคนที่เราพูดถึงในที่นี้สนับสนุนระบบควบคุมเวอร์ชันอย่างน้อยหนึ่งเวอร์ชันซึ่งมักจะเป็น Git ดังนั้นเกณฑ์จึงมีความแตกต่างระหว่าง IDE และบรรณาธิการน้อยกว่าที่เคยเป็น

Sublime Text และ Visual Studio Code เป็นอันดับต้น ๆ ของโปรแกรมแก้ไข JavaScript นั่นคือ Sublime Text สำหรับความเร็วพอ ๆ กับคุณสมบัติการแก้ไขที่สะดวกและ Visual Studio Code สำหรับคุณสมบัติที่ดียิ่งขึ้นและความเร็วที่เกือบจะดี วงเล็บเกิดขึ้นที่สาม ในขณะที่ TextMate ติดอันดับสูงในรายการของฉันเมื่อไม่กี่ปีที่ผ่านมาความสามารถของมันก็ยังไม่ได้พัฒนาขึ้นมา

เป็นไปได้มากว่าคุณจะพบโปรแกรมแก้ไข JavaScript ที่คุณเลือกใน Sublime Text, Visual Studio Code หรือ Brackets แต่เครื่องมืออื่น ๆ อีกมากมายเช่น Atom, BBEdit, Komodo Edit, Notepad ++, Emacs และ Vim ล้วนมีบางอย่างที่จะแนะนำ ขึ้นอยู่กับงานในมือคุณอาจพบว่างานใดชิ้นหนึ่งมีประโยชน์

วิดีโอที่เกี่ยวข้อง: JavaScript คืออะไร? ผู้สร้าง Brendan Eich อธิบาย

Brendan Eich ผู้สร้างภาษาโปรแกรม JavaScript อธิบายถึงวิธีการใช้ภาษาและเหตุใดจึงยังคงเป็นที่ชื่นชอบในหมู่โปรแกรมเมอร์เพราะใช้งานง่าย

ลองดูตัวเลือกและเปรียบเทียบในตอนท้าย

ข้อความประเสริฐ

หากคุณต้องการโปรแกรมแก้ไขข้อความการเขียนโปรแกรมที่ยืดหยุ่นมีประสิทธิภาพและขยายได้ซึ่งรวดเร็วทันใจและคุณไม่จำเป็นต้องเปลี่ยนไปใช้หน้าต่างอื่นเพื่อตรวจสอบโค้ดการดีบักและการปรับใช้งานจากนั้นไม่ต้องมองหาอะไรเพิ่มเติมนอกจาก Sublime Text

นอกจากความเร็วแล้วจุดแข็งที่น่าสังเกตอีกมากมายของ Sublime Text cover รองรับไฟล์มากกว่า 70 ประเภท ได้แก่ JavaScript, HTML และ CSS การนำทางเกือบทันทีและการสลับโครงการทันที การเลือกหลายรายการ (ทำการเปลี่ยนแปลงหลายรายการพร้อมกัน) รวมถึงการเลือกคอลัมน์ (เลือกพื้นที่สี่เหลี่ยมของไฟล์) หลายหน้าต่าง (ใช้จอภาพทั้งหมดของคุณ) และหน้าต่างแยก (ใช้ประโยชน์จากอสังหาริมทรัพย์บนหน้าจอของคุณ) การปรับแต่งที่สมบูรณ์ด้วยไฟล์ JSON อย่างง่าย API ปลั๊กอินที่ใช้ Python; และชุดคำสั่งที่เป็นหนึ่งเดียวและค้นหาได้

สำหรับโปรแกรมเมอร์ที่มาจากตัวแก้ไขอื่น Sublime Text รองรับชุดรวม TextMate (ไม่รวมคำสั่ง) และการจำลอง Vi / Vim เอกสาร Sublime Text ที่ไม่เป็นทางการทำให้มีข้อสังเกต (และไม่ถูกต้อง) เกี่ยวกับผู้ใช้ Emacs ( เช่นmoi ) แต่ฉันจะมองข้ามไป เหตุใดเอกสาร Sublime Text ที่ไม่เป็นทางการจึงมีอยู่ ประการหนึ่งเอกสารอย่างเป็นทางการน้อยกว่าที่สมบูรณ์ - น้อยกว่ามาก

เมื่อฉันพูดว่า "เกือบจะนำทางในทันที" ก่อนหน้านี้ฉันหมายถึงมัน ตัวอย่างเช่นหากต้องการข้ามจากตำแหน่งปัจจุบันบนหน้าจอไปยังคำจำกัดความของgetResponseHeaderใน ajax.js ฉันสามารถพิมพ์ Command-P บน Mac หรือ Ctrl-P บนพีซีจากนั้นajเพื่อเปิดมุมมองชั่วคราวใน ajax.js จากนั้น@grhและ Enter เพื่อเปิดแท็บที่getResponseHeaderเลือกไว้ Sublime Text สามารถรองรับการพิมพ์ของฉันได้ รู้สึกตอบสนองได้ดีพอ ๆ กับตัวแก้ไข DOS รุ่นเก่าที่ดีที่สุดเช่น Brief และ Kedit

เมื่อฉันเลือก  getResponseHeaderแล้วฉันสามารถค้นหาการใช้งานทั้งหมดของฟังก์ชันในบริบทได้โดยพิมพ์ Shift-Command-F บน Mac หรือ Shift-Ctrl-F บนพีซีจากนั้นกด Enter แท็บใหม่จะแสดงผลการค้นหาที่มีข้อความค้นหาอยู่ในแต่ละตัวอย่างข้อมูล 5 บรรทัด การดับเบิลคลิกที่ข้อความในกล่องจะแสดงบริบทไฟล์แบบเต็มในแท็บใหม่

การคลิกชื่อไฟล์ในแถบด้านข้างโฟลเดอร์ทางซ้ายจะเป็นการเปิดแท็บชั่วคราวที่แสดงเนื้อหาของไฟล์ การคลิกที่ไฟล์อื่นจะแทนที่แท็บนั้น ที่นี่อีกครั้ง Sublime Text สามารถติดตามการพิมพ์และการคลิกของฉันได้ ในทำนองเดียวกันการนำทางที่มีขนาดลดลงทางด้านขวาบนของหน้าทำให้ฉันสามารถย้ายไฟล์ได้เกือบจะในทันทีโดยไม่ต้องใช้ค่าใช้จ่ายในการเลื่อน ฉันหวังว่า Microsoft Word จะตอบสนองได้ดี

การเลือกหลายรายการและการเลือกคอลัมน์ทำให้การแก้ไขที่น่ารำคาญประเภทต่างๆทำงานได้รวดเร็วซึ่งเคยต้องใช้นิพจน์ทั่วไป คุณจำเป็นต้องเปลี่ยนรายการคำให้เป็นโครงสร้าง JSON ที่แต่ละคำล้อมรอบด้วยเครื่องหมายคำพูดคู่และคำที่ยกมาแต่ละคำจะถูกคั่นด้วยเครื่องหมายจุลภาคถัดไปหรือไม่ การกดแป้นพิมพ์จะใช้เวลาประมาณแปดครั้งใน Sublime Text ไม่ว่าคุณจะมีคำในรายการกี่คำก็ตาม

ในกล่องพัฒนา Windows ของฉันฉันใช้จอภาพกว้างสองจอ บน MacBook ของฉันฉันใช้จอภาพ Retina และจอภาพ Thunderbolt เว้นแต่ว่าฉันจะแก้ไขบนจอแสดงผลเดียวและแก้ไขข้อบกพร่องในอีกจอหนึ่งฉันมักจะต้องการดูไฟล์ต้นฉบับจำนวนมากและมุมมองที่แตกต่างกันไปในไฟล์ต้นฉบับพร้อมกัน Sublime Text รองรับหน้าต่างหลายหน้าต่างแบ่งหน้าต่างพื้นที่ทำงานหลายแห่งต่อโปรเจ็กต์หลายมุมมองและบานหน้าต่างหลายบานที่มีมุมมอง มันค่อนข้างง่ายที่จะใช้พื้นที่หน้าจอทั้งหมดของฉันเมื่อฉันต้องการและเพื่อรวมเข้าด้วยกันเมื่อฉันต้องการให้มีพื้นที่สำหรับการดีบักและการทดสอบ

คุณสามารถปรับแต่งทุกอย่างเกี่ยวกับ Sublime Text: โครงร่างสีแบบอักษรข้อความการผูกคีย์ส่วนกลางแท็บหยุดการผูกคีย์เฉพาะไฟล์และข้อมูลโค้ดและแม้แต่กฎการเน้นไวยากรณ์ ค่ากำหนดถูกเข้ารหัสเป็นไฟล์ JSON นิยามเฉพาะภาษาคือไฟล์การกำหนดลักษณะ XML มีชุมชนที่ใช้งานอยู่รอบ ๆ Sublime Text ที่สร้างและดูแลแพ็คเกจและปลั๊กอิน Sublime Text ฟีเจอร์หลายอย่างที่ตอนแรกฉันคิดว่า Sublime Text ขาดไปไม่ว่าจะเป็นอินเทอร์เฟซ JSLint และ JSHint, JsFormat, JsMinify, PrettyJSON และ Git ซึ่งสามารถใช้ได้ผ่านชุมชนโดยใช้ Package Installer

เหตุผลประการหนึ่งสำหรับประสิทธิภาพที่ยอดเยี่ยมของ Sublime Text คือมีการเข้ารหัสอย่างแน่นหนา อีกเหตุผลหนึ่งคือ Sublime Text ไม่ใช่ IDE และไม่จำเป็นต้องมีค่าใช้จ่ายในการทำบัญชีของ IDE

จากมุมมองของผู้พัฒนานี่เป็นการแลกเปลี่ยนที่ยุ่งยาก หากคุณอยู่ในวงจรการพัฒนาที่ขับเคลื่อนด้วยการทดสอบ“ สีแดงสีเขียวตัวปรับแต่ง” IDE ที่ตั้งค่าเพื่อแก้ไขทดสอบตัวปรับแต่งและการครอบคลุมโค้ดติดตามจะช่วยคุณได้มากที่สุด หากคุณกำลังทำการตรวจสอบโค้ดหรือการแก้ไขที่สำคัญในทางกลับกันคุณจะต้องการตัวแก้ไขที่เร็วและมีประสิทธิภาพที่สุดที่คุณจะพบได้ โปรแกรมแก้ไขนั้นอาจเป็น Sublime Text

ค่าใช้จ่าย: ทดลองใช้ฟรีไม่ จำกัด $ 70 ต่อผู้ใช้สำหรับธุรกิจหรือใบอนุญาตส่วนบุคคล แพลตฟอร์ม: Windows, MacOS และ Linux

รหัส Visual Studio

Visual Studio Code เป็นโปรแกรมแก้ไขและ IDE ที่มีน้ำหนักเบาฟรีจาก Microsoft มีส่วนประกอบของ Visual Studio ผสมกับ Atom Electron shell แบบโอเพนซอร์สซึ่งให้การสนับสนุนที่ดีเยี่ยมสำหรับการพัฒนา ASP.Net Core ด้วย C # และสำหรับการพัฒนา Node.js ด้วย TypeScript และ JavaScript ด้วยรูปแบบทางประวัติศาสตร์ของ Microsoft ที่สนับสนุนเฉพาะ Visual Studio บน Windows Visual Studio Code ยังทำงานบน MacOS และ Linux ภาพหน้าจอด้านล่างถ่ายบน MacOS

Visual Studio Code มีการเติมโค้ด JavaScript ที่ดีอย่างน่าอัศจรรย์ด้วยการรวมคอมไพเลอร์ TypeScript และเอ็นจิ้น Salsa Visual Studio Code ส่งโค้ด JavaScript ของคุณไปยังคอมไพเลอร์ TypeScript ในเบื้องหลังเพื่ออนุมานประเภทและสร้างตารางสัญลักษณ์ คุณสามารถดูผลลัพธ์ในช่องใกล้ด้านล่างของภาพหน้าจอที่แสดงข้อมูลสำหรับ  hasOwnProperty วิธีการ

ตารางสัญลักษณ์เดียวกันช่วยให้ IntelliSense สามารถแสดงรายการตัวเลือกป๊อปอัปที่ยอดเยี่ยมสำหรับการเติมโค้ดตลอดการพิมพ์นิพจน์ คุณจะได้รับการปิดวงเล็บอัตโนมัติตัวเลือกการเติมคำอัตโนมัติรายการวิธีการอัตโนมัติหลังจากที่คุณพิมพ์.และรายการพารามิเตอร์อัตโนมัติภายในเมธอด คุณสามารถปรับปรุง IntelliSense ได้โดยการเพิ่มการอ้างอิงไปยังไฟล์ d.ts จาก  DefinitelyTypedนั้น Visual Studio Code จะเสนอให้คุณทำเช่นนั้นเมื่อพบปัญหาที่พบบ่อยเช่นการใช้  __dirnameซึ่งเป็นตัวแปรในตัวของ Node.js

การรองรับ Git นั้นดีมากและใช้งานง่ายมาก โปรแกรมดีบัก Visual Studio Code มอบประสบการณ์การดีบักที่ยอดเยี่ยมสำหรับการพัฒนา Node.js (และการพัฒนา ASP.Net) Visual Studio Code มีเครื่องมือที่ดีมากสำหรับ HTML, CSS, Less, Sass และ JSON ซึ่งใช้เทคโนโลยีเดียวกับที่ขับเคลื่อนเครื่องมือสำหรับนักพัฒนา Internet Explorer F12 นอกจากนี้ยังมีการผสานรวมที่ปรับแต่งได้กับนักวิ่งงานภายนอกเช่น  gulp และ  jake.

Visual Studio Code ได้ดึงดูดระบบนิเวศที่แข็งแกร่งของปลั๊กอินตัวอย่างเช่นเพื่อรองรับ Angular และ React ตอนนี้เป็นตัวแก้ไขที่ฉันแนะนำเมื่อฉันเขียนบทแนะนำเกี่ยวกับการสร้างแอปด้วย JavaScript และกรอบงานและไลบรารี TypeScript

ค่าใช้จ่าย: โอเพ่นซอร์สฟรี แพลตฟอร์ม: Windows, MacOS และ Linux

วงเล็บ

Brackets เป็นโปรแกรมแก้ไขโอเพนซอร์สฟรีซึ่งมีพื้นเพมาจาก Adobe ซึ่งสร้างขึ้นเพื่อมอบเครื่องมือที่ดีขึ้นสำหรับ JavaScript, HTML และ CSS รวมถึงเทคโนโลยีเว็บแบบเปิดที่เกี่ยวข้อง วงเล็บนั้นเขียนด้วย JavaScript, HTML และ CSS และนักพัฒนาใช้ Brackets เพื่อสร้าง Brackets นอกเหนือจากความสามารถในตัวแล้ว Brackets ยังมีตัวจัดการส่วนขยายและส่วนขยายยังมีให้บริการสำหรับภาษาและเครื่องมือต่างๆที่นักพัฒนาส่วนหน้าใช้ วงเล็บไม่เร็วเท่า Sublime Text หรือ TextMate แต่ก็ยังค่อนข้างเร็วยกเว้นการหยุดชั่วคราวเพื่อโหลดหรืออัปเดตเนื้อหาโปรแกรมจากเว็บ

วงเล็บรองรับ JavaScript, CSS, HTML และ Node.js ได้เป็นอย่างดี นอกจากนี้ยังมีคุณสมบัติที่ดีเช่นการแก้ไข CSS ในบรรทัดที่เกี่ยวข้องกับ HTML ID (แก้ไขด่วน) นอกจากนี้ Brackets ยังมี UI ที่สะอาดและการแสดงตัวอย่างแบบสดสำหรับหน้าเว็บที่คุณกำลังแก้ไข เป็นทางเลือกที่ดีมากสำหรับโปรแกรมแก้ไขโค้ดฟรี

autocompletion JavaScript ในวงเล็บเป็นสิ่งที่ดีมากที่มีการปิดอัตโนมัติของวงเล็บวงเล็บมุมและวงเล็บเช่นเดียวกับแบบเลื่อนลงอัตโนมัติเมนูสำหรับคำหลักตัวแปรและวิธีการรวมทั้งวิธีการ jQuery $หลังจากที่คุณพิมพ์ วงเล็บสามารถควบคุมดีบักเกอร์ Node.js และรีสตาร์ท Node จากรายการเมนู การเพิ่มส่วนขยายสำหรับฟังก์ชันเพิ่มเติมเช่นการรองรับ TypeScript และ JSX การรวม Bower และการรวม Git ทำได้ง่าย

Quick Edit, Quick Docs, Quick Open และ Live Preview ทั้งหมดช่วยปรับปรุงการแก้ไขเว็บแอปพลิเคชันและให้คุณมุ่งเน้นไปที่สิ่งที่คุณกำลังเขียนโค้ดหรือออกแบบ ในทางกลับกันส่วนขยาย Brackets บางตัวอาจเป็นเรื่องยุ่งยากในการกำหนดค่า แต่ก็ไม่ยุ่งยากเท่าแพ็คเกจ Emacs หรือปลั๊กอิน Vim

ค่าใช้จ่าย: โอเพ่นซอร์สฟรี แพลตฟอร์ม: Windows, MacOS, Linux 

อะตอม

Atom เป็นโปรแกรมแก้ไขการเขียนโปรแกรมแบบโอเพนซอร์สที่สามารถแฮ็กได้ฟรีจาก GitHub สำหรับ Windows, MacOS และ Linux ที่ทำงานร่วมกับแอป GitHub และมีแพ็คเกจและธีมมากมายให้เลือกใช้ ฉันได้รับจากแพ็คเกจชุมชนสองสามแพ็คเกจรวมทั้งแพ็คเกจหลักและธีม

ไม่น่าแปลกใจเนื่องจากแหล่งที่มาของ Atom นั้นโฮสต์บน GitHub เขียนใน CoffeeScript และรวมเข้ากับ Node.js Atom เป็นรูปแบบเฉพาะของ Chromium ที่ออกแบบมาเพื่อเป็นโปรแกรมแก้ไขข้อความแทนที่จะเป็นเว็บเบราว์เซอร์ ทุกหน้าต่าง Atom เป็นหน้าเว็บที่แสดงผลในเครื่อง ทีม Atom พัฒนา Atom ใน Atom

ประสิทธิภาพของ Atom ค่อนข้างดีเมื่อไม่ได้อัปเดตตัวเอง คุณลักษณะนี้มีคุณสมบัติครบถ้วนพร้อมด้วยเครื่องมือค้นหาแบบฟัซซี่การค้นหาและแทนที่แบบโปรเจ็กต์อย่างรวดเร็วเคอร์เซอร์และตัวเลือกหลายบานหน้าต่างหลายชิ้นส่วนย่อยการพับโค้ดและความสามารถในการนำเข้าไวยากรณ์และธีมของ TextMate Atom สามารถติดตั้งยูทิลิตี้บรรทัดคำสั่งสองรายการ: Atom เพื่อเริ่มการทำงานของเอดิเตอร์จากเชลล์และ APM เพื่อจัดการแพ็กเกจของ Atom โดยใช้ NPM สำหรับ Node.js ฉันพบว่าตัวเองใช้ Atom เป็นจำนวนมากเมื่อเรียกดูที่เก็บที่ฉันโคลนจาก GitHub เนื่องจากแอปพลิเคชัน GitHub มีรายการเมนูบริบทสำหรับการทำเช่นนั้น

ค่าใช้จ่าย: โอเพ่นซอร์สฟรี แพลตฟอร์ม: Windows, MacOS, Linux

Komodo แก้ไข

Komodo Edit ซึ่งเป็น Komodo IDE เวอร์ชันลดฟังก์ชันการทำงานฟรีของ ActiveState เป็นโปรแกรมแก้ไขหลายภาษาที่ค่อนข้างดี ทุกสิ่งที่ฉันพูดเกี่ยวกับ Komodo IDE ในฐานะตัวแก้ไข (ดู "รีวิว: JavaScript IDE ที่ดีที่สุด 6 รายการ") ใช้กับ Komodo Edit