검토 : 6 가지 최고의 JavaScript IDE

오늘날 JavaScript는 다양한 종류의 응용 프로그램에 사용됩니다. 대부분의 경우 JavaScript는 HTML5 및 CSS와 함께 작동하여 웹 프런트 엔드를 구축합니다. 그러나 JavaScript는 모바일 애플리케이션 구축에도 도움이되며 Node.js 서버의 형태로 백엔드에서 중요한 위치를 찾았습니다. 다행히도 편집기와 IDE 모두 JavaScript 개발 도구가 새로운 과제를 해결하기 위해 떠오르고 있습니다.

편집기 대신 IDE를 사용하는 이유는 무엇입니까? 주된 이유는 IDE가 디버그 할 수 있고 때로는 코드를 프로파일 링 할 수 있기 때문입니다. IDE는 또한 버전 제어를 위해 Git, GitHub, Mercurial, Subversion 및 Perforce와 통합되는 ALM 시스템을 지원합니다. 그러나 더 많은 편집자가 이러한 시스템에 후크를 추가함에 따라 ALM 지원은 차별화 요소가되고 있습니다.

JavaScript 개발 도구가있는 Eclipse 2018

Java Swing이 새롭고 흥미로 웠던 고대 시절에는 Java 개발에 Eclipse를 사용하는 것을 즐겼지만 곧 다른 Java IDE로 이동했습니다. 5 년 전 이클립스로 안드로이드 개발을했을 때, 경험은 괜찮지 만 엉뚱한 것을 발견했습니다. 2014 년 JavaScript 개발을 위해 Eclipse Luna를 JSDT와 함께 사용하려고했을 때 JSHint를 통과 한 유효한 코드에 대해 계속해서 오탐 오류가 표시되었습니다.

관련 비디오 : JavaScript 란? 제작자 Brendan Eich가 설명합니다.

JavaScript 프로그래밍 언어의 창시자 인 Brendan Eich는 언어가 사용되는 방법과 사용 편의성 때문에 프로그래머들 사이에서 여전히 선호하는 이유를 설명합니다.

다행히도 그 이후로 여러 공급 업체와 오픈 소스 프로젝트가 한 단계 올라 섰습니다. JavaScript 개발 도구가있는 Eclipse 2018에는 괜찮은 JavaScript 편집기와 Chrome 기반 디버거가 있지만 Angular에서 사용하는 TypeScript 또는 React에서 사용하는 ES6 및 JSX 파일에 대해서는 알지 못합니다.

Eclipse는 항상 거대한 플러그인 시장을 즐겼습니다. TypeScript의 경우 무료 TypeScript 1.0.0 플러그인을 고려하십시오. Angular, TypeScript 및 ES6의 경우 상용 Angular IDE (CodeMix, 이전 Webclipse 제공)를 고려하고 JSX 파일이있는 React 프로젝트의 경우 오픈 소스 TypeScript IDE를 사용해보십시오. 둘 이상을 추가하는 경우 TypeScript 파일을 편집해야하는 것에 대한 분쟁을 해결해야하지만 큰 문제는 아닙니다.

CodeMix 도구는 Visual Studio Code 스마트를 Eclipse에 추가하는 것으로 청구됩니다. 대부분의 Eclipse 플러그인과 달리 CodeMix의 Angular IDE는 무료는 아니지만 45 일 무료 평가판이 있습니다. Visual Studio Code가 무료라는 점을 감안할 때 Angular IDE 비용을 지불하기 전에 고려할 것입니다.

비용 : 무료; CodeMix의 Angular IDE, 연간 $ 29 (개인) 또는 $ 48 (상업용). 플랫폼 : Windows, MacOS 및 Linux.

ActiveState 코모도 IDE

저는 2001 년에 처음 소개 된 이래 Komodo IDE의 사용자이자 팬이었습니다. Visual Studio Code 및 WebStorm과 같은 최신 제품이 일부 영역에서이를 능가했지만 여전히 좋은 편집기이자 IDE입니다.

