이번글에서는 vue 개발에 유용한 VsCode 플러그인을 다운로드 해보고 사용해보는것을 해보겠습니다.
- 먼저 VsCode를 열면 해당 버튼을 누릅니다. (Extensions)
vetur 설치
- Vetur를 install 합니다. vetur를 받으면 vue 파일 하이라이팅 기능을 사용할수 있습니다.
vetur 설치전
vetur 설치후
material icon 설치
- Material Icon 플러그인을 install 합니다. 아이콘 테마를 바꿀수 있습니다.
material icon 적용
File - Preferences - File Icon Theme - Material Icon Theme 입력후 선택
material icon 설치전
material icon 설치후
- 아이콘 색깔이 알록달록 해졌습니다.
Night Owl 설치
- Night Owl 플러그인을 install 합니다. 색테마를 변경할수 있습니다.
Night Owl 적용
File - Preferences - Color Theme - Night owl 입력후 선택
Night Owl 적용전
Night Owl 적용후
- 색이 파래지는? 것을 볼수 있습니다. 아이콘, 색 테마는 본인의 취향에 맞게 적용을 하면 됩니다.
ESLint 설치
- vue를 개발할때 문법체크를 해주는 플러그인입니다. 해당 플러그인을 install합니다.
Prettier 설치
- vue를 개발할때 코드 포맷팅을 도와주는 플러그인입니다. 해당 플러그인을 install 합니다.
Auto Close Tag 설치
- 태그를 열면 닫히는 태그가 자동으로 입력되게 수행하는 플러그인입니다. 해당플러그인을 install 합니다.
Atom Keymap 설치
- 단축키로 코드를 자동으로 입력되게 도와주는 플러그인입니다. 해당 플러그인을 install 합니다.
단축키
! + Tab
- 기본적인 html 구조가 만들어집니다.
div#id
- 입력한 id를 가진 div가 생성됩니다.
script + tab
- script 코드가 생성이됩니다.
log + tab
- console이 생성이 됩니다.
이외에도 다양한 단축키가 있습니다.
