영어: Martin Heller 번역: Grape City Control
학습 과정에서 문제가 발생하거나 학습 자료를 얻고 싶다면 학습 교류 그룹에 오신 것을 환영합니다343599877, 프론트엔드를 함께 배워보아요!
요즘에는 JavaScript 프로그래머가 사용할 수 있는 훌륭한 도구가 많이 있습니다. 이 기사에서는 JavaScript, HTML5 및 CSS 개발을 지원하고 문서 작성에 Markdown을 사용할 수 있는 10가지 우수한 텍스트 편집기에 대해 설명합니다. JavaScript 프로그래밍에 IDE 대신 편집기를 사용하는 이유는 무엇입니까? 그 이유는 빠른 속도 때문이다.
편집기와 IDE의 근본적인 차이점은 IDE가 코드를 디버깅하고 프로파일링할 수 있을 뿐만 아니라 ALM(애플리케이션 수명 주기 관리) 시스템도 지원한다는 것입니다. 여기서 논의하는 많은 편집기는 일반적으로 Git과 같은 버전 제어 시스템을 하나 이상 지원하며, 요즘에는 IDE와 편집기 간의 차이가 점점 줄어들고 있습니다.
이 10가지 JavaScript 편집기 중에서 Sublime Text와 Visual Studio Code가 상위 2개입니다. Sublime Text는 속도와 편집 기능이 다양하기로 유명합니다. Visual Studio Code의 기능과 속도는 Sublime Text와 거의 동일합니다. TextMate는 3위를 차지했지만 TextMate는 2년 전에 1위를 차지했지만 그 기능은 실제로 따라가지 못했습니다.
Sublime Text, Visual Studio Code 및 Brackets에서 가장 좋아하는 JavaScript 편집기를 찾을 수 있지만 Atom, BBEdit, Komodo Edit, Notepad++, Emacs 및 Vim을 포함하여 알아둘 만한 다른 편집기 도구도 있습니다. 현재 프로젝트에 따라 가장 편리한 편집 도구를 선택할 수 있습니다.
모든 편집자에 대해 알아보고 기사 마지막 부분에서 비교해 보겠습니다.
번개처럼 빠르게 실행되고 코드 검사, 디버깅 및 배포를 위해 다른 창으로의 전환을 지원할 수 있는 유연하고 강력하며 확장 가능한 텍스트 편집기를 원한다면 Sublime Text 사용을 고려해 보세요.
빠른 속도 외에도 Sublime Text는 JavaScript, HTML 및 CSS를 포함하여 70개 이상의 파일 형식을 지원합니다. 즉석 탐색 및 다중 옵션(일련의 옵션을 한 번에 제공) ) 열 선택(한 번에 파일의 직사각형 영역 선택)을 포함한 다중 창(모든 모니터 창 사용) 및 간단한 Python 기반 플러그인 API를 사용한 완전한 사용자 정의; 통합되고 검색 가능한 명령 보드.
다른 편집기를 사용하는 프로그래머를 위해 Sublime Text는 TextMate 패키지(명령은 포함되지 않음) 및 Vi/Vim 에뮬레이션을 지원합니다.
Sublime Text는 구성 및 확장성이 뛰어난 텍스트 편집기입니다. 여기에는 JavaScript를 포함하여 50개 이상의 문법이 포함되어 있으며 Sublime 패키지 및 TextMate 문법 정의를 사용하여 확장할 수 있습니다. 몇 번의 키 입력으로 Babel(React) 및 TypeScript(Angular)에 대한 구문과 지원을 설치할 수 있습니다.
Sublime Text는 여러 창과 분할 창을 지원합니다. 각 프로젝트에는 여러 작업 공간, 여러 보기 및 보기가 포함된 여러 창이 있을 수 있습니다. 공간을 통합, 디버깅 및 테스트하려는 경우 모든 화면 공간을 사용하는 것이 매우 간단해집니다. Sublime Text는 또한 색상, 텍스트 글꼴, 전역 키 바인딩, 탭 정지, 파일별 키 바인딩 및 스니펫, 구문 강조 규칙 등 모든 것에 대한 사용자 정의를 지원합니다. Sublime Text의 인코딩 파일은 기본적으로 JSON 파일로 설정되어 있으며, 언어 정의는 기본적으로 XML로 설정되어 있습니다.
Sublime Text에는 Sublime Text 패키지와 플러그인을 만들고 유지 관리하기 위한 활발한 커뮤니티가 있습니다. JSLint 및 JSHint 인터페이스, JsFormat, JsMinify, PrettyJSON 및 Git 지원을 포함하여 Sublime Text에서 누락된 많은 기능은 패키지 설치 프로그램을 사용하는 커뮤니티를 통해 사용할 수 있습니다.
공식 웹사이트 링크:
Visual Studio Code
Visual Studio Code는 Microsoft에서 출시한 무료 경량 편집기 및 IDE입니다. Visual Studio 구성 요소가 있으며 오픈 소스 Atom Electron 셸과 혼합될 수 있습니다. C#을 사용한 ASP.Net Core 개발에 대한 탁월한 지원을 제공하며 TypeScript 및 JavaScript를 통한 Node.js 개발에도 탁월한 지원을 제공합니다. Visual Studio는 Windows에서만 지원된다는 규칙과 달리 Visual Studio Code는 MacOS 및 Linux에서도 실행될 수 있습니다.
Visual Studio Code에는 TypeScript 컴파일러와 Salsa 엔진이 포함되어 있어 JavaScript 코드 완성 기능이 매우 뛰어납니다. Visual Studio Code는 유형을 추론하고 기호 테이블을 작성하기 위해 뒤에서 TypeScript 컴파일러로 JavaScript 코드를 보냅니다. 화면 이미지 하단의 박스에서 hasOwnProperty 메소드 정보를 확인할 수 있습니다.
동일한 기호 테이블을 사용하면 IntelliSense가 식 입력 프로세스 전반에 걸쳐 탁월한 옵션 팝업 목록을 제공할 수 있습니다. 채우기 후 자동 닫기, 자동 채우기 완성 옵션, 입력 후 자동 메소드 목록, 메소드 내 자동 매개변수 목록 기능이 제공됩니다. DefinedTyped의 d.ts 파일에 대한 참조를 추가하여 IntelliSense를 향상시킬 수 있습니다. Visual Studio Code는 Node.js 기본 제공 변수에서 __dirname을 사용하는 것과 같은 일반적인 문제를 식별할 때 이러한 기능을 제공합니다.
Visual Studio Code는 Node.js 및 ASP.Net 개발을 위한 무료 경량 편집기이자 IDE입니다. 이는 TypeScript 컴파일러, Roslyn .Net 컴파일러 및 Atom에서 사용하는 Electron 셸과 같은 Microsoft 기술을 결합합니다. Visual Studio Code는 Windows, MacOS 및 Linux 플랫폼에서 사용할 수 있습니다.
Visual Studio Code의 Git 지원은 매우 훌륭하고 사용하기 쉽습니다. Visual Studio Code 디버거는 Node.js 및 ASP.Net 개발을 위한 훌륭한 디버깅 환경을 제공합니다. Visual Studio Code에는 매우 우수한 HTML, CSS, Less, Sass 및 JSON 도구가 있으며, 이 도구는 Internet Explorer F12 개발자 도구와 동일한 기술을 기반으로 합니다. 또한 Visual Studio Code는 gulp 및 Jake와 같은 외부 작업 실행기와의 사용자 지정 가능한 통합을 제공합니다.
Visual Studio Code는 Angular 및 React를 지원하는 등 강력한 플러그인 생태계를 갖추고 있습니다. JavaScript, TypeScript 프레임워크 및 라이브러리를 사용하여 애플리케이션을 구축할 때는 Visual Studio Code를 사용하는 것이 좋습니다.
공식 웹사이트 링크:
다운로드 주소:
Brackets은 무료 오픈 소스 편집기로 원래 Adobe에서 제작되었으며 JavaScript, HTML, CSS 및 관련 개방형 웹 기술을 위한 더 나은 도구를 제공하도록 설계되었습니다. 대괄호 자체는 JavaScript, HTML 및 CSS로 작성됩니다. 내장된 기능 외에도 Brackets에는 프런트엔드 개발자가 사용하는 다양한 언어와 도구를 확장하기 위한 확장 관리자가 있습니다. Brackets는 Sublime Text 및 TextMate만큼 빠르게 실행되지는 않지만 네트워크에서 프로그램 콘텐츠를 로드하거나 업데이트할 때 일시 중지되는 것을 제외하면 여전히 매우 빠르게 실행됩니다.
Brackets은 JavaScript, CSS, HTML 및 Node.js를 훌륭하게 지원할 뿐만 아니라 HTML ID와 관련된 CSS의 온라인 편집과 같은 다른 훌륭한 기능도 갖추고 있습니다. 또한 Brackets에는 편집하는 동안 간단한 UI 인터페이스와 웹 페이지의 실시간 미리보기 기능이 있습니다. 무료 코드 편집기의 경우 Brackets가 탁월한 선택입니다.
Brackets 확장은 JavaScript로 작성되었으며 Node.js 모듈을 호출할 수도 있습니다. 열린 파일을 탭에 표시하는 대부분의 편집기와 달리 Brackets에는 파일 트리 위에 작업 파일 목록이 표시됩니다.
Brackets의 JavaScript 자동 완성 기능은 매우 훌륭합니다. 다양한 괄호의 닫는 괄호를 자동으로 채우고, jQuery 메서드에 $를 입력한 후 키워드, 변수 및 메서드의 자동 드롭다운 메뉴가 표시됩니다. 대괄호는 Node.js 디버거를 제어하고 메뉴 항목에서 Node를 다시 시작할 수 있습니다. 대괄호를 사용하면 추가 기능(예: TypeScript 및 JSX 지원, Bower 통합, Git 통합)이 포함된 확장을 쉽게 추가할 수 있습니다.
빠른 편집, 빠른 문서 저장, 빠른 파일 열기, 실시간 미리보기 등이 모두 웹 애플리케이션 편집을 단순화하는 데 도움이 되어 코딩이나 디자인에 집중할 수 있습니다. Brackets에는 몇 가지 단점도 있습니다. 예를 들어 일부 Brackets 확장은 구성하기 어렵고 Emacs 패키지나 Vim 플러그인만큼 쉽지는 않습니다.
공식 웹사이트 링크: http://brackets.io/
다운로드 주소:
Atom 1.15.0은 GitHub의 무료 오픈 소스 코드이자 프로그래밍 가능한 편집기로 Windows, MacOS 및 Linux 플랫폼에 적합합니다. GitHub 애플리케이션과 통합되며 사용 가능한 많은 패키지와 테마가 있습니다.
Atom 소스 코드는 GitHub에 있으며 CoffeeScript로 작성되었으며 Node.js와 통합되었습니다. Atom은 웹 브라우저가 아닌 텍스트 편집기로 설계된 Chromium 브라우저의 특수 버전입니다. 각 Atom 창은 기본적으로 로컬로 렌더링되는 웹 페이지입니다.
Atom이 자동으로 업데이트되지 않을 때는 성능이 매우 좋습니다. 퍼지 검색, 빠른 항목 검색 및 바꾸기, 다중 커서 및 선택, 다중 창, 코드 조각, 코드 접기, TextMate 구문 및 테마 가져오기 기능과 같은 몇 가지 훌륭한 기능이 있습니다. Atom은 두 가지 명령줄 유틸리티를 설치할 수 있습니다. Atom은 셸에서 편집기를 시작하고 APM은 Atom 패키지를 관리합니다.
Komodo Edit는 멋진 다국어 편집기인 ActiveState의 Komodo IDE의 무료 축소 버전입니다.
Komodo IDE를 좋아하지만 구입할 여유가 없다면 Komodo Edit가 좋은 선택이 될 것입니다. Komodo Edit는 IDE가 아니므로 편집기 외부에서 코드 제어를 완료해야 합니다.
실시간 코드 수집 기능은 제공하지 않습니다. 독립적으로 개발하고 다른 사람과 코드를 공유하지 않으면 문제가 없습니다. 또한 HTTP 검사기를 제공하지 않습니다. Komodo Edit에는 Komodo IDE와 동일한 편집 기능이 있지만 코드 리팩토링, 디버깅, 단위 테스트, 소스 코드 제어 통합 및 기타 IDE 친화적인 기능이 부족합니다.
어쨌든 Komodo Edit는 JavaScript 편집 요구 사항에 대해 무료이며 HTML, CSS, Python, Perl, Ruby, Tcl 및 기타 프로그래밍 편집을 위한 마크업 언어를 제공합니다.
Notepad++는 무료 오픈 소스 Windows 소스 코드 편집기이자 메모장으로 JavaScript 편집에 이상적입니다. 약 50개의 프로그래밍 및 마크업 언어를 지원합니다. 여러 문서 편집 창 외에도 작업 공간 트리 보기, 기능 목록 탭 및 문서 매핑 탭이 있습니다. 로드 시간은 충분히 빠르고 성능은 느려지는 느낌이 들지 않을 만큼 강력합니다.
구문 색상 지정 및 접기, 편집 가능한 기능(열 모드 편집 및 정규식, 검색 및 바꾸기 지원 포함), 상당한 양의 함수 완성 및 매개변수 힌트를 갖춘 Notepad++는 JavaScript용 코드 편집기로 쉽게 선택될 수 있습니다. 그러나 아직은 포괄적인 JavaScript 편집기가 아니며 코드를 생성하고, 리팩토링과 같은 작업을 수행하고, 대규모 프로젝트를 빠르게 탐색할 수 없습니다.
BEdit 11.0.3은 Mac 전용 HTML 텍스트 편집기로, 약 35개의 프로그래밍 및 마크업 언어를 지원하며, 커뮤니티 에디션은 BBEdit 웹사이트를 통해 다른 많은 언어에 대한 지원도 제공합니다. 라이센스 버전과 커뮤니티 버전 모두 구문 강조 기능이 있습니다. 라이센스 버전에는 주로 함수 이름, 변수 이름, 소수의 키워드 및 태그에 대한 일정량의 자동 완성 기능도 있습니다. 라이센스 버전은 Git, Perforce 및 Subversion 버전 제어 시스템과도 통합됩니다.
BBEdit 11은 제품을 크게 재작성한 버전으로, 이 버전은 이전보다 속도가 빠르고 거대한 파일도 매우 잘 처리할 수 있습니다. 선택 항목이나 검색 결과를 새 버퍼에 복사하는 추출 기능과 잘라내기 기능이 있습니다. BBEdit는 Perl, Python, Ruby 및 Shell 스크립트를 편집 및 실행할 수 있을 뿐만 아니라 Perl 및 Python 스크립트의 구문을 확인할 수도 있습니다.
BBEdit의 HTML 및 Markdown 지원은 실제로 JavaScript 지원보다 더 좋습니다. BBEdit용 명령줄 도구 세 개를 설치할 수 있습니다. 하나는 편집기용, 하나는 diff 엔진용, 마지막 하나는 멀티미디어 검색용입니다.
TextMate는 예전에는 MacBook에서 Ruby on Rails를 작성하는 데 주로 사용되었지만 현재는 TextMate의 비중이 줄어들고 동시에 Sublime Text도 점차 인기를 얻고 있습니다.
TextMate는 IDE는 아니지만 언어별 IDE에 없는 패키지, 스니펫, 매크로, 범위 시스템과 같은 기능을 제공합니다. TextMate는 이제 JavaScript 및 jQuery 코드를 빠르게 생성하기 위한 유용한 도구 세트를 제공하는 간단한 JavaScript 및 jQuery 번들을 제공합니다. IDE와 유사한 기능의 경우 TextMate의 셸 통합 버전을 사용할 수 있지만 TextMate에서 코드 리팩토링, 자동화된 단위 또는 회귀 테스트를 기대하지 마십시오. Grunt가 올바르게 설정되면 TextMate는 JavaScript 테스트를 자동화할 수 있습니다.
TextMate에는 다른 번들을 다운로드하고 설치할 수 있는 번들 기본 설정 탭이 있습니다. 번들 소스는 실제로 GitHub 저장소에 있는 제품의 소스 코드입니다.
Emacs와 그 파생물은 1970년대 초반부터 MIT AI 연구소에서 나왔습니다. Emacs는 TECO 텍스트 편집기의 매크로로 시작하여 점차 독립적인 언어로 발전했습니다. MacOS에 설치된 기본 Emacs는 버전 22.1.1이며 GUI를 지원하지 않습니다. XEmacs, Aquamacs(MacOS용 GUI) 및 최신 GNU Emacs 버전을 쉽게 설치할 수 있습니다. Emacs는 JavaScript 편집을 위한 기본 모드가 js 패키지에 있습니다. Emacs를 사용하면 더 나은 구문 강조 표시 및 Linting을 얻을 수 있습니다.
Emacs는 js2 모드 패키지를 사용하고 ac-js2 자동 완성을 사용합니다. Emacs에서는 직렬 모드를 사용하여 실시간 브라우저 JavaScript, HTML 및 CSS 상호 작용을 얻을 수 있습니다.
Vi(비주얼 인터페이스)는 원래 Bill Joy가 Unix용으로 작성한 이후 1976년부터 Ed에서 Ex로 점차 발전했습니다. Vim은 Vi의 개선된 무료 오픈 소스 버전입니다. Mac OS X에는 기본적으로 설치됩니다.
Vim, MacVim(MacOS용 GUI) 또는 플랫폼에 사용 가능한 모든 최신 버전을 쉽게 설치할 수 있습니다. Vim은 JavaScript 편집기이며 vim-plug readme 파일의 제안 사항은 매우 좋습니다.
클라이언트 측 JavaScript 또는 Node.js에 중점을 두든지 다양한 옵션이 있습니다.
다른 많은 언어를 지원하는 강력하고 빠른 JavaScript 프로그래밍 텍스트 편집기를 찾고 있다면 Sublime Text를 선택할 수 있습니다.
IDE와 호환되고 ASP.Net 및 C#을 잘 지원하는 빠른 무료 JavaScript 편집기를 원한다면 Visual Studio Code가 탁월한 선택입니다.
Brackets과 Atom은 두 가지 새로운 무료 텍스트 편집기입니다. Brackets는 Node.js 개발을 위한 IDE에 매우 가까운 편집기이고 Atom은 GitHub 데스크톱 클라이언트와 고도로 통합되어 있습니다.
Windows에서 Notepad++는 빠르고 효과적이며 무료입니다. MacOS에서 BBEdit는 버전 제어 통합을 위한 빠르고 멋진 무료 한정판 HTML 도구입니다. TextMate는 여전히 빠르고 모든 기능을 갖추고 확장 가능한 훌륭한 편집기이지만 개발 속도가 느립니다.
오픈 소스 스크립팅 언어를 사용하고 싶다면 Komodo Edit가 좋은 선택입니다. 사용자 정의 편집기가 마음에 들면 Emacs나 Vim이 요구 사항을 충족할 수 있습니다.
위 내용은 몇 가지 유용한 JavaScript 편집기 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
