vue3로 프로젝트로 설정할 때 마다 해주는 prettier, eslint 설정을 정리해보고자 합니다.
이 설정을 통해 저장 할 때마다 내가 정한 포맷으로 바뀌는 lint on save, format on save가 되도록 하는 것이 목표입니다.
vue3 프로젝트 생성
vue-cli를 이용하여 아래처럼 vue3 프로젝트를 생성 했습니다. (vue-cli 공식 사이트)
1. Preset 선택 - Manually select features
vue-cli는 default로 preset을 제공하고 있지만
저는 직접 원하는 부분만 설치 할 수 있도록 manually select 를 클릭합니다.
(v3-ts-sass는 제가 저장한 preset으로 무시하셔도 좋습니다.)

2. Feature 선택
아래와 같이 선택해 줍니다.

3. 기타 설정
아래와 같이 설정해 줍니다. class-style component는 제가 사용하지 않고, 저장 할 때마다 포맷팅을 설정하기 위해 lint on save를 추가해주었습니다.
또한, babel, eslint 등의 config 파일은 package.json에서 한번에 관리하기 보다는 각각의 파일로 관리하기 위해 dedicated config files를 선택했습니다. 각 설정의 상세 내용은 vue-cli 공식 홈페이지를 참고해주시기 바랍니다.

Eslint, prettier 설정
물론,바로 config 파일만 붙여도 좋지만, 먼저 각각이 어떤 역할을 하는지 아는 것이 중요하기 때문에 간단히 정리하도록 하겠습니다.
eslint는 내가 원하는 대로 코드컨벤션을 정하고, 해당 코드컨벤션을 강제 할 수 있습니다. prettier에서 설정한 세팅대로 제대로 쓰는지 체크 할 수도 있고, 보통 prettier에서 정한 규칙을 eslint로 체크하는 방식으로 둘 다 사용하는 것이 일반적입니다.
prettier는 탭을 2space로 할 지, 4개로 할 지와 같이 vscode와 같은 에디터에서 의 텍스트 규칙을 정합니다.
.prettierrc ??
prettier 설정은 개발자마다 에디터 설정에 따라 달라 질 수 있기에, 통일되게 맞추기 위해서 .prettierrc 파일을 통해서 통일 할 수 있습니다. .prettierrc는 에디터에서 설정한 설정보다 항상 우선권을 가지기 때문에 코드 통일성을 위해서는 필수적입니다.
제가 주로 기본적으로 사용하는 .prettierrc는 아래와 같습니다.
//.prettierrc
{
"tabWidth": 4,
"useTabs": true,
"singleQuote": true,
"jsxSingleQuote": true,
"semi": true,
"arrowParens": "avoid",
"trailingComma": "es5",
"minItems": 0,
"printWidth": 140
}
.eslintrc ??
prettier 설정은 위 설정 파일로 마무리 했습니다. 그럼 그 설정대로 eslint가 체크하도록 설정해주어야 합니다. 제가 설정해주는 eslintrc는 아래와 같습니다.
아래 설정은 매우 기본적이며, 여러가지 설정이 추가 될 수있다는 것을 인지해주시면 좋겠습니다.
아래 설정은 prettier를 eslint에서 사용하게 하고, vue에서 component 이름을 지을 때 multiword로 체크 해야 하는 부분을 해제하는 설정만 포함되어 있습니다.
//.eslintrc
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended', 'prettier'],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/multi-word-component-names': 'off',
'no-unused-vars': 'off',
},
};
이렇게 설정하면 저장 하면 자동으로 포맷팅이 되게 됩니다.
'Vue' 카테고리의 다른 글
Vue3 Snippet 만들기 (0) | 2023.11.06 |
---|---|
Vue에서 Svg사용하기 (0) | 2023.10.27 |
Vue 변수 CSS에서 사용하기 🤩 (0) | 2023.09.02 |
[Solved] Unhandled error during execution of scheduler flush. This is likely a Vue internals bug 에러 (0) | 2023.08.02 |
[Solved] Vue Component name multi-word 에러 전체 해제하기 (0) | 2023.06.14 |
vue3로 프로젝트로 설정할 때 마다 해주는 prettier, eslint 설정을 정리해보고자 합니다.
이 설정을 통해 저장 할 때마다 내가 정한 포맷으로 바뀌는 lint on save, format on save가 되도록 하는 것이 목표입니다.
vue3 프로젝트 생성
vue-cli를 이용하여 아래처럼 vue3 프로젝트를 생성 했습니다. (vue-cli 공식 사이트)
1. Preset 선택 - Manually select features
vue-cli는 default로 preset을 제공하고 있지만
저는 직접 원하는 부분만 설치 할 수 있도록 manually select 를 클릭합니다.
(v3-ts-sass는 제가 저장한 preset으로 무시하셔도 좋습니다.)