Komodo IDE는 고급 JavaScript 편집, 구문 강조 표시, 탐색 및 디버깅을 제공하지만 JavaScript 코드 검사는 포함하지 않습니다. 이를 위해 셸에서 항상 JSHint를 실행할 수 있습니다.

Komodo는 수십 개의 프로그래밍 및 마크 업 언어를 지원합니다. 리팩토링, 디버깅 및 프로파일 링을 포함한 광범위한 프로그래밍 및 마크 업 언어 지원을 통해 Komodo IDE는 오픈 소스 언어의 종단 간 개발을위한 매우 좋은 선택입니다.

Komodo에는 코드 인텔리전스를 제공하는 모든 언어 (PHP, Perl, Python, Ruby, Tcl, JavaScript 및 Node.js)에 대한 코드 리팩토링 모듈이 있습니다. 안타깝게도이 접근 방식의 "최소 공통 분모"특성은 변수 및 클래스 멤버의 이름을 바꾸고 코드를 메서드로 추출하는 기능을 제한합니다. 그럼에도 불구하고 이들은 가장 유용한 사례 중 일부입니다.

Komodo IDE에는 열 편집과 다중 선택이 모두 있습니다. 이것은 대량 편집에 관한 한 Sublime Text 및 TextMate와 거의 동등합니다. 비교하는 한 Komodo는 IDE에 가깝고 Sublime Text는 훨씬 빠릅니다. 성능에 대해 논의하는 한 Komodo의 속도는 화면 그리기, 검색 및 구문 검사에서 이전 버전에 비해 눈에 띄게 향상되었습니다.

Komodo IDE에는 대부분의 경쟁 제품에없는 몇 가지 기능이 있습니다. 하나는 Ajax 콜백 디버깅에 탁월한 HTTP Inspector입니다. 또 다른 하나는 Rx (정규식 또는 정규식) 툴킷으로, JavaScript, Perl, PHP, Python 및 Ruby에 대한 정규식을 빌드하고 테스트하는 좋은 방법입니다.

협업은 또 다른 Komodo IDE 차별화 요소입니다. 코드 용 Google 문서라고 생각하면됩니다. 파일 그룹에 대한 세션을 생성하고, 공동 작업자로 세션에 연락처를 추가 한 다음 거의 실시간 동기화를 통해 동일한 파일에 대해 동시에 작업 할 수 있습니다.

협업은 소스 코드 제어를 대체하는 것은 아니지만 유용한 보완책입니다. Komodo IDE는 CVS, Subversion, Perforce, Git, Mercurial 및 Bazaar를 사용하여 소스 코드 제어를 통합합니다. 기본 버전 제어 작업 만 지원됩니다. 분기와 같은 고급 작업은 별도의 소스 코드 제어 클라이언트를 사용하여 수행해야합니다.

Komodo에는 자체 JavaScript 문서 포맷터가 없지만이를 위해 최고의 무료 오픈 소스를 활용합니다. 기본적으로 JavaScript 파일의 기본 포맷터는 JS Beautifier이지만 드롭 다운 메뉴를 통해 다른 9 가지 옵션을 사용할 수 있습니다.

Komodo IDE는 Chrome에서 클라이언트 측 JavaScript 디버깅을 지원하며 로컬 및 원격으로 Node.js를 디버깅 할 수 있습니다. 또한 Perl, Python, PHP, Ruby, Tcl 및 XSLT를 디버그합니다.

Komodo IDE에는 XML 및 HTML 문서를 접을 수있는 트리로 볼 수있는 DOM 뷰어가 있습니다. 또한 XPath 검색을 수행하여 트리를 필터링 할 수 있습니다.

Komodo의 코드 프로파일 링 및 단위 테스트 모듈은 JavaScript를 지원하지 않습니다. 그러나 JavaScript와 Node.js는 모두 코드 탐색, 자동 완성 및 콜팁을 구현하는 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를 매우 잘 지원하며 JavaScript 기반 모바일 애플리케이션을 구축하기위한 Cordova / PhoneGap 프레임 워크를 지원합니다. NetBeans는 블록에서 가장 빠른 IDE는 아니지만 더 완전한 IDE 중 하나입니다. 그리고 물론 가격도 맞습니다. NetBeans는 오픈 소스 라이선스에 따라 무료로 제공됩니다.

