[코딩 시작하기]Visual Studio Code 세팅하기(세팅 및 확장프로그램 추가)

한국어 버전

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ko 

Korean(사용법) Language Pack for Visual Studio Code - Visual Studio Marketplace

 

태그 변경시 close 태그도 동시변경

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag 

Auto Rename Tag - Visual Studio Marketplace

 

괄호 색 맞춤

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2 

Bracket Pair Colorizer 2 - Visual Studio Marketplace

 

연결된 CSS 찾기(컨트롤 키)

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek 

CSS Peek - Visual Studio Marketplace

 

한쌍의 태그를 보기 쉽게 해줌

https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag 

Highlight Matching Tag - Visual Studio Marketplace

 

드래그한 범위만큼 태그 만들어줌 사용법 : 드래그 후 단축키 ALT + W

https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap 

htmltagwrap - Visual Studio Marketplace

 

저장하면 실시간으로 업데이트(웹브라우저) 사용법 : ALT + L + O

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer 

Live Server - Visual Studio Marketplace

 

자동 정렬 해줌 단축키는 CTRL + K + F(확장프로그램 설치 안 해도 됨)

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Prettier - Code formatter - Visual Studio Marketplace

세팅법

• 설정(저장시 자동정렬) : 단축키(CTRL + ,) -> format on save 검색 후 체크

• esbenp.prettier-vscode 검색 후 prettier 선택

• 확인법

설정 -> json 검색 -> settings.json에서 

 

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",

위 내용이 입력 됐는지 확인하기

• 사용법

위의 세팅을 한뒤 CTRL + S(저장)을 누르면 자동 정렬 된다

만약 자동 정렬이 안돼고 위같은 에러가 뜨면 오타가 있을 것이다

 

탭으로 커서를 태그(<>)로 이동할 수 있다

https://marketplace.visualstudio.com/items?itemName=albert.TabOut 

TabOut - Visual Studio Marketplace

 

자동 완성 프로그램

https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components 

vscode-styled-components - Visual Studio Marketplace

 

이외의 셋팅

• 탭키의 공백 조절하기 - 설정 : 단축키(CTRL + ,) -> indent 검색