รีวิว: 6 JavaScript IDE ที่ดีที่สุด

JavaScript ถูกใช้สำหรับแอปพลิเคชันประเภทต่างๆในปัจจุบัน ส่วนใหญ่ JavaScript ทำงานร่วมกับ HTML5 และ CSS เพื่อสร้างส่วนหน้าของเว็บ แต่ JavaScript ยังช่วยสร้างแอปพลิเคชันมือถือและพบว่ามีส่วนสำคัญที่ส่วนหลังในรูปแบบของเซิร์ฟเวอร์ Node.js โชคดีที่เครื่องมือพัฒนา JavaScript ทั้งบรรณาธิการและ IDE กำลังเพิ่มขึ้นเพื่อตอบสนองความท้าทายใหม่ ๆ

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

Eclipse 2018 พร้อมเครื่องมือพัฒนา JavaScript

ย้อนกลับไปในสมัยโบราณที่ Java Swing เป็นสิ่งใหม่และน่าตื่นเต้นฉันสนุกกับการใช้ Eclipse สำหรับการพัฒนา Java แต่ในไม่ช้าก็ย้ายไปยัง Java IDEs อื่น ๆ เมื่อห้าปีก่อนตอนที่ฉันพัฒนา Android ด้วย Eclipse ฉันพบว่าประสบการณ์นั้นใช้ได้ แต่ก็น่าสนใจ เมื่อฉันพยายามใช้ Eclipse Luna กับ JSDT สำหรับการพัฒนา JavaScript ในปี 2014 มันแสดงข้อผิดพลาดที่เป็นบวกอย่างต่อเนื่องสำหรับรหัสที่ถูกต้องที่ผ่าน JSHint

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

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

โชคดีที่ผู้ขายและโครงการโอเพ่นซอร์สหลายรายก้าวขึ้นสู่ตำแหน่งตั้งแต่นั้นมา Eclipse 2018 พร้อมเครื่องมือพัฒนา JavaScript มีตัวแก้ไข JavaScript ที่เหมาะสมและดีบักเกอร์ที่ใช้ Chrome แต่ไม่รู้เกี่ยวกับ TypeScript ซึ่งใช้โดย Angular หรือเกี่ยวกับไฟล์ ES6 และ JSX ซึ่งใช้โดย React

Eclipse มีความสุขกับตลาดปลั๊กอินขนาดใหญ่ สำหรับ TypeScript ให้พิจารณาปลั๊กอิน TypeScript 1.0.0 ฟรี สำหรับ Angular, TypeScript และ ES6 ให้พิจารณา Angular IDE เชิงพาณิชย์ (โดย CodeMix เดิมคือ Webclipse) และสำหรับโครงการ React ที่มีไฟล์ JSX ให้ลองใช้ TypeScript IDE แบบโอเพนซอร์ส หากคุณเพิ่มมากกว่าหนึ่งรายการคุณจะต้องแก้ไขข้อพิพาทว่าไฟล์ใดควรแก้ไขไฟล์ TypeScript แต่นั่นไม่ใช่เรื่องใหญ่

เครื่องมือ CodeMix ถูกเรียกเก็บเงินจากการเพิ่ม Visual Studio Code smarts ไปยัง Eclipse ไม่เหมือนกับปลั๊กอิน Eclipse ส่วนใหญ่ Angular IDE by CodeMix ไม่ฟรี แต่มีให้ทดลองใช้ฟรี 45 วัน เนื่องจาก Visual Studio Code นั้นฟรีฉันจะพิจารณาก่อนที่จะจ่ายเงินสำหรับ Angular IDE

ค่าใช้จ่าย: ฟรี; Angular IDE โดย CodeMix, $ 29 (ส่วนตัว) หรือ $ 48 (เชิงพาณิชย์) ต่อปี แพลตฟอร์ม: Windows, MacOS และ Linux

ActiveState Komodo IDE

ฉันเป็นผู้ใช้และเป็นแฟนของ Komodo IDE ตั้งแต่เปิดตัวครั้งแรกในปี 2544 แม้ว่าผลิตภัณฑ์รุ่นใหม่ ๆ เช่น Visual Studio Code และ WebStorm จะมีมากกว่านี้ในบางพื้นที่ แต่ก็ยังคงเป็นตัวแก้ไขและ IDE ที่ดี

