Visual Studio Code 설치 / VSCode 사용법

2023-04-20

Visual Studio Code 설치

상단 File 메뉴 > Open Folder > 프로젝트 폴더 선택

좌측 검색 아이콘 클릭 > 검색어 입력

좌측 EXTENSIONS > 플러그인명 검색 > 플러그인 선택 > Install
파이썬 플러그인도 설치할 수 있습니다.

유용한 VSCode 플러그인 추천

Auto Rename Tag	태그 변경 시 여는 태그, 닫는 태그 동일하게 자동 변경
CSS Peek	Ctrl + CSS 요소 클릭 시 선언된 CSS 위치 안내 팝업 표출
HTML to CSS autocompletion	HTML에 클래스명, ID명 작성 시 CSS에서 자동완성 지원
HTML CSS Support	CSS 작성 시 HTML에서 자동완성 지원
Live Server	코드 저장 시 브라우저에 자동 새로고침하여 반영해주는 개발용 로컬 서버
ESLint	JavaScript, TypeScript 등 코드에서 오류를 찾아주는 코드 검사기 .eslintrc.cjs, settings.json 등 설정 파일에 규칙 및 옵션을 지정하면, 코드 저장 시마다 코드를 검사하고 일부 문제는 자동으로 수정해줍니다. 프로젝트 경로에서 npm run lint 시, 전체 코드를 검사하고 자동으로 정리할 수 있습니다.
Vetur	Vue 2 기반 개발 지원 플러그인
Volar	Vue 3 기반 개발 지원 플러그인
Vue VSCode Snippets	Vue 상용구 코드 자동 완성을 도와주는 플러그인

Ctrl + Shift + P > Configure Display Language 선택 > 한국어, 영어 등 선택 가능

HTML 파일 생성 > HTML 파일에서 ! + Enter 입력

Ctrl + , > tab size 검색 > Editor: Tab Size에서 탭 사이즈 변경