Prettier

• 많은 언어를 지원하고 대부분의 코드 편집기에서 쓸 수 있다. 소스파일을 저장 후 * poof *를 사용하면 자동으로 코드가 포맷된다.(정해진 스타일로 코드를 강제로 바꿔줌)
• 팀원들 간의 공통된 코드 스타일 가이드를 가질 수 있는 장점이 있다.
• 코드를 자동으로 정리해준다!
• 다른 도구들과의 차이점은, 코드 정리 규칙을 세부적으로 설정할 수 있다는 점이다.

ESLint

• JS용 linter. linter란, 소스코드를 분석해서 문법 에러, 버그 등을 표시해주는 도구.
• 코드를 편집기에 입력하는 동시에 잠재적인 오류가 있는지 분석해주는 프로그램.

airbnb 스타일

• 다른 개발자들이 많이 사용하는 config.
• airbnb에서 정의한 JS 코드 스타일을 불러와서 사용.

Prettier 와 ESLint 연동하기

• 목적 : ESLint 내부의 모든 형식 규칙을 비활성화해서 error에 대해서만 규칙을 사용하며 모든 코드를 Prettier형식으로 만들기.
• ESLint와 Prettier를 각각 설치한 후, 이 둘의 설정을 이어주는 작업을 해줘야 정말 완성된 기본 스타일이 된다!

적용 순서

-> VSCode에서 ESLint 와 Prettier extension 설치

두 extension만 설치하시면 됩니다! 밑에껀 우선 무시해주세요!!

---

(cf.시작하기 전에, npm과 npx이 설치되어있어야 합니다. 이미 되어있을 것이므로 pass해도 됨.)

1. VSCode에서 ESLint 와 Prettier extension 설치

설치 완료 후 코드를 정신없이 바꾼 다음 **Shift + Ctrl + F**을 눌러보면 코드가 한번에 정리된다. (by. Prettier)

2. 프로젝트에 ESLint 및 Prettier 라이브러리 설치 - 프로젝트의 루트 디렉토리에 npm install -D eslint prettier
3. Airbnb Config 설치 - npx install-peerdeps --dev eslint-config-airbnb
4. eslint-config-prettier (ESLint 내부의 모든 형식 비활성화하기위해)와 eslint-plugin-prettier 설치 (ELSint가 코드 입력하는 동안에 에러를 나타낼 수 있게하기 위해) - npm install -D eslint-config-prettier eslint-plugin-prettier
5. 루트 디렉토리에 .eslintrc.json 파일 만들기
6. .eslintrc.json 파일에 다음의 코드 작성

{ 
  "extends": [ "airbnb", "prettier"], 
  "plugins": [ "prettier"], 
  "rules": { 
    "prettier / prettier": [ "error"] 
  }
}

7. 루트 디렉토리에 .prettierrc 파일 만들기 (prettier의 포맷을 적용하기 위한 설정파일.)
8. .prettierrc 파일에 다음의 코드 작성

 { 
  "printWidth": 100, 
  "singleQuote": true 
}

9. Prettier 형식 저장 - VSCode의 User Setting( Ctrl + , ) 에 "editor.formatOnSave": true 삽입

끝!