[Javascript] 에디터 설치하기

 자바스크립트를 시작하기전에 다른언어들과 마찬가지로 에디터를 설치하려고합니다.

자바스크립트의 에디터로는 노트패드, 에디트플러스, 아톰, 서브라임 텍스트, 비주얼 스튜디오 코드, 웹스톰 등이 있습니다.

 저는 현재 학생 라이선스를 통해 웹스톰을 사용 중 입니다. 그러나 학생라이선스가 없거나 미구매 하셨다면 웹스톰은 배우는 과정에서 구매해서 쓰기엔 조금 부담스러운 가격을 가지고 있습니다. 그렇기에 비주얼 스튜디오 코드 환경에서 자바스크립트를 실행하시는 것을 추천드립니다.

 

 

 

비주얼 스튜디오 코드는 상대적으로 가볍고 훌륭한 확장성을 가지고 있습니다.

아래 사이트에서 다운로드 하시면 됩니다.

code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

설치가 완료되어 이런창이 뜨셨다면 설치가 완료된 것 입니다.

 

---

지금 부터는 자바스크립트를 학습할 때 유용한 (혹은 제가 사용했던) 확장들을 소개 하겠습니다.

우선 좌측에 탭 중 사각형을 조립하는 듯한 탭을 클릭하거나 Ctrl + Shift + x를 누르면 확장 창이 나옵니다.

검색창에 직접 검색하셔도 되고 추천탭의 확장을 읽어보시고 설치하셔도 됩니다.

 

0. 테마변경 + 한국어

테마변경은 개인의 취향이므로 theme 검색하셔서 맘에드는 색조합이 있는 테마를 적용하시면 됩니다.

그리고 영어가 아직 익숙하시지 않은 분들은 korean을 검색하셔서

이 확장을 추가로 설치하셔서 한국어 환경을 이용하시면 됩니다.

 

1. Bracket Pair Colorizer 2

 한쌍을 이루는 괄호들을 다른 색상으로 색칠 해 주는 확장입니다. 코드가 너무 알록달록하면 오히려 눈아프고 가독성이 떨어져서 좋아하지 않는 분도 계시지만 저는 개인적으로 선호합니다. 또 자바스크립트는 괄호가 좀 복잡하게 나오는 경우가 많아서 개인적으로 추천드립니다.

 

 

 

2. Visual Studio IntelliCode

 빠른 코드 작성을 위한 확장입니다. 내가 지은 변수명 등을 빠르게 쓰도록 지원해 줍니다.

 

 

3. JavaScript (ES6) code Snippets

자바스크립트 코드에 대한 스니펫을 지원합니다. 스니펫이란 console.log()와 같은 명령어를 clg만 쳐도 해당하는 명령어가 나올 수 있게 작성을 도와주는 기능입니다.

 

4. Live Server

웹페이지의 변화를 실시간으로 보여줌과 함께 ALT+L+O단축키로 웹페이지를 바로 열 수 있는 단축키를 제공합니다.

단축키로 웹을 열고 페이지 변화를 보여준다는 강력한 기능때문에 필수로 추천드립니다.(자바스크립트 말고도 html/css개발에도 좋음!)