2. Vue 예제 - VsCode 플러그인 사용해보기

이번글에서는 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이 생성이 됩니다.

 

이외에도 다양한 단축키가 있습니다.