> For the complete documentation index, see [llms.txt](https://sharryhong.gitbook.io/front-end/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sharryhong.gitbook.io/front-end/front-end-dev/vue.js/vue.js-vs-code.md).

# Vue.js 개발자를 위한 VS Code

2021-07-27

참고링크 : <https://www.vuemastery.com/blog/vs-code-for-vuejs-developers/>&#x20;

참고링크 : <https://www.inflearn.com/course/vue-ts> 강의 내용 중&#x20;

### 필요 설치&#x20;

* VS Code 최신으로 다운로드 : <https://code.visualstudio.com/>&#x20;
* Vetur, Vue VScode Snippet 플러그인 설치&#x20;

### 편리한 기능들&#x20;

* 스니펫 \`vue\`  tab키 누르면 아래와 같이 코드 자동생성&#x20;

```
<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>
```

* 타입스크립트의 경우 스니펫  \`ts\` 후  알맞는 버전을 선택하면, 타입스크립트를 작성할 수 있는 기본 싱글파일컴포넌트 구조가 작성된다.   &#x20;

* 스니펫 \`vdata\` 작성시 아래 코드 자동 생성

```
data() {
    return {
      key: value
    }
  },
```

* 컴포넌트 파일이동 : mac에서는 option키 누르고 컴포넌트 클릭시 이동&#x20;