리뷰 : 최고의 자바 스크립트 편집기 10 가지

JavaScript 프로그래머는 선택할 수있는 좋은 도구가 많이 있습니다. 추적하기에는 너무 많습니다. 이 기사에서는 JavaScript, HTML5 및 CSS로 개발하고 Markdown으로 문서화하는 데 도움이되는 10 가지 텍스트 편집기에 대해 설명합니다. IDE 대신 JavaScript 프로그래밍에 편집기를 사용하는 이유는 무엇입니까? 한마디로 말하자면 속도입니다.

편집기와 IDE의 근본적인 차이점은 IDE는 디버그 할 수 있고 때로는 코드를 프로파일 링 할 수 있으며 IDE는 애플리케이션 수명주기 관리 (ALM) 시스템을 지원한다는 것입니다. 여기서 논의하는 대부분의 편집기는 하나 이상의 버전 제어 시스템 (종종 Git)을 지원하므로 기준이 예전보다 IDE와 편집기 사이의 차이가 적습니다.

Sublime Text와 Visual Studio Code는 JavaScript 편집기 중 최고입니다. Sublime Text는 편리한 편집 기능만큼 빠른 속도를, Visual Studio Code는 훨씬 더 나은 기능과 거의 비슷한 속도를 제공합니다. 대괄호가 3 위를 차지합니다. 몇 년 전 TextMate가 내 목록에서 높은 순위를 차지했지만 그 기능은 실제로 새로운 개발을 따라 가지 못했습니다.

대부분의 경우 Sublime Text, Visual Studio Code 또는 Brackets에서 원하는 JavaScript 편집기를 찾을 수 있습니다. 그러나 Atom, BBEdit, Komodo Edit, Notepad ++, Emacs 및 Vim과 같은 다른 도구에는 모두 권장할만한 것이 있습니다. 당면한 작업에 따라 그 중 하나를 사용하면 편리 할 수 ​​있습니다.

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

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

옵션을 살펴보고 마지막에 비교해 봅시다.

숭고한 텍스트

매우 빠르고 유연하고 강력하며 확장 가능한 프로그래밍 텍스트 편집기를 원하고 코드 검사, 디버깅 및 배포를 위해 다른 창으로 전환하는 것을 꺼리지 않는다면 Sublime Text보다 더 멀리 보지 마십시오.

속도 외에도 Sublime Text의 많은 주목할만한 강점은 JavaScript, HTML 및 CSS 중에서 70 개 이상의 파일 유형을 지원합니다. 거의 즉각적인 탐색 및 즉각적인 프로젝트 전환; 열 선택 (파일의 직사각형 영역 선택)을 포함한 다중 선택 (한 번에 여러 번 변경) 여러 창 (모든 모니터 사용) 및 분할 창 (화면 공간 활용) 간단한 JSON 파일로 완전한 사용자 정의; Python 기반 플러그인 API; 통합되고 검색 가능한 명령 팔레트가 있습니다.

다른 편집기에서 온 프로그래머를 위해 Sublime Text는 TextMate 번들 (명령 제외) 및 Vi / Vim 에뮬레이션을 지원합니다. 비공식적 인 Sublime Text 문서는 Emacs 사용자 ( 예를 들어 moi )에 대해 폄하 (그리고 부정확 한) 발언을 하지만, 나는 그것들을 간과 할 것입니다. 비공식 Sublime Text 문서가 존재하는 이유는 무엇입니까? 우선 공식 문서는 완전하지 않습니다. 훨씬 적습니다.

이전에 "거의 즉각적인 탐색"이라고 말했을 때 의미가있었습니다. 예를 들어 화면의 현재 위치 getResponseHeader에서 ajax.js 의 정의로 이동하려면 Mac에서는 Command-P를, PC에서는 Ctrl-P를 입력 한 다음 ajajax.js로 임시보기를 열고 @grh그리고 Enter를 누르면 getResponseHeader선택된 탭이 열립니다 . Sublime Text는 내 타이핑을 따라갈 수 있습니다. Brief 및 Kedit와 같은 최고의 오래된 DOS 편집기만큼 반응이 좋습니다.

을 선택  getResponseHeader하면 Mac에서 Shift-Command-F를 입력하거나 PC에서 Shift-Ctrl-F를 입력 한 다음 Enter 키를 눌러 컨텍스트에서 함수의 모든 사용을 찾을 수 있습니다. 새 탭에는 각 5 줄 스 니펫에 검색어 상자가있는 검색 결과가 표시됩니다. 박스형 텍스트를 두 번 클릭하면 새 탭에 전체 파일 컨텍스트가 표시됩니다.

