History
offer-fe에서 작업 후, 빌드 에러가 발생- 원인 : 특정 컴포넌트에서 import 경로가 잘못되어 있음
- VS Code의 lint에는 잡히지만 eslint script를 실행했을 때 아무런 에러 없이 동작 ⇒ husky에서 잡히지 않아서 발생
Issue
- AS-IS
next lint: Next.js 11부터 도입된 새로운 기능, ESLint를 프로젝트에 쉽게 통합할 수 있도록 도와주는 명령어 - Next.js에서 권장하는 ESLint 설정을 자동으로 적용할 수 있다. - Next.js의 특정 기능에 대한 best practice를 따르고 있는지 검사할 수 있다.
// package.json "lint": "next lint . --fix --max-warnings=0"
- Ex.
import/no-unresolved와 같은 ESLint 규칙을 사용하여 존재하지 않는 모듈을 import하는 경우를 검사하는 것은 next lint의 기능 범위를 벗어남 ⇒.eslintrc.js파일에 따로 추가 필요
- TO-BE
// package.json "lint": "tsc --noEmit && eslint --ext .ts,.tsx src"
tsc —noEmit : TS 컴파일러를 실행하되, —noEmit 옵션으로 실제로 JS 파일을 출력하지는 않음- 대신 TS 컴파일러는 코드에 있는 모든 TS 오류를 검사하고 보고함 ⇒ 타입 오류, 인터페이스 오류, import 오류 등
eslint --ext .ts,.tsx src: ESLint를 실행해서 코드 검사- 코드 스타일과 문법에 관련된 오류 검사 및 보고
- 기본적으로 TS의 타입 검사 || import 오류 등에 대한 검사는 수행하지 않음 ⇒ TS와 함께 사용할 수 있는 플러그인 설치 || 규칙 추가 필요
- ESLint가 아닌 TS 컴파일러가 해당 오류를 검사하고 보고했기 때문!
Etc
- eslint가 동작하는 방법 알아보기
- typescript eslint
