Vue.js 개발을 위한 vscode 필수 설정 플러그인 9가지 소개 (code extension)

vscode에서 설치 가능한 code extension 소개

vscode에서 vue.js의 개발은 매우 편리하며 꽤 좋은 개발 환경을 갖출 수있다.
다만 몇가지 extension을 추가 했을 때의 얘기다. 
vscode는 매우 다양한 extension을 제공해주는데 intellij나 이클립스에서 제공하는 plugin과 거의 동일한 역할을 한다.

Prettier

코드를 예쁘게 자동 정렬 extension
개인 취향에 맞게 옵션을 설정하여 코드 스타일을 예쁘게 맞출 수있다.
팀개발 초반에 공통으로 설정해두면 코드 통일성을 가질 수있어서 매우 유용하다.
기본설정

# 기본옵션
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

# 설정가능옵션
# prettier.arrowParens	
# prettier.bracketSpacing
# prettier.endOfLine
# prettier.htmlWhitespaceSensitivity
# prettier.insertPragma
# prettier.jsxBracketSameLine
# prettier.jsxSingleQuote
# prettier.printWidth
# prettier.proseWrap
# prettier.quoteProps
# prettier.requirePragma
# prettier.semi
# prettier.singleQuote
# prettier.tabWidth
# prettier.trailingComma
# prettier.useTabs
# prettier.vueIndentScriptAndStyle
# prettier.embeddedLanguageFormatting

RainBow Brackets

소괄호, 중괄호, 대괄호 묶음별로 색상을 표기해줘서 코드를 보기 쉽게 해준다.

Auto Rename Tag

쌍을 이루는 HTML 태그를 같이 변경 해준다.

# 기본설정
{
  "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
}

Auto Close Tag

html 태그를 작성시 여는 태그만 입력을 해도 자동으로 close 태그를 입력해준다

# 기본설정
{
    "auto-close-tag.SublimeText3Mode": true
}

Vetur

Vue.js 의 파일 확장명은 .vue 로 되어 있다.
Vetur는 .vue 파일의 코드 하이라이팅을 지원해준다.

Vue 3 Snippets

.vue 파일 생성시 처음 입력해야 하는 코드를 snippets으로 지정해놓을 수있다.
단지 코드 초기 구성을 위해 필요하다 (하지만 매우 유용하며 제일 많이 사용한다!!)

사용가능한 snippet 설정

https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets 

Vue 3 Snippets - Visual Studio Marketplace

 

Vue Peek

Vue 프로젝트내에서 참조되는 템플릿이나 모듈을 빠르게 추적이 가능합니다. CSS 또한 마찮가지 입니다.

• Peek - CSS 파일을 인라인으로 로드하고 바로 편집이 가능 ( ctrl + shift + F12)
• Go To - CSS 파일로 바로 이동하거나 새 편집기에서 열기 가능 ( F12)
• Hover - 마우스를 올리면 바로 정의가 가능합니다. ( Ctrl + hover)

DotENV

.ENV 파일에 작성된 코드들을 컬러감있게 표기하여 가독성을 높일수있습니다.

devtools vue - chrome 확장프로그램

이건 vscode 의 extension 이 아니고 크롬 플러그인입니다.
chrome 브라우저에서 Vue프로젝트의 디버깅이 가능하도록 해줍니다.
무조건! 반드시! 필수! 플러그인입니다!

설치링크

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Vue.js devtools

 
설치하게 되면 크롬브라우저 우측상단에 이런 모양의 플러그인 모양이 생성됩니다.

 
 
이상 vscode로 VUE 개발을하면서 필요한 몇가지 extension 과 plugin에 대해 알아보았습니다. 이것 외에도 테마라든가 여러가지 extension이 많이 있지만 그러한 것들은 개발을 진행 하면서 필요하다면 설치하시고 위에 설명드린 extension은 좀더 쉽게 개발을 진행하기위한 최소한의 것들이니 먼저 설치해보시고 진행 해보시면 좀더 쉽고, 간결하고, 보기좋고, 예쁜 코드 개발에 될것 같습니다.

vue,js extension