[Next.js] ESLint

블로그 리스트

이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 Next.js의 시리즈 리스트입니다.

개요

이번 블로그 포스트에서는 TypeScript를 기반으로 하는 Next.js 프로젝트에 ESLint를 적용하는 방법에 대해서 알아보겠습니다. ESLint란 ES(EcmaScript) + Lint(에러 코드 표식) 합성어로 Javascript 코드를 분석하고, 잠재적인 오류나 버그를 찾는데 도움을 주는 툴입니다.

ESLint 공식 사이트: https://eslint.org/

여기서 소개한 소스코드는 아래에 링크를 통해 확인할 수 있습니다.

GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/4.eslint

TypeScript 기반 Next.js 프로젝트 생성

TypeScript가 적용된 Next.js에서 ESLint를 사용하는 방법을 확인하기 위해, 다음 명령어를 실행하여 TypeScript가 적용된 Next.js 프로젝트를 생성합니다.

npx create-next-app --typescript my-app

이때, 다음과 같이 ESLint를 사용할지 물어보는 화면을 확인할 수 있습니다.

? Would you like to use ESLint with this project? › No / Yes

우리는 ESLint를 사용할 예정이므로, Yes를 선택하여 진행합니다.

ESLint 설정

Next.js는 기본적으로 ESLint를 지원합니다. 우리는 여기에 추가적인 설정을 할 예정입니다. 다음 명령어를 실행하여 추가 설정에 필요한 플러그인을 설치합니다.

npm install --save-dev eslint-plugin-import eslint-plugin-no-null eslint-plugin-storybook @typescript-eslint/eslint-plugin

그리고 ESLint의 설정 파일인 .eslintrc.json 파일을 열고 다음과 같이 수정한다.

{
  "extends": ["next/core-web-vitals", "plugin:storybook/recommended"],
  "plugins": ["@typescript-eslint", "no-null"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          ["parent", "sibling"],
          "object",
          "type",
          "index"
        ],
        "pathGroups": [
          {
            "pattern": "react",
            "group": "external",
            "position": "before"
          }
        ],
        "pathGroupsExcludedImportTypes": ["react", "next"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ],
    "sort-imports": [
      "error",
      {
        "ignoreCase": true,
        "ignoreDeclarationSort": true,
        "ignoreMemberSort": false,
        "allowSeparatedGroups": true
      }
    ],
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/consistent-type-imports": "error",
    "no-null/no-null": 2,
    "curly": ["error", "multi-line", "consistent"],
    "nonblock-statement-body-position": ["error", "beside"]
  }
}

스크립트 설정

이렇게 설정한 ESLint를 사용하기 위해 package.json 파일을 열고 다음과 같이 스크립트를 추가합니다.

"scripts": {
  ...
  "lint": "next lint",
  "lint:fix": "next lint --fix"
},

ESLint 실행

이제 다음 명령어를 사용하여 앞에서 설정한 ESLint의 내용을 검사합니다.

npm run lint

만약, 설정한 ESLint 옵션에 위반이 되는 파일이 있으면, 다음과 같이 표시됩니다.

./pages/_document.tsx
1:16  Error: Member 'Head' of the import declaration should be sorted alphabetically.  sort-imports

./pages/index.tsx
3:1  Error: There should be at least one empty line between import groups  import/order
3:1  Error: `next/font/google` import should occur before import of `next/head`  import/order

다음 명령어를 실행하여, 위반된 파일을 수정할 수 있습니다.

npm run lint:fix

모든 파일이 수정되었다면, 다시 다음 명령어를 실행하여 다시 한번 검사합니다.

npm run lint

모든 파일이 잘 수정되었다면, 다음과 같은 결과가 표시됩니다.

✔ No ESLint warnings or errors

자동으로 수정이 되는 문제도 있지만, 자동으로 수정이 되지 않는 문제도 있습니다. 이런 경우, 해당 파일을 열고 직접 수정해 주시기 바랍니다.

완료

이번 블로그 포스트에서는 Next.js 프로젝트에 ESLint를 설정하는 방법에 대해서 알아보았습니다. Next.js에서 기본적으로 제공하는 ESLint 규칙만으로도 충분하지만, 이 블로그 포스트에서처럼 설정을 조절하여 사용할 수 있습니다. 여러분도 Next.js의 ESLint를 설정하여 통일된 코딩 스타일을 적용해 보시기 바랍니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.