Vue를 초기에 프로젝트를 생성하려고 보니 만져야 되는 설정이 많았다. 까먹을까봐 적어둔다.
1. formatter 설정
나는 에디터를 vscode를 쓰고 있기에 vscode맞춰 설명하겠다. 우선 왼쪽 하단에 보면 톱니바퀴가 있는데 이는 설정이므로 클릭해보면 위와 같은 메뉴가 나온다. 이에 설정을 눌러준다.
그리고 검색에 formatter라고 검색하면 저렇게 나오니 위와 같은 사진처럼 설정해준다. 그래야 코드가 알맞게 정렬되어 보기 쉽다.
2. eslint, prettier 설정
두번째로 eslint와 prettier인데,, 이는 다른 프로젝트와 조금씩 설정이 다르므로 각각 나에 맞게 설정해준다.
공식문서에도 이와 같은 설정이 자세히 나와있으니 참고하는 것을 추천한다.
3. Vue snippets 만들기
이제 프로젝트 기초 설정은 다 해주었다. 각각의 router를 만들고자할 때 빠르게 만들기 위해서 단축 버튼을 만들어주고자 한다.
이는 왼쪽하단의 설정을 눌러 사용자 코드 조각 구성을 클릭한다. 그리고 검색창이 뜨는데, vue라고 치면 vue.json라고 나온다.
→ 처음에 vue라고 입력하면 vue(Vue)라고 나오는 파일이 vue.json이니 주의하자.
vue.json에 들어가게 되면 주석이 나오게 되는데, 이 주석의 맨밑에 아래와 같은 코드를 포함시켜준다.
- prefix : 단축 단어를 설정하는 것이다. 해당 단어를 쳤을 때 templates, script, style이 나오게 설정한다.
- body : 단축 단어를 쳤을 때 나오는 코드이다. 주의할 것은 template안에 div를 써줘야 한다. 그래야 자식 컴포넌트를 포함할 수 있다. 그렇지 않으면 오류가 발생하니 주의하자.
- description : 말그대로 설명이다.
"Generate Basic Vue Code": {
"prefix": "vue-start",
"body": [
"<template>\\n\\t<div></div>\\n</template>\\n<script>\\nexport default {\\n\\tcomponents: {},\\n\\tdata() {\\n\\t\\treturn {\\n\\t\\t\\tsampleData: ''\\n\\t\\t}\\n\\t},\\n\\tsetup() {},\\n\\tcreated() {},\\n\\tmounted() {},\\n\\tunmounted() {},\\n\\tmethods:{}\\n}\\n</script>"
],
"description": "Generate Basic Vue Code"
}
설정을 다 맞쳤으면, 빈 vue를 만들어 쳐본다. 그러면 아래와 같이 나온다.
팁으로, 위와 같이 나오는 것말고 단조롭게 나오는 것을 원한다면 vue에서 제공되는 것이 있다. vbase를 쳐서 아래와 같이 필수 요소들을 생성하면 된다.