NetBeans JavaScript 편집기는 예상대로 구문 강조, 자동 완성 및 코드 접기를 제공합니다. JavaScript 편집 기능은 PHP, JSP 및 HTML 파일에 포함 된 JavaScript 코드에서도 작동합니다. jQuery 지원은 편집기에 구워졌습니다. NetBeans 8.2에는 Node.js 및 Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha 및 Selenium에 대한 새롭거나 향상된 지원이 있습니다.

코드 분석은 편집하는 동안 백그라운드에서 실행되어 경고와 힌트를 제공합니다. 디버깅은 내장 된 WebKit 브라우저 및 NetBeans 커넥터가 설치된 Chrome에서 작동합니다. 디버거는 DOM, 라인, 이벤트 및 XMLHttpRequest 중단 점을 설정할 수 있으며 변수, 감시 및 호출 스택을 표시합니다. 통합 브라우저 로그 창에는 브라우저 예외, 오류 및 경고가 표시됩니다.

NetBeans는 무료로 다운로드 할 수있는 JAR (Java 아카이브) 파일 인 JsTestDriver를 사용하여 단위 테스트를 구성하고 수행 할 수 있습니다. 서비스 창에서 JsTestDriver를 구성 할 때 NetBeans 커넥터가있는 Chrome을 JsTestDriver 브라우저 중 하나로 지정하면 단위 테스트 디버깅이 자동으로 활성화됩니다.

NetBeans 커넥터를 사용하여 Chrome에서 웹 애플리케이션을 디버깅하고 Chrome 개발자 도구에서 CSS를 편집하면 변경 사항이 NetBeans에 의해 캡처되고 CSS 파일에 저장됩니다. 그러나 CSS 파일이 Less 또는 Sass 스타일 시트에서 생성 된 경우 CSS 파일은 단지 컴파일 된 출력이기 때문에 소스 시트를 수동으로 업데이트해야합니다.

내장 된 WebKit 브라우저 및 NetBeans 커넥터가 설치된 Chrome에서 NetBeans 네트워크 모니터를 사용하여 REST 통신에 대한 요청 헤더, 응답 및 호출 스택을 볼 수 있습니다. WebSocket 통신의 경우 헤더와 텍스트 프레임이 모두 표시됩니다. 전반적으로 NetBeans는 Firefox와 함께 Firebug에서 얻는 것보다 Chrome에서 약간 더 나은 디버깅 환경을 제공합니다.

NetBeans는 소스 코드 제어를 Git, Subversion, Mercurial 및 CVS와 통합합니다. Git 지원은 그래픽 Diff 뷰어와 IDE 내의 선반 시스템에 의해 강화됩니다. NetBeans는 파일의 Git 상태를 색상으로 구분하고 모든 파일에 대한 개정 내역을 볼 수 있으며 버전 제어 파일의 각 행에 대한 개정 및 작성자 정보를 보여줍니다. NetBeans는 Subversion, Mercurial 및 CVS와 유사한 통합 기능을 가지고 있지만 Git 만 테스트했습니다.

NetBeans는 문제 추적을 Jira 및 Bugzilla와 통합합니다. NetBeans 작업 창에서 작업을 검색하고, 검색을 저장하고, 작업을 업데이트하고, 등록 된 작업 저장소의 작업을 해결할 수 있습니다. NetBeans에는 Kenai 인프라를 사용하는 사이트를위한 팀 서버 통합도 있습니다.

내가 결정할 수있는 한, NetBeans는 자바 애플리케이션과 EJB 모듈을 프로파일 링 할 수 있지만 자바 스크립트 프로파일 링이 없습니다. NetBeans는 Java와 PHP를 리팩터링 할 수 있지만 JavaScript는 리팩터링 할 수 없습니다.