Komodo IDE มีการแก้ไข JavaScript ขั้นสูงการเน้นไวยากรณ์การนำทางและการดีบัก แต่ไม่รวมการตรวจสอบโค้ด JavaScript ด้วยเหตุนี้คุณสามารถเรียกใช้ JSHint ในเชลล์ได้ตลอดเวลา

Komodo รองรับการเขียนโปรแกรมและภาษามาร์กอัปหลายสิบภาษา ด้วยการรองรับการเขียนโปรแกรมและภาษามาร์กอัปที่หลากหลายรวมถึงการปรับโครงสร้างการดีบักและการสร้างโปรไฟล์ Komodo IDE จึงเป็นตัวเลือกที่ดีมากสำหรับการพัฒนาแบบ end-to-end ในภาษาโอเพนซอร์ส

Komodo มีโมดูลการปรับโครงสร้างโค้ดสำหรับทุกภาษาที่มี Code intelligence: PHP, Perl, Python, Ruby, Tcl, JavaScript และ Node.js น่าเสียดายที่ลักษณะ "ตัวส่วนร่วมน้อยที่สุด" ของวิธีการนี้จำกัดความสามารถในการเปลี่ยนชื่อตัวแปรและสมาชิกชั้นเรียนและการแยกโค้ดออกเป็นวิธีการ อย่างไรก็ตามนี่คือบางกรณีที่มีประโยชน์ที่สุด

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

Komodo IDE มีคุณสมบัติหลายประการที่ผลิตภัณฑ์คู่แข่งส่วนใหญ่ขาด หนึ่งคือ HTTP Inspector ซึ่งยอดเยี่ยมสำหรับการดีบักการโทรกลับของ Ajax อีกอย่างคือชุดเครื่องมือ Rx (นิพจน์ทั่วไปหรือ regex) ซึ่งเป็นวิธีที่ยอดเยี่ยมในการสร้างและทดสอบนิพจน์ทั่วไปสำหรับ JavaScript, Perl, PHP, Python และ Ruby

การทำงานร่วมกันเป็นอีกหนึ่งตัวสร้างความแตกต่างของ Komodo IDE - ให้คิดว่าเป็น Google เอกสารสำหรับโค้ด คุณสามารถสร้างเซสชันสำหรับกลุ่มไฟล์เพิ่มผู้ติดต่อในเซสชันเป็นผู้ทำงานร่วมกันจากนั้นทำงานร่วมกันในไฟล์เดียวกันพร้อมกันด้วยการซิงโครไนซ์แบบเรียลไทม์

การทำงานร่วมกันไม่ได้ทดแทนการควบคุมซอร์สโค้ด แต่เป็นส่วนเสริมที่มีประโยชน์ Komodo IDE รวมการควบคุมซอร์สโค้ดโดยใช้ CVS, Subversion, Perforce, Git, Mercurial และ Bazaar รองรับเฉพาะการควบคุมเวอร์ชันพื้นฐานเท่านั้น การดำเนินการขั้นสูงเช่นการแยกสาขาต้องทำโดยใช้ไคลเอ็นต์ควบคุมซอร์สโค้ดแยกต่างหาก

แม้ว่า Komodo จะไม่มีตัวจัดรูปแบบเอกสาร JavaScript ของตัวเอง แต่ก็ใช้ประโยชน์จากโอเพ่นซอร์สฟรีที่ดีที่สุดสำหรับวัตถุประสงค์นี้ ฟอร์แมตเตอร์เริ่มต้นสำหรับไฟล์ JavaScript นอกกรอบคือ JS Beautifier แต่มีอีกเก้าตัวเลือกให้ใช้งานผ่านเมนูแบบเลื่อนลง

Komodo IDE รองรับการดีบัก JavaScript ฝั่งไคลเอ็นต์ใน Chrome และสามารถดีบัก Node.js ได้ทั้งในเครื่องและจากระยะไกล นอกจากนี้ยังแก้จุดบกพร่อง Perl, Python, PHP, Ruby, Tcl และ XSLT

Komodo IDE มีโปรแกรมดู DOM ที่ช่วยให้คุณดูเอกสาร XML และ HTML เป็นต้นไม้ที่ยุบได้ นอกจากนี้ยังช่วยให้คุณทำการค้นหา XPath เพื่อกรองต้นไม้

การสร้างโปรไฟล์โค้ดและโมดูลการทดสอบหน่วยของ Komodo ไม่รองรับ JavaScript อย่างไรก็ตามทั้ง JavaScript และ Node.js ได้รับการสนับสนุนโดยโมดูล Code Intelligence ของ Komodo ซึ่งใช้การเรียกดูโค้ดการเติมข้อความอัตโนมัติและคำแนะนำ

