[FRONTEND] 코드 컨벤션

prettier(formatter) + Eslint(linter)

스타일을 교정하는 데는 prettier 포맷터를 사용하고, 코드를 정해 둔 규칙대로 구현했는지 오류를 파악할 때는 eslint를 사용한다.

👩‍💻 사용중인 컨벤션

FE프로젝트 컨벤션

.prettierrc.json sample

---

1️⃣ 사용 방법

1. 먼저 라이브러리 설치를 해준다

   npm i -D eslint prettier // 리액트 CRA의 경우 eslint가 자동 설치된다.
   

2. eslint, prettier vscode extention을 설치한다.

2️⃣ 충돌 발생

prettier와 eslint 모두 style에 대한 rule이 있는 경우, 그리고 두 rule이 다른 경우 충돌이 발생할 수 있다. 그런 경우 추가 설정으로 해결을 해야 된다.

• CRA의 기본 eslint는 prettier와 충돌이 없다? ( 아니다 충돌난다! ) 사실 리액트 CRA에서 기본 제공하는 eslint는 non-style rule만 갖고 있어서 prettier와 충돌은 없다고 한다. 그 외의 경우라면 아래 방법을 사용하자, 내가 eslint에 formatter 규칙넣을 때

3️⃣ 충돌 해결 방법

eslint-config-prettier 라이브러리 사용

1. 일단 style을 정하는 건 prettier이기 때문에 vscode setting에서 prettier를 기본 formatter로 설정한다.

   {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
   }
   

2. 충돌을 방지하기 위해 eslint-config-prettier 라이브러리를 설치한다.
   • eslint-config-prettier: eslint에서 prettier와 충돌하는 rule를 꺼주는 라이브러리

     npm i -D eslint-config-prettier
     

3. 그리고 .eslintrc 파일의 extents에 prettier를 추가한다.

   "extends": ["eslint:recommended", "prettier"],
   

4️⃣ 번외 : 충돌 방지 다른 방법들

비추

1. eslint-plugin-prettier : prettier를 eslint의 rule로 작동하도록 만드는 라이브러리다. 이러면 포맷팅 문제도 eslint의 오류로 표시되기 때문에 prettier는 스타일 포맷터, eslint는 오류 교정기로 나눠 사용하려는 취지에 맞지 않는다. 또한 elsint 오류 메세지가 많아지는 만큼 느려진다.
2. prettier-eslint: prettier 실행후 eslint —fix를 실행하는 방법이다. 직렬로 작동해서 느리다. → 메인테이너도 비추했으니 사용하지 말자

---

*️⃣ *참고*

💻 prettier와 eslint를 구분해서 사용하자

💻 ESLint, Prettier 적용하기

---

2번 째 참고 방식 사용 시 npm install eslint-plugin-react-hooks –save-dev를 해야된다고 하심

• prettier 2.0부터 endOfLine LF가 기본값 window는 CRLF, 맥은 LF 방식으로 줄바꿈을 해서 두 운영체제가 endOfLine auto로 하고 git으로 협업하면 수정을 안해도 git diff가 떠버린다.