분류 javascript

웹 개발을 위한 최고의 자바 스크립트 코드 편집기 선택 방법

컨텐츠 정보

  • 조회 515 (작성일 )

본문

​보다 효율적이고 쾌적한 작업 환경을 제공하는 우수한 JavaScript 편집기를 찾고 있는 개발자에게는 여러 가지 옵션이 있습니다.


https://www.freecodecamp.org/news/how-to-choose-a-javascript-code-editor/ 


주요 JavaScript 코드 편집기는 자동 완성 (코드 완성), git 통합 및 플러그인 지원을 포함하여 기대할 수 있는 동일한 주요 기능을 많이 공유합니다. 그러나 한 개발자가 특정 개발자에게 다른 편집기보다 더 적합한 편집기를 만들 수 있는 것은 작은 일입니다.


코드 편집기에 익숙해 지고 보다 효율적인 워크 플로에 익숙해지면 개발 프로세스를 최적화 하기 위해 바로 가기를 다시 학습해야 하기 때문에 편집기를 전환하기가 어려울 수 있습니다.


장기적으로 더 효율적이더라도 전환 할 때 여전히 진입 장벽이 크므로 필요에 가장 적합한 편집기를 선택하는 데 약간의 시간을 투자하는 것이 좋습니다.


가장 인기 있는 편집기 옵션을 살펴 보겠습니다.


Visual Studio Code 


image-38.png 


Microsoft의 VSCode는 무료이며 오픈 소스이며 설치시 매우 가볍습니다. 초보자 용 JavaScript 개발자를 위한 사실상의 편집기입니다. 부분적으로는 추가 플러그인이 필요 없는 우수한 기능 세트가 사전 로드되어 있기 때문입니다. VSCode는 널리 사용되며 빠르게 시작해야 하는 고급 사용자에게 이상적입니다.


VSCode의 고유 한 기능은 브라우저를 통해 사용할 수 있다는 것입니다. 따라서 태블릿을 사용하여 이동 중에도 데스크탑에서 얻을 수 있는 것과 동일한 환경이 가능합니다. 이 기능이 작동하려면 액세스 할 수 있는 네트워크에서 코드 서버를 구성해야 하지만 일단 설정되면 매우 편리합니다.


팁 : 빌드 프로세스에 약간의 시간이 소요될 수 있는 다른 IDE에서 대규모 프로젝트를 수행하는 경우 VSCode에서 거대한 JS 출력 파일을 열고 조정하기 전에 브라우저에서 변경 사항을 즉시 테스트하도록 조정하는 경우가 많습니다. VSCode는 이러한 대용량 파일을 수영으로 처리합니다.


Git은 IDE에 내장되어 있지만 다른 편집기만큼 강력하지는 않습니다. 예를 들어, WebStorm 사용자는 VSCode보다 푸시 / 병합 경험을 선호합니다.


확장 기능으로 필요한 많은 추가 기능을 설치할 수 있으며 그 중 수천 개가 있습니다. 그러나 그들 모두가 실제 기능은 아닙니다. 코드 스니펫에는 기능 및 애드온이 혼합되어 있으므로 추가 할 최상의 옵션을 검토하고 찾는 데 시간이 걸릴 수 있습니다. 문제가 발생하면 VSCode에 거대한 사용자 커뮤니티가 있습니다. 누군가 같은 문제가 있었을 가능성이 높습니다.


모든 종소리와 휘파람으로 가득 찬 유료 IDE를 준비하지 않았고 필요한 모든 플러그인과 기능에 익숙하지 않은 경우 이것이 논리적 출발점입니다.


Atom 


image-36.png 


무료 Atom 편집기는 GitHub에서 개발했습니다. 실제로 텍스트 및 소스 코드 편집기로 변환 된 크롬 브라우저의 특수 버전입니다. 내부적으로는 플러그인 지원을 위해 Node.js를 사용합니다.


원하는 기능에 대해 수많은 플러그인을 사용할 수 있지만 기본적으로 강력하지는 않습니다. 가능한 한 효율적으로 개발 환경을 구축하려면 여러 플러그인을 수집해야 합니다. JavaScript로 작업하는 경우 시작하기 위한 필수 Atom 플러그인은 다음과 같습니다.


  • atom-typescript
  • file-icons - to colorize and assign icons to different file types
  • atom-beautify
  • linter