2. Feature 선택
아래와 같이 선택해 줍니다.

3. 기타 설정
아래와 같이 설정해 줍니다. class-style component는 제가 사용하지 않고, 저장 할 때마다 포맷팅을 설정하기 위해 lint on save를 추가해주었습니다.
또한, babel, eslint 등의 config 파일은 package.json에서 한번에 관리하기 보다는 각각의 파일로 관리하기 위해 dedicated config files를 선택했습니다. 각 설정의 상세 내용은 vue-cli 공식 홈페이지를 참고해주시기 바랍니다.

Eslint, prettier 설정
물론,바로 config 파일만 붙여도 좋지만, 먼저 각각이 어떤 역할을 하는지 아는 것이 중요하기 때문에 간단히 정리하도록 하겠습니다.
eslint는 내가 원하는 대로 코드컨벤션을 정하고, 해당 코드컨벤션을 강제 할 수 있습니다. prettier에서 설정한 세팅대로 제대로 쓰는지 체크 할 수도 있고, 보통 prettier에서 정한 규칙을 eslint로 체크하는 방식으로 둘 다 사용하는 것이 일반적입니다.
prettier는 탭을 2space로 할 지, 4개로 할 지와 같이 vscode와 같은 에디터에서 의 텍스트 규칙을 정합니다.
.prettierrc ??
prettier 설정은 개발자마다 에디터 설정에 따라 달라 질 수 있기에, 통일되게 맞추기 위해서 .prettierrc 파일을 통해서 통일 할 수 있습니다. .prettierrc는 에디터에서 설정한 설정보다 항상 우선권을 가지기 때문에 코드 통일성을 위해서는 필수적입니다.
제가 주로 기본적으로 사용하는 .prettierrc는 아래와 같습니다.
//.prettierrc
{
"tabWidth": 4,
"useTabs": true,
"singleQuote": true,
"jsxSingleQuote": true,
"semi": true,
"arrowParens": "avoid",
"trailingComma": "es5",
"minItems": 0,
"printWidth": 140
}
.eslintrc ??
prettier 설정은 위 설정 파일로 마무리 했습니다. 그럼 그 설정대로 eslint가 체크하도록 설정해주어야 합니다. 제가 설정해주는 eslintrc는 아래와 같습니다.
아래 설정은 매우 기본적이며, 여러가지 설정이 추가 될 수있다는 것을 인지해주시면 좋겠습니다.
아래 설정은 prettier를 eslint에서 사용하게 하고, vue에서 component 이름을 지을 때 multiword로 체크 해야 하는 부분을 해제하는 설정만 포함되어 있습니다.
//.eslintrc
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended', 'prettier'],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/multi-word-component-names': 'off',
'no-unused-vars': 'off',
},
};
이렇게 설정하면 저장 하면 자동으로 포맷팅이 되게 됩니다.
'Vue' 카테고리의 다른 글
Vue3 Snippet 만들기 (0) | 2023.11.06 |
---|---|
Vue에서 Svg사용하기 (0) | 2023.10.27 |
Vue 변수 CSS에서 사용하기 🤩 (0) | 2023.09.02 |
[Solved] Unhandled error during execution of scheduler flush. This is likely a Vue internals bug 에러 (0) | 2023.08.02 |
[Solved] Vue Component name multi-word 에러 전체 해제하기 (0) | 2023.06.14 |