프로젝트 오류해결과정 - vue3에 eslint & prettier 같이 적용하기

한 사람이 코딩한 것 처럼 만들자

프로젝트를 진행하는데 있어, 팀원도 그렇고 나도 그렇고 동의하는 내용이다.

이걸 위해 문법과 코딩 컨벤션을 맞춰야하는데, eslint와 pretter를 쓰기로 하였다.

eslint는 보통 잘못 입력한 문법을 자동으로 수정하기 위해서 사용 한다.

Prettier는 팀원간의 코딩 컨벤션을 맞추기 위해서 사용한다.

오류발생

eslint와 prettier가 충돌하는 이슈가 있었다.

eslintrc.js 파일에, 다음과 같이 prettier 플러그인을 설정해주고,
rules에 규칙을 설정해줬다.

module.exports = {
	// 현재 eslintrc 파일을 기준으로 ESLint 규칙을 적용
	root: true,
	// 추가적인 규칙들을 적용
	env: {
		node: 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: false,
				useTabs: true,
				tabWidth: 2,
				trailingComma: 'all',
				printWidth: 80,
				bracketSpacing: true,
				arrowParens: 'avoid',
				endOfLine: 'auto',
			},
		],
		semi: ['error', 'never'],
		quotes: ['error', 'single'],

		'vue/html-self-closing': [
			'error',
			{
				html: {
					void: 'always',
					normal: 'never',
					component: 'always',
				},
				svg: 'always',
				math: 'always',
			},
		],
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
	},
}

그렇게 잘 적용되리라 생각하였으나..

eslint와 prettier가 충돌이 일어났다.

prettier규칙

eslint규칙

저장 할 때마다 매번 서로가 서로를 지적하는 상황이 되어 버렸다.....

오류해결

충돌을 해결하기 위해 여러 시도를 거쳤다.
문제는 바로 default값이 prettier로 설정이되어 있었다..
F1을 눌러 settings.js에 들어가 보자.

여러옵션중,
"editor.defaultFormatter": "esbenp.prettier-vscode"
를 주석 처리를 해주어 defaultFormatter를 없앤다.

그리고 아래와 같이 eslint가 기본 셋팅이 되게끔 해준다.

  "editor.formatOnSave": false,
  "eslint.alwaysShowStatus": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.workingDirectories": ["./frontend"],
  "eslint.validate": [
    "javascript",
  ],

그렇게하면 위의 eslintrc.js파일안에 prettier를 플러그인을 통하여 실행 하면, eslint와 prettier를 같이 사용 할 수 있따.!