팁 : 자동 저장 패키지를 활성화하면 포커스가 없어지면 편집 내용이 저장됩니다. 기본적으로 비활성화 되어 있습니다.


여러 사용자가 텔레타이프 플러그인을 통해 화면에 여러 개의 커서가 있는 동일한 파일에서 동시에 작업 할 수 있습니다. 이를 멘토링, 페어 코딩 또는 협업에 사용할 수 있습니다. 이 기능은 Atom을 다른 편집기와 차별화합니다.


git 통합은 GitHub 소프트웨어에서 기대할 수 있듯이 잘 구현되어 있습니다. git 터미널을 사용하지 않고 키보드 단축키를 통해 git 명령을 실행할 수 있는 git-plus 플러그인도 유용합니다.


Atom은 .less 파일을 편집하여 IDE 색상을 조정할 수 있는 지점으로 사용자 정의 할 수 있습니다. 환경의 모든 세부 사항을 조정하려는 경우에 좋습니다. 시작시 .coffe 스크립트를 실행하면 편집기의 동작을 빠르게 변경할 수 있습니다.


잘 문서화 된 편집기 API에 대해 JavaScript로 플러그인을 작성할 수 있습니다. 필요에 따라 자신의 기능과 동작을 작성할 가능성이 있습니다.


편집 환경은 매끄럽고 미니 맵과 같은 다른 플러그인으로 향상 시킬 수 있지만 원하는 모든 기능으로 설정하는 데 약간의 초기 투자가 필요합니다. 장점은 필요하지 않은 기능을 로드 하는 데 시간이 걸리지 않아 경험이 느려진다는 것입니다. 그러나 큰 파일을 로드 하거나 탭을 전환 할 때 약간의 부진이 발생할 수 있습니다.


IDE 환경을 커스터마이즈하기 위해 CSS 스타일을 편집하는 아이디어가 마음에 들었습니다. 재미있을 것 같지만 실제로는 많은 변수를 포함하는 테마가 사소한 프로젝트가 아닙니다. 다행스럽게도 다운로드 가능한 많은 테마 테마 플러그인이 있습니다.


Atom은 탄탄한 편집기이며 많은 개발자에게 완벽하게 맞습니다.


Sublime Text 


image-34.png 


Sublime Text는 유료 편집기이지만 무료 평가판을 사용할 수 있습니다. 시작하기 위해 많은 플러그인이 사전 로드되어 있지는 않지만, 필요한 플러그인을 제공 할 수 있습니다. 이름 바꾸기, 이동, 복사 및 붙여 넣기를 위한 SideBarEnhancements와 같은 일부 패키지는 코어 번들에 내장되어 있어야 하지만 이 기능을 사용하려면 다운로드 할 수 있습니다.


Atom과 마찬가지로 모든 설정을 완료하는 데 약간의 시간이 걸릴 수 있습니다. 그러나 일단 가동되면 경험은 매우 매끄 럽습니다. 잃어버린 초점을 절약 할 수도 있습니다.


Sublime Text는 가볍기 때문에 큰 프로젝트 나 파일을 매우 빠르게 로드하고 작업 할 수 있기 때문에 좋습니다. "goto anything"기능 구현은 파일 이름, 기호 및 줄 번호와 함께 사용할 수 있으므로 두드러집니다. 대부분의 IDE는 유사한 기능을 하나의 형식으로 제공하지만 "fileName @ functionName"과 같은 쿼리를 사용하여 검색하고 검색 할 수 있다는 것은 매우 좋습니다.


변수를 선택하면 해당 변수의 모든 어커런스가 선택되고 이름을 바꾸면 모든 어커런스의 이름이 자동으로 바뀌므로 이 일반적인 작업은 매우 간소화 된 경험이 됩니다.


여러면에서 Sublime Text는 Atom과 매우 유사합니다. 그러나 Sublime Text는 더 나은 일반적인 성능과 반응성으로 우위를 점합니다.


VIM 


image-39.png 


Vim은 무료 텍스트 편집기이며 매우 구성 할 수 있습니다. 원래 vi라는 이름과 Unix 용으로 개발 된 최초의 텍스트 편집기 인 Vim이라는 이름의 기능이 풍부한 편집기로 확장되었습니다. 대부분의 Linux 배포판에서 사용할 수 있습니다.


