반응형
SMALL
Extension이란?
편집 기능 추가 및 프로그래밍 언어 지원 등 새로운 확장 기능을 추가할 수 있는 기능을 제공하는 플러그인이다.
위 사진의 좌측 밑에 체크되어있는 아이콘을 클릭하면 다양한 Extentions를 확인할 수 있다.
Material Theme
VS Code의 테마를 설정할 수 있고 아래 Set Color Theme(색 테마 설정) 버튼(위 사진)을 누르면 다양한 테마 설정(아래 사진)이 가능하다.
* 다크테마는 사랑입니다..
Live Server
내 컴퓨터를 실제 서버처럼 작동(로컬 서버)시켜서 웹 개발시 변경사항을 자동으로 반영하여 편리하게 도와주는 기능이다.
설치 시 Go Live 버튼이 활성화(1번째 사진) 된다.
적용 예시로 HTML 초기 상태에서 실행한 뒤(2번째 사진) 새로운 데이터를 입력 후 저장을 하면 Server에 자동으로 반영(3번째 사진)되는 모습을 확인할 수 있다.
Prettier - Code fomatter
말 그대로 화면을 예쁘게 꾸미는 것으로 Settings(Ctrl + , )에서 설정할 수 있다.
Setting값은 사용자에 따라 다르지만, 필자는 다음과 같이 Setting을 했다.
- Quote Style : Vue.js 사용 시 Single Quetes와 Double Quetes 충돌 방지
- Format On Save : 저장시 자동 정렬
Bracket Pair Colorizer
짝이 맞는 괄호끼리 색상을 지정하는 것이다.
indent-rainbow
들여쓰기별 생상을 지정하는 것이다.
Auto Rename Tag
시작 태그의 이름 변경 시 닫는 탱크의 이름 자동 변경해준다.
CSS Peek
HTML에서 CSS 선택 시 찾기 기능을 제공한다.
사용법 : Ctrl + 좌클릭
HTML CSS Support
HTML에서 작업시 CSS 자동완성 기능 추가해준다.
Vetur
.vue 파일에 코드 생성, 문법 강조, 자동완성, 디버깅 기능을 제공한다.
vue 입력시 template, script, style을 자동완성해준다.
Vue 3 Snippets
Vetur에서 지원하지 않는 자동완성까지 적용시켜준다.
Material Icon Theme
VS Code의 아이콘에 예쁜 테마들을 제공해준다.
아이콘의 모양은 아래 사이트(VS 공식 홈페이지)에서 확인할 수 있다.
Material Icon Theme - Visual Studio Marketplace
Material Icon Theme - Visual Studio Marketplace
Extension for Visual Studio Code - Material Design Icons for Visual Studio Code
marketplace.visualstudio.com
Korean Language Pack
한글 패치 Extension이다.
VS Code List
VS Code List
Start VS Code!! ● 기회는 준비된 자에게 찾아온다.
han-hoon.tistory.com
기회는 준비된 자에게 찾아온다.
반응형
LIST
'Program > VS Code' 카테고리의 다른 글
| [VS Code] Emmet 사용법 (0) | 2022.03.10 |
|---|---|
| [VS Code] 주석 색상 변경 (0) | 2022.03.10 |
| [VS Code] VS Code 설치 (0) | 2022.03.10 |
| [VS Code] 단축키 모음 (0) | 2022.03.03 |
댓글