목차
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 검색
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 버튼 클릭.
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
tag_name의 시작태그와 종료태그 입력.
(예) div 입력 후 Tab키 치면, <div></div> 입력 됨.
h$*6 입력 후, Tab키
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 사용법 동영상 강의
VIDEO
(210825) 생활코딩 이고잉 님
VIDEO
(201228) 엘리 님
VScode 캐시 삭제 (= 불필요한 파일 삭제)
※ 윈도우 탐색기 경로에 아래 주소 붙여넣은 후, 이 폴더 안 파일 삭제
%appdata%\Code\Service Worker\CacheStorage
PS. 설정이 잘못된 분만 적용
VScode 한글 (노란상자/노란박스/노란네모박스) 제거
설정 (Ctrl + , )
> Unicode Highlight: Non Basic ASCII 키워드로 검색
> true 값을 false (또는, inUntrustedWorkspace) 값으로 변경
