vue3 prettier, eslint 설정 (feat. lint on save)

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',
	},
};

 

 

이렇게 설정하면 저장 하면 자동으로 포맷팅이 되게 됩니다.