- Prettier: 코드 정리 도구
- ESLint: 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구
Prettier 설정을 위해 다음과 같이 루트 경로에 .prettierrc 라는 파일을 생성 후 작성
뷰 cli 로 프로젝트를 생성할 때 option 이 eslint 와 prettier 가 같이 들어갔기 때문에 다음의 코드가 실행됨
이렇게 .prettierrc 즉 prettier 의 설정 파일들을 정리할 수 있다
⇒ 다음의 eslint 설정 파일에서 정의한 rule 과 충돌이 나기 때문에, eslint 가 먼저 우선시 되어야 한다.
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) 큰따옴표였던 것이 작은 따옴표로 바뀜