ESLint, prettier 설정하기

01. ESLint

• package.jon에서 eslint 관련 내용 삭제

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

• 가장 상위에 .eslintrc.json 파일 제작
  • 삭제된 내용 붙여넣기

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

• 추가 ESLint 플러그인 설치
  • eslint에서 기본으로 제공하지 않는 다양한 규칙을 플러 그인을 통해 사용가능
  • eslint-plugin-testing-library
  • eslint-plugin-jest-dom

npm install eslint-plugin-testing-library eslint-plugin-jest-dom

• .eslintrc.json내용 추가

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

02. prettier

• 익스텐션 Npm 두가지 가능
• Npm은 여러 개발자가 같은 포맷 유지에 좋음
• 익스텐션은 혼자 편하게 설치하여 사용하기 좋음