eslint 를 이용한 Import Order 모듈화

우리는 종종 프로젝트 협업을 하다보면 무수한 import 구문들을 만나게 된다.

사소하지만 종종 import 구문 순서가 맞지 않아서 개발자들과 협업할때 충돌나는 이슈가 종종있다.

import 구문 순서를 정해 놓으면 어떤 것이 어디서 불러와졌는지 알기 쉬운 코드가 된다.

코딩컨벤션으로 정하고 주석을 달아 구분하는 방법으로 코딩을 하다가 좀 더 쉬운 방식이 떠올라 작업하게 되었다.

그건 eslint와 설정코드들을 활용해 저장시 자동으로 import코드들을 맞춰주는것이다.

먼저 eslintrc.json 코드는 다음과 같이 추가했습니다.

{
  ...,
  "extends": [
    "next",
    "next/core-web-vitals",
    "plugin:import/recommended", <- extends 에 import plugin 추가
    "plugin:import/typescript",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "import"], <- plugins에 import추가
  "rules": {
    "react-hooks/exhaustive-deps": "off",
    "@next/next/no-img-element": "off",
    "import/no-anonymous-default-export": "off",
    "react/no-unescaped-entities": 0,
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ],
    //TODO import/order 코드
    "import/order": [
      "warn", <- import 정렬이 틀릴시 에러가 아닌 경고로 처리
      {
        "groups": [ <- 그룹 순서
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index",
          "unknown"
        ],
        "newlines-between": "always", <- 정렬 후 그룹별로 한칸씩 뛰게 처리 
        "pathGroups": [
          {
            "pattern": "react*",
            "group": "builtin",
            "position": "before"
          },
          {
            "pattern": "nprogress",
            "group": "builtin",
            "position": "after"
          },
          {
            "pattern": "next/*|next/app|next/router",
            "group": "external",
            "position": "after"
          },
          {
            "pattern": "recoil*",
            "group": "external",
            "position": "after"
          },
          //TODO src관련해서 /*,/**를 사용해 적용해 봤지만 다음과 같이 해야 모든 파일들이 적용되었습니다.
          {
            "pattern": "src/**|src/@core/**|src/configs/**|src/layouts/**|src/components/**|src/context/**",
            "group": "internal",
            "position": "before"
          },
          {
            "pattern": "react-icons/fa|@emotion/react|@emotion/cache",
            "group": "sibling",
            "position": "before"
          },
          {
            "pattern": "@mui/**|mui/material/**",
            "group": "unknown",
            "position": "before"
          },
          {
            "pattern": "@testing-library/*",
            "group": "unknown",
            "position": "before"
          },
          //TODO 패턴에 포함되지 않은 모든 파일이지만 간혹 속하지않는 import들 종종있습니다.
          {
            "pattern": "*",
            "group": "unknown",
            "position": "after"
          }
        ],
        "pathGroupsExcludedImportTypes": [],
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

다음 저장시 자동으로 line이 바뀌게 하려면 prettier에서 설정값을 추가해야된다.

.prettierrc.js

module.exports = {
  arrowParens: 'avoid',
  bracketSpacing: true,
  htmlWhitespaceSensitivity: 'css',
  insertPragma: false,
  bracketSameLine: false,
  jsxSingleQuote: true,
  singleQuote: true,
  printWidth: 80,
  proseWrap: 'preserve',
  quoteProps: 'as-needed',
  requirePragma: false,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  useTabs: false,
  endOfLine: 'auto', <- 코드를 추가하여 저장시 line이 변경
};

그후 setting.json도 추가해준다.

setting.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "prettier.requireConfig": true
}

그후 패키지.json에

 "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
 "format": "prettier --write \\"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\\"",

코드를 삽입하고 npm run lint를 실행하면 무수한 버그들이 쏟아집니다.

기존에 단순 import만 하던 코드들이 lint가 잡아주면서 올바르게 사용하라고 각종 에러와 경고를 주는 데요 모든 에러들을 수정하면

짠

다음과 같이 린트에서 작성한것처럼 정렬되어 나타나게됩니다.

300개가 넘는 파일들의 import가 변경되었습니다.

우리는 종종 프로젝트 협업을 하다보면 무수한 import 구문들을 만나게 된다.

사소하지만 종종 import 구문 순서가 맞지 않아서 개발자들과 협업할때 충돌나는 이슈가 종종있다.

import 구문 순서를 정해 놓으면 어떤 것이 어디서 불러와졌는지 알기 쉬운 코드가 된다.

코딩컨벤션으로 정하고 주석을 달아 구분하는 방법으로 코딩을 하다가 좀 더 쉬운 방식이 떠올라 작업하게 되었다.

그건 eslint와 설정코드들을 활용해 저장시 자동으로 import코드들을 맞춰주는것이다.

먼저 eslintrc.json 코드는 다음과 같이 추가했습니다.

{
  ...,
  "extends": [
    "next",
    "next/core-web-vitals",
    "plugin:import/recommended", <- extends 에 import plugin 추가
    "plugin:import/typescript",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint", "import"], <- plugins에 import추가
  "rules": {
    "react-hooks/exhaustive-deps": "off",
    "@next/next/no-img-element": "off",
    "import/no-anonymous-default-export": "off",
    "react/no-unescaped-entities": 0,
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ],
    //TODO import/order 코드
    "import/order": [
      "warn", <- import 정렬이 틀릴시 에러가 아닌 경고로 처리
      {
        "groups": [ <- 그룹 순서
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index",
          "unknown"
        ],
        "newlines-between": "always", <- 정렬 후 그룹별로 한칸씩 뛰게 처리 
        "pathGroups": [
          {
            "pattern": "react*",
            "group": "builtin",
            "position": "before"
          },
          {
            "pattern": "nprogress",
            "group": "builtin",
            "position": "after"
          },
          {
            "pattern": "next/*|next/app|next/router",
            "group": "external",
            "position": "after"
          },
          {
            "pattern": "recoil*",
            "group": "external",
            "position": "after"
          },
          //TODO src관련해서 /*,/**를 사용해 적용해 봤지만 다음과 같이 해야 모든 파일들이 적용되었습니다.
          {
            "pattern": "src/**|src/@core/**|src/configs/**|src/layouts/**|src/components/**|src/context/**",
            "group": "internal",
            "position": "before"
          },
          {
            "pattern": "react-icons/fa|@emotion/react|@emotion/cache",
            "group": "sibling",
            "position": "before"
          },
          {
            "pattern": "@mui/**|mui/material/**",
            "group": "unknown",
            "position": "before"
          },
          {
            "pattern": "@testing-library/*",
            "group": "unknown",
            "position": "before"
          },
          //TODO 패턴에 포함되지 않은 모든 파일이지만 간혹 속하지않는 import들 종종있습니다.
          {
            "pattern": "*",
            "group": "unknown",
            "position": "after"
          }
        ],
        "pathGroupsExcludedImportTypes": [],
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

다음 저장시 자동으로 line이 바뀌게 하려면 prettier에서 설정값을 추가해야된다.

.prettierrc.js

module.exports = {
  arrowParens: 'avoid',
  bracketSpacing: true,
  htmlWhitespaceSensitivity: 'css',
  insertPragma: false,
  bracketSameLine: false,
  jsxSingleQuote: true,
  singleQuote: true,
  printWidth: 80,
  proseWrap: 'preserve',
  quoteProps: 'as-needed',
  requirePragma: false,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  useTabs: false,
  endOfLine: 'auto', <- 코드를 추가하여 저장시 line이 변경
};

그후 setting.json도 추가해준다.

setting.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "prettier.requireConfig": true
}

그후 패키지.json에

 "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
 "format": "prettier --write \\"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\\"",

코드를 삽입하고 npm run lint를 실행하면 무수한 버그들이 쏟아집니다.

기존에 단순 import만 하던 코드들이 lint가 잡아주면서 올바르게 사용하라고 각종 에러와 경고를 주는 데요 모든 에러들을 수정하면

짠

다음과 같이 린트에서 작성한것처럼 정렬되어 나타나게됩니다.

300개가 넘는 파일들의 import가 변경되었습니다.