왼쪽 폴더 사이드 바에서 파일 이름을 클릭하면 파일 내용을 보여주는 임시 탭이 나타납니다. 다른 파일을 클릭하면 해당 탭이 바뀝니다. 여기서도 Sublime Text는 내 타이핑과 클릭을 따라 잡을 수 있습니다. 마찬가지로 페이지 오른쪽 상단의 축소 된 크기 탐색을 통해 스크롤 오버 헤드없이 거의 즉시 파일 내에서 이동할 수 있습니다. Microsoft Word가 반응이 좋았 으면합니다.

여러 항목을 선택하고 열을 선택하면 정규 표현식이 필요했던 성가신 편집 작업을 빠르게 수행 할 수 있습니다. 단어 목록을 각 단어가 큰 따옴표로 둘러싸이고 각 단어가 쉼표로 다음 단어와 구분되는 JSON 구조로 변환해야합니까? 목록에있는 단어 수에 관계없이 Sublime Text에서 약 8 번의 키 입력이 필요합니다.

내 Windows 개발 상자에서 두 개의 와이드 모니터를 사용합니다. MacBook에서는 Retina 디스플레이와 Thunderbolt 디스플레이를 사용합니다. 한 디스플레이에서 편집하고 다른 디스플레이에서 디버깅하지 않는 한 일반적으로 많은 다른 소스 파일과 다른보기를 소스 파일로 동시에보고 싶습니다. Sublime Text는 여러 창, 분할 창, 프로젝트 당 여러 작업 영역, 여러보기 및보기를 포함하는 여러 창을 지원합니다. 원하는 경우 모든 화면 공간을 사용하고 디버깅 및 테스트를위한 공간을 만들어야 할 때 통합하는 것은 매우 간단합니다.

색 구성표, 텍스트 글꼴, 전역 키 바인딩, 탭 정지, 파일 별 키 바인딩 및 스 니펫, 구문 강조 규칙까지 Sublime Text에 대한 모든 것을 사용자 정의 할 수 있습니다. 기본 설정은 JSON 파일로 인코딩됩니다. 언어 별 정의는 XML 기본 설정 파일입니다. Sublime Text 패키지와 플러그인을 만들고 유지하는 Sublime Text 주변의 활발한 커뮤니티가 있습니다. JSLint 및 JSHint 인터페이스, JsFormat, JsMinify, PrettyJSON 및 Git 지원을 포함하여 처음에 Sublime Text가 부족하다고 생각했던 많은 기능은 패키지 설치 프로그램을 사용하여 커뮤니티를 통해 사용할 수 있습니다.

Sublime Text가 뛰어난 성능을 발휘하는 이유 중 하나는 긴밀하게 코딩되어 있기 때문입니다. 또 다른 이유는 Sublime Text가 IDE가 아니며 IDE의 부기 오버 헤드가 필요하지 않기 때문입니다.

개발자의 관점에서 이것은 까다로운 절충안입니다. "빨간색, 녹색, 리팩터링"이라는 엄격한 테스트 기반 개발 루프에있는 경우 코드 커버리지를 편집, 테스트, 리팩터링 및 추적하도록 설정된 IDE가 가장 도움이 될 것입니다. 반면에 코드 검토 또는 주요 편집을 수행하는 경우 가장 빠르고 효율적인 편집기를 원할 것입니다. 그 편집기는 Sublime Text 일 것입니다.

비용 : 무제한 무료 평가판; 비즈니스 또는 개인 라이선스의 경우 사용자 당 $ 70. 플랫폼 : Windows, MacOS 및 Linux.

Visual Studio 코드

Visual Studio Code는 Microsoft의 무료 경량 편집기 및 IDE입니다. Visual Studio의 구성 요소가 오픈 소스 Atom Electron 셸과 혼합되어 C #을 사용한 ASP.Net Core 개발과 TypeScript 및 JavaScript를 사용한 Node.js 개발에 대한 탁월한 지원을 제공합니다. Windows에서 Visual Studio 만 지원하는 Microsoft의 역사적 패턴을 깨고 Visual Studio Code는 MacOS 및 Linux에서도 실행됩니다. 아래 스크린 샷은 MacOS에서 찍은 것입니다.

Visual Studio Code는 TypeScript 컴파일러와 Salsa 엔진을 포함하여 놀랍도록 훌륭한 JavaScript 코드 완성 기능을 제공합니다. Visual Studio Code는 JavaScript 코드를 백그라운드에서 TypeScript 컴파일러로 보내 형식을 유추하고 기호 테이블을 빌드합니다. hasOwnProperty 방법에 대한 정보를 보여주는 화면 이미지 하단 근처의 상자에서 결과를 볼 수 있습니다  .

