한국어 버전
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ko
Korean(사용법) Language Pack for Visual Studio Code - Visual Studio Marketplace
Extension for Visual Studio Code - Language pack extension for Korean
marketplace.visualstudio.com
태그 변경시 close 태그도 동시변경
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Auto Rename Tag - Visual Studio Marketplace
Extension for Visual Studio Code - Auto rename paired HTML/XML tag
marketplace.visualstudio.com
괄호 색 맞춤
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
Bracket Pair Colorizer 2 - Visual Studio Marketplace
Extension for Visual Studio Code - A customizable extension for colorizing matching brackets
marketplace.visualstudio.com
연결된 CSS 찾기(컨트롤 키)
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
CSS Peek - Visual Studio Marketplace
Extension for Visual Studio Code - Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.
marketplace.visualstudio.com
한쌍의 태그를 보기 쉽게 해줌
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
Highlight Matching Tag - Visual Studio Marketplace
Extension for Visual Studio Code - Highlights matching closing and opening tags
marketplace.visualstudio.com
드래그한 범위만큼 태그 만들어줌 사용법 : 드래그 후 단축키 ALT + W
https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap
htmltagwrap - Visual Studio Marketplace
Extension for Visual Studio Code - Wraps selected code with HTML tags
marketplace.visualstudio.com
저장하면 실시간으로 업데이트(웹브라우저) 사용법 : ALT + L + O
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Live Server - Visual Studio Marketplace
Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages
marketplace.visualstudio.com
자동 정렬 해줌 단축키는 CTRL + K + F(확장프로그램 설치 안 해도 됨)
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Prettier - Code formatter - Visual Studio Marketplace
Extension for Visual Studio Code - Code formatter using prettier
marketplace.visualstudio.com
세팅법
- 설정(저장시 자동정렬) : 단축키(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
Extension for Visual Studio Code - Tab out of quotes, brackets, etc
marketplace.visualstudio.com
자동 완성 프로그램
https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
vscode-styled-components - Visual Studio Marketplace
Extension for Visual Studio Code - Syntax highlighting for styled-components
marketplace.visualstudio.com
이외의 셋팅
- 탭키의 공백 조절하기 - 설정 : 단축키(CTRL + ,) -> indent 검색