Visual Studio Code 확장 프로그램 추천 23개 / VS Code extension

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code(VS Code)
설치 후 진행해 주세요
 
 

확장 프로그램 설치는
Extension 메뉴에서 검색해 주시면 됩니다.
 
 
1. Beauty

코드 예쁘게 정리(javascript,css,less,python,jsx,markups(html,swig,nunjucks)...etc…)
전체 선택 후 cmd+shift+B
 
 
2. Auto Close Tag

HTML/XML 클로즈 코드 자동 생성되는 확장 프로그램
 
 
3. Auto Rename Tag

시작하고 닫히는 태그 동시에 수정 가능해서 유용한 확장 프로그램
 
 
 
4. Live Server

로컬에서도 실시간으로 확인 가능하도록 하는 확장 프로그램
상단 Go Live를 클릭하면 브라우저에서 확인 가능하다

 
 
5.  Live Preview

HTML 파일 상단 오른쪽 분할돋보기 아이콘을 클릭하면 실시간으로 미리보기가 가능하다.
 
 
6. CSS Peek

HTML에서 cmd(ctrl) + #id .class 선택 시 css 찾아주는 확장 프로그램
 
 
7. indent-rainbow

코드의 가독성을 높여주는 확장 프로그램
들여쓰기별로 색상을 달리해줘서 편리하다
 
 
8. IntelliSense for CSS class names in HTML

 css 파일을 미리 로드해서 css class 자동완성해 주는 확장 프로그램


9. Lorem ipsum

cmd/ctrl+shift+p, "lorem ipsum" 입력 후
insert a line or paragraph 를 선택하면 더미 텍스트 생성됩니다.
 
 
10. Path Intellisense

예를 들어 ./ 경로 입력 시 관련 주소를 제공해 줘서 자동입력이 가능하다.
 
 
11. Highlight Matching Tag

해당 태그 클릭 시 열고 닫히는 부분을 표시해 줘서 편리하다
 
 
12. Image Preview

이미지 경로에 cmd(ctrl) + 마우스를 올리면 이미지 미리보기가 가능하다.
 
 
13. Color Highlight

컬러코드 색상 확인이 가능해서 유용한 확장 프로그램

 
 
14. Prettier - Code Formatter

코드 자동정렬 확장 프로그램
 
JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular HANDLEBARS · Ember · Glimmer
GraphQL · Markdown · YAML
 
 
15. Material Theme

VS 테마 변경하는 확장 프로그램
 
적용 방법 1.

cmd(ctrl) + Shift + P > theme 입력 > Preferences: Color Theme 선택하면
다양한 Material Theme 리스트가 나오는데 선택하면 적용된다.
 
적용 방법 2. 

VS Code 상단 Code > Preferences > Theme > Color Theme에서도 변경 가능하다.
 
 
16. Material Icon Theme

파일 아이콘을 Material Icon으로 변경해 주는 확장 프로그램

이외에도 다양한 아이콘을 지원해 준다.
 
 
17. Multiple cursor case preserve

변수명 동일단어 다중커서로 수정할 때 대소문자 구분 없이 수정되어 따로 수정해야 되는데
소문자는 소문자로, 대문자는 대문자로 일괄로 변경이 가능하다
 
 
18. ESLint

소스코드에서 오류를 알려주는 확장 프로그램
디버깅 시간 단축에 좋음
 
 
 
19. html tag wrapper

태그 감쌀 때 사용하는 확장 프로그램
설치하면 기본적으로 control(^) + i 로 되어있는데 
왼쪽하단 톱니바퀴 > Keyboard Shortcuts > wraptag 검색
원하는 단축키로 변경이 가능하다
 
 
20. Auto Import - ES6, TS, JSX, TSX

파일명을 입력하면 자동 import 된다
 
 
21. GitLens — Git supercharged

git 사용 시 유용한 확장 프로그램
코드상에 커서 올리면
작성자 커밋 이력 메시지 등이 표시되어
버전 관리에 도움 된다

 

22. Tabnine: AI Autocomplete & Chat for Javascript, Python, Typescript, PHP, Go, Java & more

AI 코드자동완성 확장 프로그램

필수!!! 꼭 설치하세요 👍🏻

 

23. Project Manager

Command Palette(cmd+shift+p)에 pmsp입력 후

Project Manager: Save Project를 선택 후 이름을 설정해주세요

왼쪽 사이드바에서 폴더 아이콘을 클릭하면 등록한 프로젝트를 확인할 수 있습니다.
 

 

추가로 리액트 템플릿 자동완성 스니펫 

ES7+ React/Redux/React-Native snippets

리액트 템플릿 자동완성 스니펫 / ES7+ React/Redux/React-Native snippets