VSCode에서 vue를 개발할 때, 꼭 설치해야 하는 확장 프로그램 TOP4

안녕하세요. 팀드모네입니다.

오늘은 VSCODE에서 VUE를 개발할 때, 설치를 권장드리는 확장 프로그램(Extension)에 대해 공유드립니다.

 

확장 프로그램 설치 방법?

우선, 확장 프로그램 설치 방법은 VSCODE 좌측 사이드바에서 Extension 아이콘을 클릭

설치를 원하시는 프로그램을 검색 -> 프로그램 찾으신 후 install 버튼을 누르시면 됩니다. 

 

1. Prettier - Code formatter

Prettier는 삭막한 세상에서 살아가는 개발자들의 빠른 퇴근을 돕고 「마음을 치유하는 천사같은 플러그인」입니다. 이름과 로고에서 느껴지듯, 코드를 예쁘게 정렬하기 위해서 사용하는 플러그인이죠. 사실 Prettier는 Vue 뿐 아니라 javascript, typescript, json, css, html 등 지원하는 범위가 넓습니다. 때문에, 코드 정렬하는 시간조차 초 단위로 재며 살아가는 저의 경우에도 현업에서 거의 달고 삽니다. 참고로 웹 버전도 있습니다.

 

2. Vue 3 Snippets

모든 IDE에서 Snippets은 필수입니다. 스니펫(Snippets)이란 코드 조각이라는 뜻으로 특정 문자를 입력하면 그것에 해당하는 코드가 자동으로 완성되는 기능을 의미합니다. 즉, Vue 3 Snippets은 자동 완성을 통해 vue 개발의 업무 효율을 높히는 플러그인입니다.

 

참고로 Vue 3 Snippets에서 사용되는 것은 아래와 같습니다.

2.1 Vue 3 Snippets

importFromVue	import ... from 'vue'
reactive	const obj = reactive()
readonly	const obj = readonly()
setup	setup() { }
onBeforeMount	onBeforeMount(() => {})
onMounted	onMounted(() => {})
onBeforeUpdate	onBeforeUpdate(() => {})
onUpdated	onUpdated(() => {})
onBeforeUnmount	onBeforeUnmount(() => {})
onUnmounted	onUnmounted(() => {})
onErrorCaptured	onErrorCaptured(() => {})
onRenderTracked	onRenderTracked(() => {})
onRenderTriggered	onRenderTriggered(() => {})

teleport	<teleport to='' />
componentIs	<component :is=''></component>

routerLink	<router-link></router-link>
routerView	<router-view></router-view>

vIf	v-if
vElse	v-else
vElseIf	v-else-if
vForWithoutKey	v-for
vFor	v-for="" :key=""
vOn	v-on
vBind	v-bind
vModel	v-model
vPre	v-pre
vCloak	v-cloak
vOnce	v-once

 

3. Vue Peek

Go To Definition을 사용하여 참조되는 파일로 빠르게 이동하기 위해 사용됩니다.

 

4. Vuter

VSCode를 통해 Vue를 개발한다면, 대부분 Vuter는 설치하는 것 같습니다. 저의 경우 Vue.js의 Syntax-highlighting 즉, 문법 강조 때문에 사용하며 코드 정렬, 스니펫, 코드 강조, 디버깅 등을 지원합니다. (엥? 그럼 다른 플러그인과 기능이 중복되는 것 아닌가?) 음.. 어찌되었든 코드를 정렬하는 단축키는 [Alt] + [Shift] + [f] 입니다. 처음 사용할 때, 어떤 Formatter를 사용할 것인지? 물어볼 것인데 그때 Vuter를 선택해주시면 됩니다.

아무튼 공식적으로 지원하는 기능은 아래와 같습니다. 플러그인 사용에 앞서 참고하시면 될 것으로 보입니다.

 

4.1 Vuter - Features
- Syntax-highlighting
- Snippet
- Emmet
- Linting / Error Checking
- Formatting
- Auto Completion
- Debugging
- VTI / CLI

 

감사합니다.