ESLint

ESLint는 JavaScript/TypeScript 코드의 품질을 검사하고 일관된 코드 스타일을 유지하도록 도와주는 도구입니다.

Next.js는 eslint-plugin-next라는 ESLint 플러그인을 기본적으로 제공합니다. 이 플러그인은 Next.js 애플리케이션에서 발생할 수 있는 일반적인 문제들을 찾아내는데 도움을 줍니다.

참고사항

다음 ESLint 플러그인들의 권장 규칙들이 eslint-config-next에 모두 포함되어 있습니다:

• eslint-plugin-react - React 관련 규칙
• eslint-plugin-react-hooks - React Hooks 관련 규칙
• eslint-plugin-next - Next.js 관련 규칙

이 설정은 next.config.js의 설정보다 우선적으로 적용됩니다.

VS Code나 다른 코드 에디터에서 ESLint 확장 프로그램을 설치하면, 코드를 작성하는 동안 실시간으로 문제점을 확인하고 수정할 수 있습니다.

<aside> 💡

현재 Next.js 프로젝트에는 이미 eslint-config-next 패키치가 설치되어 있습니다.

</aside>

실습 ESLint 설정

Lint 검사

프로젝트의 코드 품질을 확인하기 위해 ESLint 검사를 실행합니다:

npm run lint

> [email protected] lint
> next lint

✔ No ESLint warnings or errors

위 결과와 같이 ESLint 경고나 오류가 없다면 코드 품질 검사를 정상적으로 통과한 것입니다.

eslint.config.mjs 설정