Syntax Highlight for Vue.js (in Visual Studio Code)

프론티어2017-01-25 16:39:49273200visual studio code, vue, syntax highlight

최근에 Vue.js 를 살펴보고 있는데요.

그중에서 우선 눈에 들어오는 것 하나 기록해 둡니다.

독립적으로 Vue Component 를 vue 파일로 작성할 수 있는데요,
이때, 각 영역별로 lang 을 지정할 수 있는 점(특히 jade 사용가능한 점) 이 매력적이군요.

  • template : html, jade
  • script: javascript, tsc
  • style: css, less, sass, ...

그런데 다양한 lang 을 사용할 경우, syntax highlight 기능이 필수적인데요
extension 중 "Vue (Syntax Hightlight for vue.js)" 를 설치하고 확인해 보니 잘 되지 않아, 아쉬웠는데
한참 찾다보니, 사용자설정에 files.associations 설정에 vue 파일을 추가를 해야 하는군요

"files.associations": {
    "*.vue": "vue"
}

참고로 설치된 extension 과 사용자설정부분 Capture!
설정이미지


실제로 Syntax Highlight 가 적용된 vue 파일도 하나 Capture!
vue 파일