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

참고링크 : <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;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sharryhong.gitbook.io/front-end/front-end-dev/vue.js/vue.js-vs-code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.