동일한 기호 테이블을 사용하면 IntelliSense에서 식을 입력하는 동안 코드 완성을위한 멋진 팝업 옵션 목록을 제공 할 수 있습니다. 자동 괄호 닫기, 자동 단어 완성 옵션, 입력 후 자동 방법 목록 .및 방법 내 자동 매개 변수 목록이 표시됩니다. 에서 d.ts 파일에 대한 참조를 추가하여 IntelliSense를 향상시킬 수 있으며  DefinitelyTypedVisual Studio Code는 __dirnameNode.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에는 확장 관리자가 있으며 프런트 엔드 개발자가 사용하는 많은 언어 및 도구에 대한 확장을 사용할 수 있습니다. 대괄호는 Sublime Text 또는 TextMate만큼 빠르지는 않지만 웹에서 프로그램 콘텐츠를로드하거나 업데이트하는 일시 중지를 제외하고는 여전히 매우 빠릅니다.

대괄호는 JavaScript, CSS, HTML 및 Node.js를 잘 지원합니다. 또한 HTML ID와 관련된 CSS의 인라인 편집 (Quick Edit)과 같은 멋진 기능도 있습니다. 또한 Brackets는 깔끔한 UI와 편집중인 웹 페이지의 실시간 미리보기를 제공합니다. 무료 코드 편집기를위한 아주 좋은 선택입니다.

괄호, 꺾쇠 괄호 및 대괄호를 자동으로 닫을뿐만 아니라 키워드, 변수 및 $. 대괄호는 Node.js 디버거를 제어하고 메뉴 항목에서 Node를 다시 시작할 수 있습니다. TypeScript 및 JSX 지원, Bower 통합 및 Git 통합과 같은 추가 기능을위한 확장을 쉽게 추가 할 수 있습니다.

빠른 편집, 빠른 문서, 빠른 열기 및 실시간 미리보기는 모두 웹 애플리케이션 편집을 간소화하고 코딩 또는 디자인중인 작업에 집중할 수 있도록 도와줍니다. 단점은 일부 Brackets 확장은 설정하기 까다로울 수 있지만 Emacs 패키지 나 Vim 플러그인만큼 까다 롭지는 않습니다.

비용 : 무료 오픈 소스. 플랫폼 : Windows, MacOS, Linux. 

원자

Atom은 Windows, MacOS 및 Linux 용 GitHub의 무료 오픈 소스 해킹 가능한 프로그래밍 편집기로, GitHub 앱과 통합되며 수천 개의 패키지와 테마를 사용할 수 있습니다. 몇 가지 커뮤니티 패키지와 핵심 패키지 및 테마를 사용합니다.

그 기원을 고려할 때 Atom 소스는 GitHub에서 호스팅됩니다. CoffeeScript로 작성되었으며 Node.js와 통합되었습니다. Atom은 웹 브라우저가 아닌 텍스트 편집기로 설계된 Chromium의 특수 변형입니다. 모든 Atom 창은 기본적으로 로컬로 렌더링 된 웹 페이지입니다. Atom 팀은 Atom in Atom을 개발합니다.

Atom의 성능은 자체적으로 업데이트되지 않을 때 꽤 좋습니다. 퍼지 파인더, 빠른 프로젝트 전체 검색 및 바꾸기, 다중 커서 및 선택, 다중 창, 스 니펫, 코드 폴딩, TextMate 문법 및 테마 가져 오기 기능과 함께 즉시 사용 가능한 모든 기능을 제공합니다. Atom은 두 개의 명령 줄 유틸리티를 설치할 수 있습니다. Atom은 셸에서 편집기를 시작하고 APM은 NPM for Node.js의 정신으로 Atom의 패키지를 관리합니다. GitHub 애플리케이션에 컨텍스트 메뉴 항목이 포함되어 있기 때문에 GitHub에서 복제 한 저장소를 검색 할 때 Atom을 많이 사용합니다.

비용 : 무료 오픈 소스. 플랫폼 : Windows, MacOS, Linux.

코모도 편집

Komodo IDE의 ActiveState의 무료 기능 축소 버전 인 Komodo Edit는 꽤 좋은 다국어 편집기입니다. 편집자로서 Komodo IDE에 대해 내가 말한 모든 것 (“리뷰 : 6 개의 최고의 JavaScript IDE”참조)는 Komodo Edit에 적용됩니다.