npm typescript으로 eslint를 설정하고 기본 환경을 구성한다.

[4BFC]

🔗REF

• 🔗eselint init
• 🔗eselint 환경설정
• 🔗eselint v9 주의사항
• 🔗eselint ignore
• 🔗eselint 규칙 설정 참고
• 🔗eselint aribnb 참고
• 🔗eselint -import-resolver-typescript 설정 방법과 참고
• 🔗eselint -import-resolver-typescript 설정 방법과 참고
• 🔗eselint -import-resolver-typescript 설정 방법과 erro 참고
• 🔗eselint Function component is not a function declaration error 참고

✍Task

• pnpm으로 front 디렉토리에 CRA를 중심으로 Eslint 설치를 여러번 시도 해봤지만 Eslint 규칙의 충돌들이 많아서 우선은 npm을 기준으로 typescript를 위한 규칙들을 먼저 설정해 보았다. 우선은 모든 규제를 허용한 상태이며 하나하나 추가하는 방식으로 코드를 만들어 보았다. 이러한 과정이 필요한 이유는 어떠한 플러그인이 필요한지 그리고 CRA template typescript환경에서 eslint와 prettier를 작성하고 사용하는 방식이 잘 적용되는지 위한 저검 중 하나이다. 물론 이전에 프로젝트에서 설정을 했지만 eslint의 경고가 즉각적으로 동작하지 않았다. 물론 CRA의 독립성으로 인해서 발생된 문제로 추측되지만 이를 해결하기 위한 하나의 과정이다.

📌Spec

• eslint ^8.22.0 : JavaScript, TypeScript 등의 코드 품질을 검사하고 스타일을 맞추는 데 사용되는 도구
• @typescript-eslint/eslint-plugin ^5.18.0 : TypeScript 코드에 대해 추가적인 ESLint 규칙을 제공, 이 플러그인은 TypeScript를 사용할 때 권장되는 규칙을 포함
• @typescript-eslint/parser ^5.18.0 : TypeScript 파일을 ESLint가 이해할 수 있도록 파싱하는 파서
• eslint-config-airbnb ^19.0.4 : Airbnb 스타일 가이드를 기반으로 한 ESLint 설정으로, JavaScript와 React 프로젝트에서 널리 사용되는 규칙들을 제공
• eslint-config-prettier ^9.1.0 : ESLint와 Prettier의 충돌을 방지하기 위한 설정, Prettier의 규칙을 강제로 적용하며, ESLint에서 Prettier와 관련된 규칙들을 비활성화
• eslint-import-resolver-typescript ^3.6.3 : ESLint에서 TypeScript 모듈을 올바르게 해결하도록 도와주는 resolver
• eslint-plugin-import ^2.31.0 : ES6 모듈과 관련된 규칙을 제공, 주로 import/export 규칙과 관련된 검사를 수행
• eslint-plugin-jsx-a11y ^6.10.2 : JSX에서 접근성 관련 규칙을 적용하는 플러그인, 이 플러그인은 시각 장애를 가진 사용자들을 위한 접근성 검사를 제공
• eslint-plugin-prefer-arrow ^1.2.3 : 함수 선언문 대신 화살표 함수 사용을 권장하는 규칙을 제공
• eslint-plugin-prettier ^5.2.1 : Prettier와 통합하여 코드 스타일을 자동으로 수정, eslint --fix를 실행하면 Prettier 규칙을 기반으로 자동으로 코드 포맷팅을 수행
• eslint-plugin-react ^7.37.2 : React와 관련된 ESLint 규칙을 제공, 주로 JSX 및 React 컴포넌트에서 발생할 수 있는 문제를 찾는 데 유
• prettier ^3.3.3 : 코드 스타일을 자동으로 정리하고 일관되게 유지하는 도구, ESLint와 함께 사용할 때, 코드 스타일을 통일하는 데 매우 유용

📝새로 알게된 Front News

• eslint와 prettier를 통합 관리하지 말라.
  • 과거에 eslint와 prettier를 통합하고 관리했다. 하지만 여러 블로그와 GPT의 자문을 구하면서 이를 통합 하지 말라는 권장을 받았다. 명확한 이유 중 이 둘의 구분을 위함이 가장 크다는 것을 알았다.
• webpack을 사용헤서 React를 구현 한다면 npm init @eslint~를 사용해라
  • webpack을 사용하면 일반적인 eslint만을 설정하기 보단 npm init @eslint~를 통해서 설치해야한다. CRA를 통해서 통합 설치를 할 경우 eslint가 기본적으로 설정 되어 있다.
• pnpm의 add와 install의 차이
  • pnpm add ~를 사용하면 패키지를 설치할 뿐만 아니라 설치한 패키지를 package.json의 dependencies나 devDependencies에 자동으로 추가하게 된다.
  • pnpm install ~은 패키지 추가를 위한 명령어가 아니며 package.json에 이미 정의된 의존성들을 설치하는 데 사용된다.
  • 이전 pnpm으로 설치를 할때 add와 install을 혼용해서 사용했다. 이로 인해서 pnpm으로 eslint를 설치할 때 발생하는 문제들이 많았으며 이해가 되지 않는 package.json의 형태가 나타 났었다.