VSCode 확장 추천!!!

 

VSCode 에디터는 코드 편집기 입니다.

하지만 자바스크립트 개발자, 프론트 개발자라면 주개발툴로서도 역활을 해냅니다.

(마이크로소프트에서 만들었고, 타입스크립트 인기가 높아지면서 더 그 위상이 높아지는듯합니다 ㅎㅎ)

 

아래는 VSCode의 추천 Extenstion 입니다. 

 

01. ES7 React/Redux/GraphQL/React Native snippets

리액트 개발자라면 거의 필수입니다.

코드 편집기에 아래 키워드로 구조를 만들어버릴수 있는 snippets을 제공합니다. 예를들면,

• rce : class componet 생성
• rafce : allow function component 생성
• rfce : function component 생성

 

 

02. ESLint

거의 말이 필요없는 필수.. 문법을 확인해줍니다.

 

 

03. Project Manager

프로젝트 여러개 관리 한다면 유용합니다.

 

 

04. Auto Rename, Auto Closetag

html이나 jsx에서 <div></div>와 같이 태그문법 작성시 자동으로 </div>를 입력해줍니다.

이름을 바꿔도 자동으로 닫히는 태그의 이름을 변경해줘요. 너무 편합니다.

 

 

05. Indent rainbow

여백을 칼라로 표시해줍니다. 탭구분, scope 구분에 도움됩니다.

 

 

06. vscode-icons

왼쪽탐색기의 파일 아이콘을 너무너무 이쁘게 표시해줍니다.

설치하고, Ctrl + P 눌러서 >icons 치고 활성화 해줍시다.

 

 

07. better comments

주석을 칼라로 표시해줍니다. 예를들면,

• // : 기본컬러
• //! : 빨간색
• //todo : 주황색
• //// : 취소선

 

08. highlight matching tag

태그 내 영역에 커서를 두면 화면에 깔끔하게 표시해줍니다.

 

 

그 외

• Debuger For Chrome : 크롬 디버거
• Live Server : html 작성시 결과화면을 볼수 있는 서버 제공
• Active FIle Status bar : 하단에 파일경로 표시