목차
- VScode 설치
- VScode 한글팩 설치 + 코드 입력 결과 확인
- VScode 설치 권장 확장 프로그램
- Emmet (★ 에밋 = 코드 입력 단축키 = 빠른코딩/단축코드)
- VScode 유용한 단축키
- VScode 글자 크기
- VScode 주석 색깔 변경
- VScode 사용법 동영상 강의
- VScode 캐시 삭제 (= 불필요한 파일 삭제)
- VScode 한글 (노란상자/노란박스/노란네모박스) 제거
※ VScode (= Visual Studio Code = 비에스코드 = 버츄얼 스튜디오 코드 = 브이에스코드)
VScode 설치
1.
파란색 버튼 클릭해 파일 다운
https://code.visualstudio.com/
https://code.visualstudio.com/download
2.
설치 중 추가 정보 입력 화면 나오면,
이미 설치된 에디터 없을 시 모두 체크.
VScode 한글팩 설치 + 코드 입력 결과 확인
1.
Visual Studio Code 코드 실행.
2.
좌측에서 田 (= 확장 프로그램) 아이콘 클릭.
3.
한글팩 설치. (= 한글 메뉴 인터페이스로 변경)
korean 검색
> 맨 위 검색결과 선택
> install 클릭해 설치
> 우측하단에 Restart Now 클릭
PS. (한글팩 → 영문팩) 모드로 변경
(ctrl + shift + p) 또는, (view > Command Palette)
> cdl 입력 (※ cdl : Configure Display Language)
> en 선택
> 다시 시작 클릭
4.
live server 확장팩 설치. (= 코드 입력 결과 확인)
live server 검색・선택 후, install 클릭해 설치.
4-1.
코드 입력 결과 확인하는 브라우저 창 여는 방법
방법1 : (Alt + L) 입력 후, 바로 (Alt + O) 입력. (즉, Alt 키 누른 채, L키와 O키 순서대로 누름.)
방법2 : 하단 하늘색 라인바에 있는 Go Live 버튼 클릭.
PS.
1. 클릭하면 버튼이 포트 번호로 바뀌는데 다시 클릭하면 Go Live로 바뀜.
2. Live Sever 경우, <html> <head> <body> 등 태그 사용 때만 적용.
4-2.
에디터창과 브라우저창을 나란히 50% 열어두고 작업하는 법
1. 에디터창 상단 타이틀 라인 빈곳을 클릭 후, (윈도우키 + 왼쪽방향키)
2. 브라우저창 상단 타이틀 라인 빈곳을 클릭 후, (윈도우키 + 오른쪽방향키)
VScode 설치 권장 확장 프로그램
Meterial Theme
배경색 테마 설정.
Meterial Icon Theme ★
배경색 테마 설정. (프로젝트 파일 아이콘 이쁘게 변경.)
Prettier - Code formatter ★
코드 포맷. (= 가독성 ↑)
※ 단축키 (Ctrl + ,) > save 검색 > Format On Save 사용 체크.
※ 단축키 (Ctrl _ ,) > Tab Width 검색 > Pritter: Tab Widh를 2로 설정. (cf. 그누보드 경우: 4)
※ 단축키 (Ctrl _ ,) > prettier quote 검색 > Prittier: Single Quote 사용 체크.
Bracket Pair Colorizer ★
괄호마다 다른 색깔 넣기. (괄호 짝 찾을 때 유용)
Indent Rainbow
들여쓰기 된 부분에 색깔 넣기.
Auto Rename Tag
시작태그 종료태그 한번에 변경.
CSS Peek
정의된 CSS 빨리 찾기. ※ (Ctrl키 + 해당 선택자 클릭)하면 정의된 CSS 위치로 이동.
HTML CSS Suppport
선택자 자동 완성. (html 경우)
Live server
코드 입력 결과 바로 확인. (위에서 이미 설명.)
Markdown Preview
readme.md 마크다운 파일 작성 시 결과 확인 가능할 툴.
https://stackedit.io/ (스택에디터 - 마크다운 작성 툴. 사용법)
PS.
HTML to CSS autocompletion
선택자 자동 완성 (stylesheet 경우)
htmltagwrap
텍스트를 태그로 쉽게 감싸기.
텍스트 드래그 선택 후, (Alt + W)
ESLint
코드 품질 향상 (= 코드 점검 후, 잠재적 문제 경고)
Path Intellisense
로컬 파일 빠르게 참조 가능하도록 자동 완성. (import 시 유용)
PHP Intelephense
PHP 위한 고급 자동완성 및 리팩터링 지원. (문법 올바른지 체크)
PS1.
정의 안 된 (함수/상수) 사용 시 에러로 간주하는 설정을 해제하려면,
(Ctrl + ,) 클릭해 설정 검색창 띄운 후, 아래 키워드 검색해 체크해제.
- intelephense.diagnostics.undefinedConstants
- intelephense.diagnostics.undefinedFunctions
PS2.
사용자정의 함수/상수 사용 시 빨간줄 안 생기게 하려면,
해당 프로그램의 root 폴더 불러온 후 그 안의 파일 작업.
개인적으로, PS1 설정 건들지 말고 이 방법 사용 권장함.
SSHFS
서버로 (디렉토리/파일) 전송 (※ FTP 대체용)
ftp-simple
이미지 파일 ftp 업로드 시 바로바로 반영
By. 엘리 님 (200220)
https://youtu.be/bS9yTI2fC0w (추천 확장프로그램 10개)
https://youtu.be/m7wsrVQsVjI (Emmet 사용법 + HTML to CSS autocompletion)
Emmet (★ 에밋 = 코드 입력 단축키 = 빠른코딩/단축코드)
공식 홈페이지: https://emmet.io/
※ vscode 실행 후, 직접 타이핑. (복사 붙여넣기 방식으로는 작동 X)
※ Tab키 대신 Enter키도 됨.
! 입력 후 Tab키
html 템플릿
!! 입력 후, Tab키
<!DOCTYPE html>
#id_name 입력 후, Tab키
<div id="id_name"></div>
.class_name 입력 후, Tab키
<div class="class_name"></div>
div>ul>(li.hz$>a)*4 입력 후, Tab키
주의: 만약, () 기호 사용 안 하면 li 하나에 a가 4개 들어감.
div>(ul>li{$}*5)+(ol>li{$}*3) 입력 후, Tab키
직접 확인. (+ 기호 : 형제)
div>ul>li*4^ol>li*3 입력 후, Tab키
직접 확인. (^ 기호 : 부모의 형제)
p{homzzang} 입력 후, Tab키
<p>homzzang</p> ({} 기호 : 내용 입력)
p.class${item $}*5 입려 후, Tab키
<p class="class1">item 1</p>
....
<p class="class5">item 5</p>
lorem 입력 후, Tab키
Lorem ipsum...으로 시작하는 표준 채우기 텍스트
p>lorem4 입력 후, Tab키
<p>Lorem ipsum dolor sit</p> (※ 4개 단어 표준 채우기 텍스트)
table>tr>td*5 입력 후, Tab키
1행 5열 테이블 생성
PS. (Shift + Alt) 누른 채 5개 셀을 드래그 선택 후, 입력하면 모든 셀에 같은 내용 입력 가능.
table>tr*2>td*5{홈짱닷컴} 입력 후, Tab키
2행 5열의 테이블 만든 후, 각 셀에 홈짱닷컴 입력
table>(thead>(tr>th*3))+(tbody>(tr>td*3)*2) 입력 후, Tab키
티헤드(1행 3열)과 티바디 (2행 3열)로 구성된 테이블.
ol>li*5{목차 $} 또는 ol>li*5>{목차 $} 입력 후, Tab키.
순서 있는 리스트 5개 만든 후, 안에 목차 1~ 목차 5 생성.
tag_name 입력 후, Tab키.
tag_name의 시작태그와 종료태그 입력.
(예) div 입력 후 Tab키 치면, <div></div> 입력 됨.
h$*6 입력 후, Tab키
h1 ~ h6 태그 입력
div.box>div.slide>a*4>img[alt="slide$"] 입력 후, Tab 키
https://codepen.io/sinbi/pen/yLOObdB
Emmet 매뉴얼 더보기
VScode 유용한 단축키
복사붙여넣기
- 복사할 영역 드래그 선택 후, (Shift + Alt + ▽).
- PS. (Shift + Alt + △)키도 동일.
코드 정렬. (※ 파일 확장자가 html인 경우만 되는 듯함.)
- (Ctrl + A) 후, (Ctrl + K + F)
VScode 글자 크기
[방법1] - 지정 크기로 조정
vscode 실행
> 좌측 하단 톱니바퀴
> settings 클릭 (단축키: Ctrl + , 클릭)
> font size 키워드로 검색
> Editor: Font Size 부분의 숫자 14를 수정.
[방법2] - 마우스휠로 자유롭게 조정 ★
vscode 실행
> 좌측 하단 톱니바퀴
> settings 클릭 (단축키: Ctrl + ,)
> zoom 키워드로 검색
> Editor: Mouse Wheel Zoom 부분의 체크박스 체크.
> 에디터 화면에서 (Ctrl 키 + 마우스휠) 이용해 조절.
VScode 주석 색깔 변경
vscode 실행
> 좌측 하단 톱니바퀴
> settings 클릭 (단축키: Ctrl + ,)
> .json 키워드로 검색
> Edit in settings.json 링크 클릭. (※ 우측창 중상단에 위치.)
> 아래 구조가 되게 파란색코드 추가 후, Ctrl + S (저장).
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.donotShowInfoMsg": true,
"editor.tokenColorCustomizations": {
"comments": "#00b933"
},
VScode 사용법 동영상 강의
(210825) 생활코딩 이고잉 님
(201228) 엘리 님
VScode 캐시 삭제 (= 불필요한 파일 삭제)
※ 윈도우 탐색기 경로에 아래 주소 붙여넣은 후, 이 폴더 안 파일 삭제
%appdata%\Code\Service Worker\CacheStorage
PS. 설정이 잘못된 분만 적용
VScode 한글 (노란상자/노란박스/노란네모박스) 제거
설정 (Ctrl + ,)
> Unicode Highlight: Non Basic ASCII 키워드로 검색
> true 값을 false (또는, inUntrustedWorkspace) 값으로 변경
