• 회원가입
  • 로그인

[vscode] VScode - Visual Studio Code 에디터 설치/기본세팅 + 한글팩 설치 + 코드 입력 결과 확인 + 추천 확장프로그램 + Emmet (= 에밋 = 코드 단축/간편 입력 = 빠른 코딩 플러그인) + 글자 크기 (=비에스코드)

6,371  
목차
  1. VScode 설치
  2. VScode 한글팩 설치 + 코드 입력 결과 확인
  3. VScode 설치 권장 확장 프로그램
  4. Emmet (★ 에밋 = 코드 입력 단축키 = 빠른코딩/단축코드)
  5. VScode 유용한 단축키
  6. VScode 글자 크기
  7. VScode 주석 색깔 변경
  8. VScode 사용법 동영상 강의
  9. VScode 캐시 삭제 (= 불필요한 파일 삭제)
  10. 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열의 테이블 만든 후, 각 셀에 홈짱닷컴 입력

 

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) 값으로 변경

 

 


찾아주셔서 감사합니다. Since 2012