Vim은 강력한 검색 및 구문 강조 기능을 갖추고 있으며 초경량이므로 매우 큰 파일로도 잘 수행 할 수 있습니다. 그러나 설정하고 사용할 준비가 되려면 약간의 작업이 필요합니다.


GUI를 사용할 수 있지만 Vim의 기본 인터페이스는 아닙니다. 마우스 지원을 활성화하더라도 작동하려면 몇 가지 조치가 필요합니다. 기본값은 바로 가기를 통해 모든 컨트롤 및 기능에 액세스하는 것을 선호하는 키보드 모드입니다.


즉, Vim은 소프트웨어의 인 / 아웃을 배우는 데 시간을 보내고 원하는 모든 동작과 기능을 설정하는 경우 완벽한 IDE가 될 수 있습니다. 시간이 촉박해서 전화를 걸기 위한 초기 투자를 할 수 없다면 Vim이 최선의 선택이 아닐 수도 있습니다.


WebStorm 


image-40.png 


WebStorm은 JetBrains에 의해 개발되었으며 모든 기능이 기본적으로 통합되어 있기 때문에 진정한 JavaScript IDE로 눈에 stands니다. React, Angular, Vue.js 등과 같은 다양한 플랫폼의 개발 환경은 완벽합니다. 노드 스크립트를 디버그하고 내장 서버에서 테스트를 실행할 수 있습니다. 트리 뷰 인터페이스를 통해 npm 스크립트를 실행하고 디버깅 할 수도 있습니다. 이를 위해 플러그인이 필요하지 않습니다.


그러나 플러그인은 소프트웨어에 직접 내장되지 않은 일부 희귀 기능에 사용할 수 있습니다. 기본적으로 포함되지 않은 플러그인은 마크 다운 분할 편집 / 미리보기 창입니다. 그러나 대부분의 경우 필요한 모든 것이 이미 있습니다. 이것에 대한 좋은 점은 당신이 존재하지 않았던 기능과 그 기능이 얼마나 멋진지를 발견 할 수 있다는 것입니다.


기본적으로 작업 할 때 파일이 자동으로 저장됩니다. 이 작업을 수행하지 않는 다른 앱을 사용하면 수동 저장이 매우 원시적입니다. WebStorm에 고유 한 것은 아니지만 구현이 조금 더 좋습니다.


일부 사람들은 ctrl-z 실행 취소 상태 스택의 무결성을 항상 신뢰할 수는 없지만 WebStorm에는 기본적으로 파일을 저장할 때마다 커밋을 수행하는 VSC 시스템이 내장되어 있습니다. 이것은 내부적이며 git commit과 별개입니다. 파일 내용 창이 포커스를 잃을 때마다 파일이 저장됩니다. 따라서 git을 커밋하지 않고 시간을 보내고 마지막 커밋 후 이전 상태로 돌아가거나 돌아 가야 하는 경우 아무런 문제가 없습니다.


팁 : Ctrl-Shift- 위쪽 / 아래쪽 화살표를 사용하면 편집기에서 쉼표 / ​​블록 괄호를 자동으로 처리하는 동안 줄 또는 코드 블록을 위 또는 아래로 이동할 수 있습니다.


파일이 많은 프로젝트에서 작업 할 때 특정 파일을 찾기 위해 파일 트리를 스크롤하면 속도가 느려질 수 있습니다. 그러나 해당 항목 중 하나가 이미 열려 있고 포커스가 있는 경우 대상 아이콘을 클릭하면 프로젝트 트리보기가 이 파일로 스크롤됩니다. 매우 편리합니다.


몇 가지 단점은 무료가 아니라는 것입니다. 그리고 때로는 매우 큰 프로젝트의 메모리 호그가 될 수 있습니다. 수년에 걸쳐 개선되었으며 파일 내용이 내부적으로 색인되어 큰 프로젝트를 검색하는 것이 매우 빠릅니다. 최근 업데이트에는 시작 속도가 크게 향상되었습니다.


일반 편집자 생산성 팁 


중복 행 / 선택 바로 가기 (WebStorm : ctrl-d, Atom : ctrl-shift-d이지만 모두 가능)는 내가 가장 좋아하는 것 중 하나이며 많은 코딩 시나리오에서 많은 시간을 절약 할 수 있습니다.


