[ESLint] import/order로 import 순서 정렬하기 (Vite + Typescript)

 

eslint에서 import/order 를 적용하기 위해서는 아래 라이브러리 설치가 필요하다.

$ npm install eslint-plugin-import --save-dev
$ npm install eslint-import-resolver-typescript --save-dev

 

 

vite 로 react프로젝트를 설치하면 (2025년 3월 `vite: 5.4.10`, `@vitejs/plugin-react: 4.3.3` 버전)

tsconfig.app.json, tsconfig.json, tsconfig.node.json 총 세개의 tsconfig 파일이 만들어 지는데,

 

이 때, tsconfig.json에서 references로 tsconfig.app.json과 tsconfig.node.json을 가지고,

include 옵션을 사용하면 오류가 발생한다.

 

나는 storybook을 사용하고 있기에 include 옵션이 꼭 필요했는데,

이는 tsconfig.app.json과 tsconfig.node.json 파일에 설정해주면 된다.

 

# tsconfig.app.json 파일
{ 
	// ...
	"include": ["src/**/*", ".storybook/**/*"]
}

 

 

 

라이브러리를 설치하고, tsconfig 파일들을 모두 설정했다면

eslint.config.js 파일을 아래와 같이 수정한다.

import js from "@eslint/js";
import eslintImport from "eslint-plugin-import";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import globals from "globals";
import tseslint from "typescript-eslint";

export default tseslint.config(
  { ignores: ["dist"] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ["**/*.{ts,tsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
      import: eslintImport,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
      "import/order": [
        "error",
        {
          groups: ["builtin", "external", ["internal", "unknown"], "parent", "sibling", "index"],
          pathGroups: [
            {
              pattern: "react",
              group: "external",
              position: "before",
            },
          ],
          alphabetize: {
            order: "asc",
            caseInsensitive: true,
          },
          "newlines-between": "always",
        },
      ],
    },
    settings: {
      "import/resolver": {
        typescript: {
          alwaysTryTypes: true,
          project: ["./tsconfig.app.json", "./tsconfig.node.json"],
        },
        node: {
          paths: ["src"],
          extensions: [".js", ".jsx", ".ts", ".tsx"],
        },
      },
    },
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.app.json", "./tsconfig.node.json"],
        sourceType: "module",
      },
    },
  },
);

 

 

여기서 중요한 부분은

 

1. rules > import/order

    : 어떤 순서로 정렬할 것인지 지정하는 설정

     : 참고 문서 (https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md)

2. settings > import/resolver

    : @src/를 모듈로 정확히 인식하도록 설정

3. languageOptions > parserOptions

    : include를 설정한 tsconfig 경로를 정확히 지정하는 것

 

이 때, settings > import/resolver 의 typescript > project와 languageOptions > parserOptions의 project 는 같아야 한다.

 

모두 설정한 후,

$ npx eslint . --fix

 

명령어를 실행하면, 모든 파일에 설정한 eslint 적용 완료!

 

import/order가 적용된 모습