Komodo IDE สามารถเผยแพร่กลุ่มไฟล์ผ่าน FTP, SFTP, FTPS หรือ SCP Komodo ยังสามารถซิงโครไนซ์ไฟล์และตรวจจับข้อขัดแย้งในการเผยแพร่ที่อาจทำให้คุณเขียนทับการเปลี่ยนแปลงของผู้อื่นได้

โดยรวมแล้ว Komodo เป็น JavaScript IDE ที่ดี แต่ไม่ยอดเยี่ยมและเป็นโปรแกรมแก้ไข JavaScript ที่ดี แต่ไม่ยอดเยี่ยม อย่างไรก็ตามอาจตอบสนองความต้องการของคุณได้ดีโดยเฉพาะอย่างยิ่งหากคุณทำงานกับ Perl, Python, PHP, Ruby, Tcl หรือ XSLT

ค่าใช้จ่าย: $ 295 บวก $ 87 ต่อปีสำหรับการอัพเกรดและการสนับสนุน แพลตฟอร์ม: Windows (7 หรือสูงกว่า), MacOS (10.9 หรือสูงกว่า), Linux

Apache NetBeans

NetBeans รองรับ JavaScript, HTML5 และ CSS3 ในโปรเจ็กต์เว็บได้ดีมากและรองรับเฟรมเวิร์ก Cordova / PhoneGap สำหรับการสร้างแอปพลิเคชันมือถือที่ใช้ JavaScript NetBeans ไม่ใช่ IDE ที่เร็วที่สุดในบล็อก แต่เป็นหนึ่งในสิ่งที่สมบูรณ์กว่า และแน่นอนราคาถูก: NetBeans ให้บริการฟรีภายใต้ใบอนุญาตโอเพนซอร์ส

โปรแกรมแก้ไข NetBeans JavaScript ให้การเน้นไวยากรณ์การเติมข้อความอัตโนมัติและการพับโค้ดค่อนข้างมากอย่างที่คุณคาดหวัง คุณสมบัติการแก้ไข JavaScript ยังใช้งานได้กับโค้ด JavaScript ที่ฝังอยู่ในไฟล์ PHP, JSP และ HTML การสนับสนุน jQuery ถูกรวมไว้ในตัวแก้ไข NetBeans 8.2 มีการสนับสนุน Node.js และ Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha และ Selenium ใหม่หรือปรับปรุง

การวิเคราะห์โค้ดจะทำงานในพื้นหลังเมื่อคุณแก้ไขโดยให้คำเตือนและคำแนะนำ การดีบักจะทำงานในเบราว์เซอร์ WebKit ในตัวและใน Chrome ที่ติดตั้ง NetBeans Connector ดีบักเกอร์สามารถตั้งค่า DOM บรรทัดเหตุการณ์และเบรกพอยต์ XMLHttpRequest และจะแสดงตัวแปรนาฬิกาและสแต็กการโทร หน้าต่างบันทึกเบราว์เซอร์ในตัวจะแสดงข้อยกเว้นข้อผิดพลาดและคำเตือนของเบราว์เซอร์

NetBeans สามารถกำหนดค่าและทำการทดสอบหน่วยด้วยไฟล์ JsTestDriver ซึ่งเป็นไฟล์ JAR (Java archive) ที่คุณสามารถดาวน์โหลดได้ฟรี การดีบักของการทดสอบหน่วยจะเปิดใช้งานโดยอัตโนมัติหากคุณระบุ Chrome ด้วย NetBeans Connector เป็นหนึ่งในเบราว์เซอร์ JsTestDriver เมื่อคุณกำหนดค่า JsTestDriver ในหน้าต่าง Services

เมื่อคุณแก้ไขข้อบกพร่องของเว็บแอปพลิเคชันใน Chrome ด้วย NetBeans Connector และแก้ไข CSS จาก Chrome Developer Tools NetBeans จะจับการเปลี่ยนแปลงและบันทึกลงในไฟล์ CSS อย่างไรก็ตามหากไฟล์ CSS ของคุณสร้างขึ้นจากสไตล์ชีต Less หรือ Sass คุณจะต้องอัปเดตซอร์สชีทด้วยตนเองเนื่องจากไฟล์ CSS เป็นเพียงเอาต์พุตที่คอมไพล์เท่านั้น

