본문 바로가기
Editer

VSCode

by curious week 2025. 11. 14.

CLI

code .

현재 폴더(.)에서 vscode(code) 열기


Extensions

Atom On Dark Theme

VS Code를 Atom 스타일의 어두운 테마로 바꿔주는 테마 확장.

Auto Close Tag

HTML/JSX 태그 입력 시 자동으로 닫히는 태그 생성.

Auto Import

JS/TS 파일에서 사용한 클래스·함수를 자동으로 import해줌.

Auto Rename Tag

HTML/JSX 태그 이름 변경 시 열고 닫는 태그 동시 변경.

Better Comments

주석을 색깔·강조·태그별로 보기 좋게 스타일링.

Code Runner

여러 언어 코드를 VS Code 안에서 바로 실행.

Code Spell Checker

코드 주석/문자열의 철자 검사기.

Color Highlight

코드 내부의 색상(#ff00aa 등) 바로 화면에 하이라이트.

Error Lens

오류·경고를 코드 라인에 직접 표시해 눈에 잘 띄게 함.

es6-string-html

JS의 템플릿 문자열(const html = /*html*/)에 HTML 색상 하이라이팅 지원.

HTML CSS Support

HTML과 CSS 속성의 자동완성 향상.

HTML to CSS autocompletion

HTML class → CSS 자동완성 매칭.

indent-rainbow

들여쓰기 레벨마다 색이 달라져 구조 파악이 쉬워짐.

JSON to TS

JSON 데이터를 TypeScript 타입(interface)로 자동 변환.

Live Server

HTML 파일을 실시간 로컬 서버로 열어 자동 새로고침 제공.

Markdown All in One

Markdown 문법 단축키, 자동완성, 포맷팅을 강화.

Markdown Preview Enhanced

Markdown을 고급 렌더링(Bibliography, Chart 등)으로 미리보기.

Material Icon Theme

파일·폴더 아이콘을 깔끔한 Material 스타일로 변경.

Thunder Client

VS Code 안에서 사용하는 Postman 느낌의 API 테스트 도구.

Shader languages support for VS Code

GLSL, HLSL, WGSL 등 쉐이더 코드에 문법 하이라이트 지원.

Prettier – Code Formatter

코드를 자동으로 깔끔하게 정리 (React/TS 구성에 필수).

ESLint

JavaScript/TypeScript의 코드 품질 체크.

Path Intellisense

파일 경로 자동완성 (Web 프로젝트 필수).

GitLens

Git 히스토리/라인 변경 원인 추적·시각화.

Tailwind CSS IntelliSense

Tailwind 사용한다면 CSS 클래스 자동완성 + 색상 미리보기.


Custom Setting

수정 파일 전체 저장 설정

F1 > File: Save All Files > Shift + cmd + S 설정


Keymap

명령 팔레트 열기: cmd + shift + P 또는 F1

파일 (검색) 열기: cmd + P

드래그 영역과 일치하는 단어 찾기: cmd + D

터미널 열기: ctrl + `

새 터미널 열기: ctrl + shift + `

파일 전체 찾기: cmd + shift + F

열린 탭 중 다음 탭으로: ctrl + tab

열린 탭 중 이전 탭으로: ctrl + shift + tap

탭 닫기: cmd + W

최근 닫은 탭 다시 열기: cmd + shift + T