🪂eslint + prettier를 Vue에 적용하기

🧹eslint? prettier?

eslint 는 javascript정적 도구다. javascript를 작성하면서 에러를 일으킬 수 있는 문법을 잡아준다고 생각하면 될꺼에요.

prettier는 Code Formatter이다. 일관된 코딩스타일을 도와줄수 있는 툴이라고 생각하면 될꺼에요

 

🌝 Prettier 세팅

우선 Visual Studio Code에서 Prettier를 설치해주세요.

다음으로 settings.json에서 다음 내용을 추가해주세요. settings.json "F1 => settiongs.json" 검색 하시면 됩니다.

settings.json에 아래 문구를 추가해주세요.

"editor.formatOnSave": true,
"editor.formatOnType": true,

이렇게 하면 Prettier만 설정이 된 상황입니다. 하지만 저희는 Eslint + Prettier를 사용하고 싶기 때문에 설정변경이 필요해요.

 

⛲ vue 프로젝트에 Eslint + Prettier 세팅

npm i eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue --save-dev

기존 프로젝트에 npm을 통하여 설치해주세요.

 

 

그리고 root폴더에서 .eslintrc.js를 만들어주세요

다음으로 .eslintrc.js에 아래내용을 채워주세요

// .eslintrc.js
module.exports = {
	env: {
		browser: true,
		node: true,
	},
	// 현재 eslintrc 파일을 기준으로 ESLint 규칙을 적용
	root: true,
	// 추가적인 규칙들을 적용
	extends: [
		'eslint:recommended',
		'plugin:vue/essential',
		'prettier',
		'plugin:prettier/recommended',
	],
	// 코드 정리 플러그인 추가
	plugins: ['prettier'],
	// 사용자 편의 규칙 추가
	rules: {
		'prettier/prettier': [
			'error',
			// 아래 규칙들은 개인 선호에 따라 prettier 문법 적용
			// https://prettier.io/docs/en/options.html
			{
				singleQuote: true,
				semi: true,
				useTabs: true,
				tabWidth: 2,
				trailingComma: 'all',
				printWidth: 80,
				bracketSpacing: true,
				arrowParens: 'avoid',
			},
		],
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
	},
};

이렇게 하면 Visual Studio code 에서 에러를 발생시킬수 있는 코드들에 대해서 신호를 주고 Prettier에서 코드를 포매팅 해줘요. 유용하게 쓰시면 좋겠어요.~