ในเบราว์เซอร์ WebKit ในตัวและใน Chrome ที่ติดตั้ง NetBeans Connector คุณสามารถใช้การตรวจสอบเครือข่าย NetBeans เพื่อดูส่วนหัวของคำขอการตอบกลับและการเรียกกองซ้อนสำหรับการสื่อสาร REST สำหรับการสื่อสาร WebSocket ทั้งส่วนหัวและกรอบข้อความจะแสดงขึ้น โดยรวมแล้ว NetBeans ให้ประสบการณ์การดีบักกับ Chrome ที่ดีกว่าที่คุณได้รับใน Firefox ด้วย Firebug เล็กน้อย

NetBeans รวมการควบคุมซอร์สโค้ดเข้ากับ Git, Subversion, Mercurial และ CVS การสนับสนุน Git ได้รับการเสริมด้วยโปรแกรมดูภาพกราฟิกและระบบการเก็บเข้าลิ้นชักภายใน IDE รหัสสี NetBeans สถานะ Git ของไฟล์ช่วยให้คุณดูประวัติการแก้ไขสำหรับทุกไฟล์และแสดงข้อมูลการแก้ไขและผู้เขียนสำหรับไฟล์ที่ควบคุมเวอร์ชันแต่ละบรรทัด NetBeans มีการผสานรวมที่คล้ายกันกับ Subversion, Mercurial และ CVS แต่ฉันทดสอบ Git เท่านั้น

NetBeans รวมการติดตามปัญหาเข้ากับ Jira และ Bugzilla ในหน้าต่างงาน NetBeans คุณสามารถค้นหางานบันทึกการค้นหาอัพเดตงานและแก้ไขงานในที่เก็บงานที่คุณลงทะเบียนไว้ NetBeans ยังมีการรวมเซิร์ฟเวอร์ทีมสำหรับไซต์ที่ใช้โครงสร้างพื้นฐานของ Kenai

เท่าที่ฉันสามารถระบุได้ NetBeans ไม่มีการทำโปรไฟล์ JavaScript แม้ว่าจะสามารถกำหนดโปรไฟล์แอปพลิเคชัน Java และโมดูล EJB ได้ และในขณะที่ NetBeans สามารถ refactor Java และ PHP แต่ก็ไม่สามารถ refactor JavaScript ได้

โดยรวมแล้ว NetBeans เป็นคู่แข่งที่ดีสำหรับการพัฒนา JavaScript, HTML5 และ CSS3 ฝั่งไคลเอ็นต์โดยเฉพาะอย่างยิ่งหากคุณกำลังพัฒนา Java, PHP หรือ C ++ บนเซิร์ฟเวอร์ หากคุณไม่มีงบประมาณสำหรับ WebStorm และไม่ชอบ Microsoft คุณจะพบว่า NetBeans ทำงานได้ดีตราบใดที่คุณไม่รีบร้อนมาก

ค่าใช้จ่าย: ฟรี แพลตฟอร์ม: Windows, Solaris, MacOS, Linux 

Microsoft Visual Studio 2017

ในการทบทวน Visual Studio 2017 ฉบับเต็มของฉันฉันได้พูดคุยเกี่ยวกับผลิตภัณฑ์โดยรวมโดยมีการอ้างอิงถึง JavaScript เพียงเล็กน้อยเท่านั้น ฉันจะย้อนกลับการเน้นที่นี่

โดยรวมแล้ว Visual Studio 2017 ทำหน้าที่เป็น JavaScript IDE ได้ดีแม้ว่าจะเป็น. Net IDE ที่ดีกว่าและไม่ดีเท่า WebStorm สำหรับ JavaScript แม้ว่าจะทำหน้าที่เป็นตัวแก้ไข JavaScript ได้ดี แต่ก็เป็นตัวแก้ไข C # ที่ดีกว่าและไม่ดีหรือเร็วเท่า Sublime Text สำหรับ JavaScript

ดังที่คุณเห็นในภาพหน้าจอด้านล่าง Visual Studio 2017 ทำงานได้ดีกับการระบายสีไวยากรณ์ JavaScript และการพับโค้ด นอกจากนี้ยังทำงานได้ดีด้วยการนำทางโค้ด JavaScript: คลิกขวาที่ฟังก์ชันหรือชื่อสมาชิกและคุณสามารถข้ามไปที่คำจำกัดความหรือค้นหาการอ้างอิงทั้งหมดได้อย่างง่ายดาย เมื่อคุณดูคำจำกัดความเสร็จแล้วคุณสามารถกดลูกศรย้อนกลับที่ด้านบนของอินเทอร์เฟซเพื่อย้อนกลับไปยังจุดที่คุณอยู่

