eslint prettier 코드 포맷팅 통합

내용

eslint 와 prettier 는 문법 오류를 방지하고 코드 포매팅을 통해 일관적인 코딩 컨벤션(코딩 규약)을 유지하여 코드 작성 및 협업시에 도움이 된다.

다만 이 두 가지가 겹치는 부분이 존재하는데 eslint 와 prettier 모두 코드 포매팅 기능을 제공하기 때문에 겹치는 상황이 생겨 코드작성이 힘들어질 수 있다.

위 과정을 해결할 수 있는 라이브러리가 두 가지가 있다.

관련 라이브러리

eslint-config-prettier

eslint입장에서 불필요하거나 Prettier 와 충돌할 수 있는 모든 규칙을 제외해버린다.

단지 규칙을 꺼버리는 것이기에 당연히 다른 규칙과 함께 사용하는 경우에 의미가 있다.

eslint-plugin-prettier

Prettier의 규칙이 ESLint에 통합되어 코드 스타일 관련 문제를 식별하고 보고할 수 있습니다

즉 .prettierr 파일의 내용이 eslint 가 통합해서 인식하여 코드 포맷팅 관련 문제를 식별하는 방식이다.

세팅

eslint-config-prettier 와 eslint-plugin-prettier 한번에 세팅

// .eslintrc
{
  "extends": ["plugin:prettier/recommended"]
}

관련 오류 경험

Delete ␍ eslint (prettier/prettier)

Prettier에서는 CRLF대신 LF사용을 권고하고 있기 때문에 VSC 설정과 달라 에디터 상에 오류 메시지가 생길 수 있다.

CR,LF,CRLF 관련 내용

.eslintrc 에 아래 코드를 룰에 추가하면 오류 메시지가 더 이상 생기지 않는다.

//.eslintrc
'prettier/prettier': [
  'error', { endOfLine: 'auto', },
],

참고

eslint-config-prettier
eslint-plugin-prettier
https://simsimjae.medium.com/prettier%EC%99%80-eslint%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%84%A4%EC%A0%95-110dc8ab94b6