ESLint

개발자들이 특정한 규칙을 가지고 코드를 깔끔하게 짤 수 있게 도와주는 라이브러리

자바스크립트를 쓴느 라인 제시, 문법에 오류가 나면 알려주는 역할

포멧터 역할도 하지만, 주요 기능은 문법 오류를 잡아준다.

1. 익스텐션 설치 (CRA로 설치하면, eslint가 이미 설정되어 있다 => vscode로는 확인할 수 없고, 앱을 시작해야 확인할 수 있다.)

2. eslint 설정 파일 생성
   package.json에 eslint Config 부분 지우고, .eslintrc.json 파일 생성

{
  "extends": ["react-app", "react-app/jest"]
}

3. ESLint Testing Plugins 설치
   => Plugin이란 , eslint에서 기본으로 제공하지 않는 다양한 규칙을 직접 규칙을 플로그인을 통해 사용할 수 있다.
   예를 들어 react 와 관련된 린트설정을 위해서 eslint-plugin-react를 사용하게 되며, react hooks에 관련된 규칙을 적용시켜주려면 eslint-plugin-react-hooks를 사용하면 된다.

• 테스팅 관련된 플러그인
  • testing-library
    render로 DOM 그리는 부분
    npm install eslint-plugin-testing-library
  • expect-matcher로 테스트
    npm install eslint-plugin-jest-dom

4. eslintrc.json 내부 설정해주기

{
  "plugins": ["testing-library", "jest-dom"],
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended"
  ]
}

• plugins : 플러그인 추가할 때
• extends : 플러그인을 추가한 후에 규칙을 정해줘야 사용가능하다.
  extends 항목에 사용하고자 하는 규칙을 설정한다.
  규칙을 변경하고자 할 때는 rule 항목을 추가한다.

Prettier

주로 코드 형식을 맞추는데 사용하는 포맷터,
(" , ') 를 사용할지, Tab 간격을 2줄로 할지 4줄로 할지 등을 정할 수 있다.

1. vscode 익스텐션 설치

• extention 에서 톱니바퀴에서 설정 하면 된다.

2. npm 설치

• 여러 개발자와 같은 포맷 유지에 좋음