คุณสามารถแทรกข้อมูลโค้ดและล้อมรอบการเลือกของคุณได้อย่างง่ายดายด้วยโค้ดที่เหมาะสมเช่นการเข้ารหัส HTML หรือ URL ของตัวแปรสตริง นอกจาก JavaScript, HTML และ CSS แล้วคุณยังสามารถแก้ไขไฟล์ Markdown และดู Markdown ที่แสดงผลและคุณสามารถทำงานกับ TypeScript ได้

นอกจากนี้คุณยังสามารถเขียนโค้ดในภาษา. Net, C ++ และใน Python และเช่นเดียวกับกรณี Visual Studio มาเป็นเวลานานคุณสามารถทำงานกับฐานข้อมูลได้โดยตรงจาก IDE Visual Studio มีความแข็งแกร่งเป็นพิเศษเมื่อทำงานกับฐานข้อมูล SQL Server คุณสามารถใช้ Visual Studio แทน SQL Server Management Studio สำหรับการดำเนินการฐานข้อมูลส่วนใหญ่ที่คุณต้องการทำในฐานะนักพัฒนา

Visual Studio 2017 รองรับการดีบักในเบราว์เซอร์ใด ๆ ที่คุณสนใจรวมถึงเบราว์เซอร์บนอุปกรณ์มือถือและในโปรแกรมเลียนแบบ นอกจากนี้ยังมีสองเบราว์เซอร์ของตัวเอง: เว็บเบราว์เซอร์ภายในธรรมดาซึ่งเป็น (แปลกใจ!) เวอร์ชันของ Internet Explorer และตัวตรวจสอบหน้าซึ่งจะแสดงหน้าที่แสดงผลพร้อมกับแหล่งที่มาและสไตล์ทั้งหมด แม้ว่าตัวตรวจสอบเพจจะใช้เวลามากในการทำวิศวกรรมย้อนกลับในการตั้งค่าหน้าเว็บ แต่เมื่อคุณอยู่ในนั้นแล้วคุณสามารถอยู่ที่นั่นได้โดยไม่ต้องใช้ Visual Studio เบราว์เซอร์และเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ .

ประสิทธิภาพของ Visual Studio 2017 มักจะค่อนข้างดีถ้าคุณให้หน่วยความจำและพลัง CPU เพียงพอ แต่มีแนวโน้มที่จะต้องใช้ทรัพยากรจำนวนมาก Visual Studio 2017 มีการวินิจฉัยประสิทธิภาพที่ยอดเยี่ยมสำหรับแอปพลิเคชัน แต่โดยมากแล้วพวกเขาก็ไม่ได้มีประโยชน์สำหรับโค้ด JavaScript ทั่วไปซึ่งโดยทั่วไปจะทำงานในเบราว์เซอร์ Visual Studio มีการกำหนดเวลาของฟังก์ชัน JavaScript ที่เฉพาะเจาะจงการตอบสนองของ HTML UI และเครื่องมือหน่วยความจำ JavaScript แต่จะใช้กับโครงการ Universal Windows Platform ที่ใช้ JavaScript เท่านั้นไม่ใช่โครงการเว็บที่ใช้ JavaScript

Visual Studio 2017 ประกอบด้วยการแก้ไขแอปพลิเคชัน Node.js ที่ยอดเยี่ยม, IntelliSense, การทำโปรไฟล์, การรวม NPM, การสนับสนุน TypeScript, การดีบักในเครื่องและจากระยะไกล (Windows, MacOS, Linux) และการดีบักบน Azure Web Apps และ Azure Cloud Services นอกจากนี้ยังรองรับ CSS, HTML, JavaScript, TypeScript, CoffeeScript และ Less ซึ่งรวมถึงการเรียกใช้ JSHint ในขณะที่คุณพิมพ์ช่วยให้คุณสามารถย่อขนาดไฟล์ JavaScript จากเมนูบริบทและรวบรวมไฟล์ CoffeeScript โดยอัตโนมัติเมื่อบันทึกแสดงตัวอย่างแบบเคียงข้างกันของ JavaScript ที่สร้างขึ้น