원본 글

VSCode Sass, Vue 세팅하기

항상 Vue.js korea에서 많은 분들의 도움을 받고 있습니다. 감사합니다~

어제 vscode를 처음 써보면서 세팅하면서 겪었던 시행착오들을 한번 정리해봤습니다.

vscode를 처음 쓰시고자 하는분들한테 도움이 되길 바랍니다.

Sass

vscode를 맨 처음 설치하고 단일 파일 *.vue로 된 파일을 열었을때 scss가 있으면 아래와 같이 에러가 발생합니다.

이 에러가 발생하는 이유는 기본적으로 vscode가 sass를 지원하지 않기 때문입니다.

그래서 sass를 사용하기 위해서는 extension설치와 설정을 해주어야 합니다.

설치 후 설정 중요!!

먼저 vscode에서 vue파일을 사용하기 위해서 제가 사용한 extension은 Vue Components 입니다.

vscode에서 extension를 쉽게 설치하기 위해서 제공되는 편의 기능 중에 F1를 누르고 나오는 입력창에서 아래와 같이 입력하면 됩니다.

그러고 나서 Vue Components를 설치해줍니다.

여기까지 설치가 다 되어서 다시 파일을 가보면 vscode는 여전히 에러를 뱉어내고 있습니다.

여기서 아까 말한 설정이 필요합니다.

README를 보면 아래와 같이 설정하라고 나옵니다.

그러면 이 설정을 어떻게 하느냐?!에서 많은 분들이 궁금증을 가지실수 있습니다.

그래서 vscode는 이러한 세팅을 settings.json라는 파일로 세팅을 관리합니다.

프로젝트의 root에 .vscode라는 디렉토리를 찾으실 수 있을겁니다.

그래서 settings.json파일을 열고 아까 본 설정을 적어줍니다.

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

이렇게 적용을 하면 인제부터 .vue파일에서 scss를 사용할 수 있습니다.

Vue

vscode에서 eslint를 적용하기 위해서 저는 vscode-eslint를 설치하였습니다.

이 가이드는 javasript lint중에 standard를 기준으로 설명하겠습니다.

vscode-eslint를 설치 하고 아무런 세팅을 안해주면

js에서는 잘 되는데 vue파일에서는 linting이 작동하지 않았습니다.

그래서 vscode-eslint 이슈를 살펴보던 중에 해결방법을 찾았습니다.

vscode-eslint를 설치하고 나면 기본적인 세팅은 2가지만 되어있습니다.

// An array of language ids which should be validated by ESLint
"eslint.validate": [
  "javascript",
  "javascriptreact"
],

그래서 작업하시는 프로젝트의 settings.json에 아래와 같이 적용해줍니다.

  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"     
  ]

이 방법은 vscode-eslint의 ISSUE #42를 참고하였습니다.

이렇게 세팅을 하고 나면 인제 .vue파일에서도 linting이 되는걸 확인하실 수 있습니다.

지금까지 vscode에서 sass, vue세팅하기에 대해서 알아봤습니다.

부록

저처럼 귀차니즘이 심한 개발자라서 어떻게 하면 좀 더 자동화를 해볼까? 라고 생각하시는 분이 있다면 vue snippet를 등록해보세요.

위와같은 절차로 들어가게 되면 vue.json파일이 나옵니다. 거기에 아래 snippet를 추가해주세요.

"init template": {
  "prefix": "tpl",
  "body": [
    "<template lang='$1'>",
    "",
    "</template>",
    "<script>",
    "export default {",
    "",
    "}",
    "</script>",
    "<style lang='$2'>",
    "",
    "</style>",
    ""
  ],
  "description": "single vue file initial template"
}

그러면 아래와 같이 사용할 수 있습니다.

마지막으로 틀린 점이나 조금 더 나은 방법이 있으신 분은 언제나 지적해주시면 감사하겠습니다 ^^