VSC 설치
설치 없이 사용하고 싶다면! (21년 10월 20일 런칭!)
window
mac
설치 및 환경설정 영상
- 3편까지 있으나 1편이면 족합니다. 2개는 하단에 추가 영상으로 넣어놓겠습니다.
자주 사용하는 단축키
- 모든 단축키 :
Ctrl + K + S
- Settings :
Ctrl + ,(오른쪽 상단에 Settings.json file open으로 좀 더 다양한 커스터마이징 가능)
- Sidebar :
Ctrl + B
- Terminal :
Ctrl + Shift + `(백틱, 틸트, 템플릿리터럴)
- Command palette :
Ctrl + Shift + P, F1
- 동시 선택 :
Ctrl + D(2번 입력,Ctrl + Shift + D와 같은 역할)
- 동시 수정 :
Ctrl+Alt+방향키(상, 하),Alt + Click,Alt + Shift + Drag,Alt + Shift + i
- Quick Open :
Ctrl + P
- 문장의 양 끝 :
Home/End
- 코드의 양 끝 :
Ctrl + Home/Ctrl + End
- 복사 / 붙여넣기 :
Ctrl + C/Ctrl + V/Alt + 방향키(위, 아래)
- 단어 복사 :
Ctrl + Shift + 방향키(위, 아래)
- 주석 :
Ctrl + /
- 들여쓰기 / 내어쓰기 :
Ctrl + [/Ctrl + ]
코드스니펫
Ctrl+P로 명령 팔레트를 엽니다.
>snippet이라고 입력합니다.
- html.json은 아래와 같이 설정했습니다.
{ "Print to console": { "prefix": "htmlko", "body": [ "<!DOCTYPE html>", "<html lang=\"ko\">", "<head>", " <meta charset=\"UTF-8\">", " <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">", " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">", " <title>$1</title>", "</head>", "<body>", " $2", "</body>", "</html>" ], "description": "한국어 페이지용 html 템플릿" } }
자주 사용하는 언어에 json파일을 열어 설정해주시면 됩니다.
자주 사용하는 Extension
- live server (추천) : 서버 구동
- live sass compiler (추천) : sass 자동 컴파일
- korean : 한국어 패키지
- prettier : 자동 정렬
- Material Icon (추천) : 아이콘 꾸미기
- Material Theme : 테마 꾸미기
- rainbow csv : CSV 잘 보이도록
- Visual Studio IntelliCode : 자동완성
- bracket pair colorizer : 괄호 다르게
- auto rename tag (추천) : 태그 닫기 자동 수정
- css peek : css 확인
- css navigation : html에서 연결된 css 바로 확인
- font awesome auto-complete : 폰트 어섬 아이콘을 실시간으로 미리 보여줌
- html css support : css에서 자동 확인해서 자동완성
- (Python) pylance, formatter autopep8, flake8
- indent-rainbow (추천) : 들여쓰기마다 색 다르게
- htmltagwrap (추천) : 추천합니다. text를 wraping해줍니다. 원하는 택스트 선택하고 Alt + W 누르면 기본 p 태그로 감싸여집니다.
- auto close tag : 자동으로 태그를 닫습니다.
- auto import
- Trailing Spaces
- color highlight
- eslint (추천, 기본 설치가 되어 있는 것 같습니다.)
- power-mode
설치 후 하단에서 단축키 확인 가능합니다.
