eslint import/order 적용 방법

목차

0. 적용 결과

1. 적용 방법

2. config, package.json 코드 예시

---

0. 적용 결과

적용 전

import Image from "next/image";
import styles from "./PostItem.module.scss";
import EditPostButton from "@/components/buttons/EditPostButton/EditPostButton";
import { sanitize } from "dompurify";
import DeletePostButton from "@/components/buttons/DeletePostButton/DeletePostButton";
import Comment from "../Comment/Comment";
import { checkSameAuthor } from "@/utils/sessionCheck/checkSameAuthor";
import Link from "next/link";
import { useEffect, useState } from "react";
import usePostItem, { UsePostItemInterface } from "@/hooks/usePostItem";
import Spin from "@/components/loadings/Spin/Spin";
import GoPostCommentButton from "@/components/buttons/GoPostCommentButton/GoPostCommentButton";
import LikePostButton from "@/components/buttons/LikePostButton/LikePostButton";
import { getDateForm } from "@/utils/getDateForm";

적용 후

import Image from 'next/image';
import { sanitize } from 'isomorphic-dompurify';
import Link from 'next/link';
import { useEffect, useState } from 'react';

import { checkSameAuthor } from '@/utils/sessionCheck/checkSameAuthor';
import usePostItem, { UsePostItemInterface } from '@/hooks/usePostItem';
import { getDateForm } from '@/utils/getDateForm';

import styles from './PostItem.module.scss';
import EditPostButton from '@/components/buttons/EditPostButton/EditPostButton';
import DeletePostButton from '@/components/buttons/DeletePostButton/DeletePostButton';
import Comment from '../Comment/Comment';
import Spin from '@/components/loadings/Spin/Spin';
import GoPostCommentButton from '@/components/buttons/GoPostCommentButton/GoPostCommentButton';
import LikePostButton from '@/components/buttons/LikePostButton/LikePostButton';

---

1. 적용 방법

eslint 설치

Next.js는 프로젝트를 생성할 때 eslint 를 패키지를 설정할지 여부를 물어본다.

yes로 답했다면 eslint가 이미 내장되어 있다.

 

eslint-plugin-import 설치

npm i eslint-plugin-import

 

 

아래는 반드시 필요한지, 모두에게 그런 것인지는 모르겠다.

lint fix를 실행해보면 다음과 같은 에러가 발생한다.

ESLint couldn't find the config "airbnb" to extend from.

"airbnb" 설정을 해주어야한다는 것 같은데, 아무튼 아래를 설치를 해주어야 작동이 되었다.

 

npm i eslint-config-airbnb

 

루트 디렉토리의 .eslintrc.json 파일에 규칙 추가

(없다면 https://github.com/sendbird/sendbird-uikit-react/blob/main/.eslintrc.json 이런 큰 회사에서 쓰는 lint 규칙 가져다 쓰면 됩니다.)

// .eslintrc.json
{
  // ...
  "plugins": ["@typescript-eslint", "import"],
}

 

규칙을 커스텀 하려면

https://jforj.tistory.com/282

 

package.json 파일의 scripts에 lint 를 실행할 명령어 추가 

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --cache .",
    "lint:fix": "next lint --cache --fix"
  },

 

npm run lint

이렇게 import/order에 위배되는 라인이 발견되면

위와 같이 Error 를 띄워준다.

 

npm run lint:fix

Error가 되는 부분이 수정이 가능하다면 수정을 한다.

---

2. config, package.json 코드 예시

// .eslintrc.json
{
 //... 
 "extends": [
    "airbnb",
    "airbnb/hooks",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "eslint-config-prettier",
    "next/core-web-vitals",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "import"],
  //... 
}

// package.json
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.7.5",
    "eslint": "8.48.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-next": "13.4.19",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-prettier": "^5.0.1",
  },