Visual Studio Code 설치
vs code는 밑의 사이트에서 설치할 수 있다.
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
사이트에 들어가면 보이는 파란 버튼을 눌러준다.
오른쪽 상단을 보면 다운로드된 걸 확인할 수 있다.
설정
설치 완료된 vs code로 들어가서 왼쪽 하단의 톱니바퀴를 눌러주고 그중 Settings를 누른다.
Font Size를 여기서 변경할 수 있다. 기존 14였던 폰트사이즈를 20으로 바꿔줬다.
settings 에서 나가지 않고 입력창에 white를 입력하면 Render Whitespace가 첫번째로 뜬다.
selection으로 되어있는걸 all로 바꿔준다.
코드에서 탭 눌러서 띄울때 간격을 스페이스 기준에서 탭으로 변경하고 싶으면 오른쪽 하단의 space:4 클릭하고
Indent Using tab 으로 바꿀 수 있다. 난 이미 탭으로 되어있어 Tab Size:4로 되어있다.
convert indentation to tabs 로 바꿔주는게 더 편하다
이미 스페이스로 되어있는 부분도 탭으로 바꿔준다
확장 프로그램 설치
vs에서 확장프로그램을 설치해주려고 한다. 왼쪽 상단쯤에 빨간 박스 안의 아이콘을 클릭해주면 된다.
indent-rainbow
들여쓰기를 무지개 색상으로 표현되어 코딩에 도움을 주는 프로그램이다.
Auto Rename Tag
시작하고 닫히는 태그 동시에 수정 가능해서 유용한 확장 프로그램이다.
Material Icon Theme
파일 확장자마다 해당하는 아이콘으로 나타나게 해준다. 파일들이 좀 더 가독성 좋게 보인다.
GitLens
코드 행마다 커밋정보를 확인 할 수 있다.
단축키
shift + alt + 위나 아래 방향키 : 줄복사
ctrl + L : 한줄 전체 선택
ctrl + shift + k : 한줄 삭제
ctrl + alt + 위나 아래 방향키 : 여러줄 선택. 여러줄 한번에 편집할 때 사용. 종료하려면 esc 눌러주면 된다.
alt 누르고 클릭 여러위치 : 원하는 위치 여러개를 한번에 수정 가능 . 종료하려면 esc 눌러주면 된다
ctrl + s : 저장
ctrl + / : 주석
ctrl + f5 : 웹페이지 띄우는 단축키
vs code에서 doc 이나 html:5 입력하고 엔터치면 html 기본 코드 작성해줌
