22.04.14 part 01-02
VSCODE(비주얼스튜디오)
마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기입니다.
디버깅 지원과 Git 제어, 구문 강조 기능등이 포함되어 있고, 사용자가 편집기의 테마와 단축키, 설정 등을 수정할 수 있습니다.
01. 설치 및 실행
설치
- https://code.visualstudio.com/ 로 들어가서 Download for Windows 버튼 클릭해서 설치 - 원하는 저장소(:C, :D)에 새 폴더(ex. site) 생성 - VSCODE 실행
실행
- VSCODE 실행 - 편집기 화면 크기 조절 단축키-Ctrl+ +, Ctrl+ -
02. 파일 생성 및 삭제
파일 생성
- 메뉴 바에서 File - Open- 폴더(ex. site) 선택 - 열고 왼쪽 사이드바 위쪽 4개의 아이콘 중
첫번째 아이콘 클릭(New File) - index.html 파일 생성
파일 삭제
- 왼쪽 사드바에서 index.html에 마우스 왼쪽 버튼 클릭 - Delete 클릭해서 파일 삭제
03. 한글화
- 왼쪽 사이드바 옆쪽에 액티비티바 중 마지막 아이콘(Extensions-확장 프로그램) 클릭
- 'Korean Language Pack for Visual Studio Code'클릭
- 설치(Install) - VSCODE 재부팅 후 한글화 확인
04. 정리된 코드 만들기(Beautify)
- 액티비티바 중 마지막 아이콘(Extensions-확장 프로그램) 클릭
- Beautify 검색 - 설치(Install) - Feature Contributions(기능 기여도) 클릭
- Commands(명령) - HookyQR.beautify 복사(Ctrl + c)
- 위쪽 사이드 바 중 Help 클릭 - Show All Commands)(Ctrl + Shift + p) 클릭
- Preferences Open Keyboard Shortcuts(Ctrl + k, Ctrl + s) 검색 및 클릭
- 검색 부분에 복사 한 것을 붙여넣기(Ctrl + v)
- HookyQR.beautify 더블 클릭 - alt + Ctrl + i 입력
05. 태그 이름을 한 번에 변경(Auto Rename Tag)
- 액티비티바 중 마지막 아이콘(Extensions-확장 프로그램) 클릭
- Auto Rename Tag 검색 - 설치(Install)
06. 브라우저에 출력(Live Server)
- 액티비티바 중 마지막 아이콘(Extensions-확장 프로그램) 클릭
- Live Server 검색 - 설치(Install)
확인 방법 - 아래쪽 파랑색 바 오른쪽 Go Live으로 바뀐것 확인
- VSCODE에서 html 파일 마우스 오른쪽 버튼 클릭 - Open with Live Server 클릭 - 브라우저 연결 확인
07. 단축키 & 공백2로 만들기
단축키
- 사이드바 열기 열고 / 닫기 - Ctrl + b
- 빠른 열기(파일이나 기호 탐색) - Ctrl + p
- 모든 명령 표시(에디터의 모든 명령에 접근) - Ctrl + Shift + p
- 편집기 닫기 - Ctrl + w
-찾기(검색) - Ctrl + f - 찾기(검색)/바꾸기(대체) - Ctrl + h - 현재 줄에서 위로 이동 - Alt + 키보드 위쪽 화살표(Up) - 현재 줄에서 아래로 이동 - Alt + 키보드 아래쪽 화살표(Down)
- 현재 줄 아래쪽으로 줄 복사 - Alt + Shift + 키보드 아래쪽 화살표(Down) - 현재 줄 위쪽으로 줄 복사 - Alt + Shift + 키보드 아래쪽 화살표(Up)
- 되돌리기 - Ctrl + z
- 들여쓰기(Indent) - Tab
- 내어쓰기(Outdent) - Shift + Tab
- 이전 편집기 열기(좌측 창으로 전환) - Ctrl + Shift + PageUp - 다음 - 편집기 열기(우측 창으로 전환) - Ctrl + Shift + PageDown
- 편집기 분할(백슬래쉬) - Ctrl + \
공백 2로 만들기
아래쪽 파랑색 사이드바 중 Spaces(공백) 클릭 - Indent Using Spaces(공백을 사용한 들여쓰기) 선택 - 2 선택 (권장하는 공백은 2)
