[React] prettier와 eslint

1. prettier

- code formatter (탭, 간격, 띄어쓰기, 줄바꿈, 세미콜론, 따옴표... 자동으로)

• file
  - 깃허브(원격저장소)에 데이터를 저장할 때[협업용]
  - 모든 개발자들이 같은 형태의 데이터를 저장하기 위해 설정하는 파일
  .prettierrc
• 내 로컬 환경
  vscode의 extension을 활용하여 내가 마음대로 커스텀한 코드 포메터를 사용

2. eslint

- lintter의 일종

(화살표함수, 일반함수, console.log를 허용할 것인지, 사용되지 않는 변수가 있다면 error 정의되지 않음 함수가 있다면...)
 - 여러분들의 코드 문법을 통일화

• file
  - 깃허브(원격저장소)에 데이터를 저장할 때[협업용]
  - 모든 개발자들이 같은 형태의 데이터를 저장하기 위해 설정하는 파일
• 내 로컬 환경
  vscode의 extension을 활용하여 내가 마음대로 커스텀한 코드 포메터를 사용

3. 내 로컬 환경에서 설정

- 내 로컬 환경에서 설정하기 위해서는 마켓플레이스에 가서 prettier와 eslint는 찾아서 설치를 해주면 된다.

- 파일 > 기본설정 > 설정에 들어가서 formatter를 검색한 뒤 Default는 우리가 설치해 준 Prettier로 설정해주면 된다.

- 그리고 검색창에 save를 검색해서 Format On Save를 체크해주면 저장만 해도 fomatter와 eslint가 설정된다.

4. prettier와 eslint file로 설정

- 파일을 설정한 뒤 깃허브에 commit이나 push를 할 때 formatter와 eslint가 적용되게 하고 싶으면 husky를 사용하면 된다.

• 설치(-D: devDependencies 개발할 때만 사용)
  - npm i prettier eslint-config-prettier eslint-plugin-prettier -D
• npx eslint --init
  - eslint 기본 설정
  - 이것을 하게 되면 eslintrc.js가 만들어짐

  

• .prettierrc.js
  - prettierrc.js 파일을 만들어 그 안에 prettier 규칙 설정

  

• .eslintrc.js   
  - eslint 규칙 설정

  

• 명령어 설정
  - formatter와 eslint 명령어를 package-json파일 scripts에 설정을 해준다.