Prettier 와 ESLint

• Prettier: 코드 정리 도구
• ESLint: 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구

Prettier 설정

옮지 않은 예시

• Prettier 설정을 위해 다음과 같이 루트 경로에 .prettierrc 라는 파일을 생성 후 작성
  

• 뷰 cli 로 프로젝트를 생성할 때 option 이 eslint 와 prettier 가 같이 들어갔기 때문에 다음의 코드가 실행됨
  

• 이렇게 .prettierrc 즉 prettier 의 설정 파일들을 정리할 수 있다

옮은 예시

• 하지만 위의 방식대로 하지 않고 eslint 파일 안에서 설정해야 한다.

⇒ 다음의 eslint 설정 파일에서 정의한 rule 과 충돌이 나기 때문에, eslint 가 먼저 우선시 되어야 한다.

• 다음과 같은 형태로 작성하면 prettier 로 정리하면서 eslint rule 을 통해 에러까지 동시에 같이 잡아줄 수 있다.
  
• 더 정확한 형태의 코드는 다음과 같다.

  rules: {
  	'no-console': 'off',
  	// "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
  	// "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  	**'prettier/prettier': [
  		'error',
  		{
  			singleQuote: true,
  			semi: true,
  			useTabs: true,
  			tabWidth: 2,
  			trailingComma: 'all',
  			printWidth: 80,
  			bracketSpacing: true,
  			arrowParens: 'avoid',
  		},
  	],**
  },

설정을 마치면 아래와 같이 eslint 가 반응하여 빨간줄이 그이게 된다.

이때 저장(commend + s)을 하면 prettier 가 자동으로 rule 에 맞춰진 코드로 교정해준다.

ex) 큰따옴표였던 것이 작은 따옴표로 바뀜

출처: 인프런 강의 - 캡틴판교 [Vue.js 끝장내기 실무에 필요한 모든 것]