이것은 때때로 아이템 목록을 가지고 있고 '.'에서 각 줄의 첫 번째 (또는 일부) 문자를 수정해야 할 때 나타납니다. 찾기, 바꾸기는 실용적이지 않습니다. WebStorm을 사용하면 Alt- 클릭으로 여러 커서를 배치하여 여러 곳에서 동일한 편집 작업을 수행 할 수 있습니다. 여전히 일부 시나리오에서는 다음 방법이 더 빠릅니다.

  • 첫 번째 기간 이후에 커서를 놓고 수동으로 변경을 시작하십시오.
  • 백 스페이스, 쉼표, 아래쪽 화살표를 누릅니다. 각 키에 손가락을 대고 천천히 시작하여 반복해서 누른 다음 속도를 높이십시오. 패턴을 다운 한 후에는 200 개 라인 목록을 빠르게 살펴볼 수 있습니다.

피아노에서 멜로디를 연주하는 것과 거의 같습니다 (가능한 한 빨리). 번호 매기기 목록으로도 이를 수행 할 수 있습니다. 숫자가 없는 첫 번째 줄을 쓰고 9 번 줄을 복제하고 한 번에 한 손가락 씩 다음 번호를 누르는 것을 제외하고 동일한 과정을 수행하십시오. '1'로 다음 10 행을 시작하고 각 '1'뒤에 숫자를 추가하여 동일한 프로세스를 수행하십시오.


"[편집자 이름] 치트 시트"를 Google에 제공하는 경우 사용자가 사용 중인 편집기의 중요한 구성 또는 바로 가기에 대한 간단한 요약을 사용자로부터 얻을 수 있습니다. 인쇄하지 않고 모든 단축키를 읽으면 노출되지 않은 새로운 기능을 알 수 있습니다.


강조 표시된 조치가 현재 프로세스를 개선하는 방법을 고려하면 유리합니다. 도움이 될만한 것이 있으면 옆에 표시를 하여 다음에 상황에 처했을 때 쉽게 기억할 수 있도록 하십시오. 처음에 거의 사용하지 않더라도 빠른 참조를 하면 편집자에 대해 더 많이 배우는 데 따르는 마찰이 줄어들고 나중에 컨텍스트 전환 및 검색 시간을 절약 할 수 있습니다.


나중에 참조 할 수 있도록 PDF 버전을 찾고, 페이지를 인쇄하고 라미네이팅 하는 경우까지 있지만 책갈피 또는 스크린 샷도 작동 할 수 있습니다.


결론 


JavaScript를 배우고 세련된 개발 환경을 사용하여 시작하려는 초보자라면 VSCode는 강력한 기능을 많이 사용하기 때문에 사용하기 쉽기 때문에 확실한 선택입니다.


원하는 것을 정확히 아는 숙련 된 개발자의 경우 개발자 환경을 완벽하게 제어 할 수 있으므로 Sublime 및 Atom이 선호 될 수 있습니다. 수천 가지 기능 (패키지) 중에서 선택하여 필요하지 않거나 필요하지 않은 추가 기능 없이 응용 프로그램 시작 및 리소스 사용량을 설치하고 유지할 수 있습니다. 각각과 시간을 보내면 올바른 선택을 하는 데 도움이 됩니다.


프로젝트를 수행하는 키보드 만으로 집에서 느끼는 하드 코어 파워 유저에게는 다른 편집기보다 Vim을 더 효과적으로 사용할 수 있습니다. 손이 키보드와 마우스 사이를 이동하는 데 걸리는 시간을 절약하면 이 과정을 마스터하는 데 약간의 시간이 걸립니다!


마지막으로 유료 구독을 유지하지 않고 개발 시스템의 메모리 또는 CPU 제한에 관심이 없는 경우 WebStorm은 JavaScript 개발 플랫폼, 트랜스 파일러 또는 작업 프로세스와 상관없이 빠르게 작동하고 실행할 수 있습니다. 작업하기에 매우 편리한 환경을 제공합니다.


개인적으로 WebStorm을 기본 IDE로 사용하지만 성능을 우선시 할 때는 여전히 VSCode를 사용하여 개별 또는 매우 큰 파일을 편집합니다.