비주얼 스튜디오 코드 확장프로그램(Extensions) 추천

Active File In StatusBar : 현재 작업중인 파일의 경로를 상태표시줄에 출력

 

Active File In StatusBar

 

 

Auto Close Tag : 시작태그명을 입력하면 닫는태그를 자동으로 입력

 

Auto Close Tag

 

Auto Rename Tag : 시작태그명을 바꾸면 닫는태그명도 자동으로 변경

 

Auto Rename Tag

Bracket Pair Colorizer : 짝이 되는 괄호끼리 색맞춤

 

Bracket Pair Colorizer

 

Code Spell Checker : camelCase 코드의 맞춤법 체크

 

Code Spell Checker

 

Color Highlight : RGB 색상코드표 테두리에 색상 표시

 

Color Highlight

 

Eclipse Keymap : 이클립스 단축키로 설정.

단축키 정보는 gitHub 참조 (https://github.com/alphabotsec/vscode-eclipse-keybindings/blob/master/package.json)

 

Guides : 들여쓰기에 대한 가이드라인(안내선) 표시

 

Guides

 

Git Lens : 파일을 열고 좌측에 Git Lens 아이콘 클릭시 git commit 이력 확인 가능

 

Git Lens

 

Highlight Matching Tag : 내가 선택한 태그의 여는태그/닫는태그 하이라이트 해줌

 

Hightlight Matching Tag

 

IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS : HTML에서 CSS 클래스명 자동완성

 

IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS

 

indent-rainbow : 들여쓰기 단계에 따라 공백부분의 색상을 다르게 표시

 

indent-rainbow

 

javascript console utils : console.log()를 자동완성. Ctrl + Shift + L 는 콘솔로그 추가, Ctrl + Shift + D 는 현재 문서의 모든 콘솔로그를 삭제

 

javascript console utils

 

Korean Language Pack for Visual Studio Code : 한국어 확장팩

 

Local History : 파일의 로컬 히스토리 확인

 

Local History

 

Live Server : 페이지를 라이브로 갱신시켜 보여줌

 

Live Server

 

Live Share : 실시간 코드 공유 (협업)

 

Live Share

 

Path Intellisense : 파일 경로 자동 완성

 

Path Intellisense

 

Prettier - Code formatter : 코드 정렬. Ctrl + K + F.

취향이지만 설정 (Ctrl + ,) 또는 settings.json (Ctro + P 누르고 검색창에 settings.json 선택) 에서 몇가지 수정 후 사용하는게 좋음

각 항목 추가시에는 앞부분에 , 추가

 

"prettier.printWidth": 200 : 한줄에 200자까지

"prettier.tabWidth": 4 : 탭은 4칸

"prettier.singleQuote": false : ' 를 " 로

"editor.formatOnSave": true : 저장시 자동으로 포매터 적용

 

vscode-icons : VS Code 탐색기에서 보이는 파일/폴더별 아이콘 적용

 

vscode-icons