전반적으로 NetBeans는 특히 서버에서 Java, PHP 또는 C ++ 개발을 수행하는 경우 클라이언트 측 JavaScript, HTML5 및 CSS3 개발에 적합한 경쟁자입니다. WebStorm에 대한 예산이없고 Microsoft가 싫다면 서두르지 않는 한 NetBeans가 작업을 수행한다는 것을 알게 될 것입니다.

비용 : 무료. 플랫폼 : Windows, Solaris, MacOS, Linux. 

마이크로 소프트 비주얼 스튜디오 2017

Visual Studio 2017에 대한 전체 리뷰에서 JavaScript에 대한 몇 가지 참조만으로 제품 전체에 대해 논의했습니다. 여기서 강조를 반대로 할 것입니다.

전반적으로 Visual Studio 2017은 더 나은 .Net IDE이지만 JavaScript 용 WebStorm만큼 좋지는 않지만 JavaScript IDE로 매우 잘 작동합니다. JavaScript 편집기로도 매우 잘 작동하지만 더 나은 C # 편집기이며 JavaScript 용 Sublime Text만큼 빠르거나 좋지 않습니다.

아래 스크린 샷에서 볼 수 있듯이 Visual Studio 2017은 JavaScript 구문 색상 지정 및 코드 접기를 잘 수행합니다. 또한 JavaScript 코드 탐색으로도 잘 작동합니다. 함수 또는 멤버 이름을 마우스 오른쪽 단추로 클릭하면 쉽게 정의로 이동하거나 모든 참조를 찾을 수 있습니다. 정의 확인이 끝나면 인터페이스 상단에있는 뒤로 화살표를 눌러 이전 위치로 돌아갈 수 있습니다.

스 니펫을 쉽게 삽입하고 선택 항목을 HTML 또는 문자열 변수의 URL 인코딩과 같은 적절한 코드로 묶을 수 있습니다. JavaScript, HTML 및 CSS 외에도 Markdown 파일을 편집하고 렌더링 된 Markdown을 볼 수 있으며 TypeScript로 작업 할 수 있습니다.

또한 모든 .Net 언어, C ++ 및 Python으로 코딩 할 수 있습니다. 그리고 오랫동안 Visual Studio의 경우처럼 IDE에서 직접 데이터베이스로 작업 할 수 있습니다. Visual Studio는 SQL Server 데이터베이스로 작업 할 때 특히 강력합니다. 개발자로서 수행하려는 대부분의 데이터베이스 작업에 SQL Server Management Studio 대신 Visual Studio를 사용하면됩니다.

Visual Studio 2017은 모바일 장치 및 에뮬레이터의 브라우저를 포함하여 원하는 거의 모든 브라우저에서 디버깅을 지원합니다. 또한 Internet Explorer 버전 인 일반 내부 웹 브라우저와 모든 소스 및 스타일과 함께 렌더링 된 페이지를 표시하는 페이지 검사기의 두 가지 자체 브라우저가 있습니다. 페이지 검사기는 페이지를 설정하기 위해 잠재적으로 시간이 많이 걸리고 리버스 엔지니어링 작업을 많이 수행하지만 일단 페이지에 들어가면 Visual Studio, 브라우저 및 브라우저의 개발자 도구를 조작하지 않고도 그대로 유지할 수 있습니다. .

Visual Studio 2017의 성능은 충분한 메모리와 CPU 성능을 제공하면 일반적으로 꽤 좋지만 상당한 리소스가 필요한 경향이 있습니다. Visual Studio 2017에는 애플리케이션에 대한 뛰어난 성능 진단 기능이 있지만 대체로 브라우저 내부에서 실행되는 일반 JavaScript 코드에는 그다지 유용하지 않습니다. Visual Studio에는 특정 JavaScript 함수 타이밍, HTML UI 응답 성 및 JavaScript 메모리 도구가 있지만 JavaScript를 사용하는 웹 프로젝트가 아닌 JavaScript 기반 유니버설 Windows 플랫폼 프로젝트에만 적용됩니다.

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의 나란히 미리보기 표시가 포함됩니다.