📒eslint-plugin-import

eslint-plugin-import 플러그인은 ESM 구문에 대한 린팅을 제공해주는 플러그인이다.

주간 다운로드 수가 3천만에 달하는 굉장히 유명한 eslint plugin이다.

npm install eslint-plugin-import --save-dev

📒Typescript 설정

eslint-plugin-import는 Typescript에서 사용하기 위해서 eslint-import-resolver-typescript 패키지가 필요하다.

npm i eslint-import-resolver-typescript --save-dev

//eslint.config.js
import tseslint from 'typescript-eslint';
import importPlugin from 'eslint-plugin-import';
import js from '@eslint/js';

export default tseslint.config([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      importPlugin.flatConfigs.recommended,
      importPlugin.flatConfigs.typescript,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    settings: {
      // import 플러그인의 resolver 기능 세팅
      "import/resolver": {
        typescript: true,
        node: true,
      },
    },
  },
]);

✅resolver

Resolver = "이 import가 실제로 어떤 파일을 가리키는지 알아내는 방법"

각 프로젝트 환경(Node, Webpack, TypeScript, Vite 등)에 맞는 resolver를 사용해서 올바르게 파일을 찾을 수 있게 해주는 시스템이다.

번들러들이 발전하고, 최신 모듈 구문 스펙들로 인해 모듈을 import 할 때 이 모듈을 어떤 방법으로 찾아야 할 지가 애매해졌다.

이전에는 Node.js 방식으로 모듈을 찾았다.(이 방식으로 모듈을 찾는 substack의 resolve 플러그인을 직접 사용했음)

하지만 Webpack은 file-loader, css-loader와 같은 로더들을 활용하거나, 별칭들을 활용하여 모듈을 import 할 수 있는 방법들과 webpack config의 externals를 활용하는 방법들을 제공했다.

이는 Node.js에서 제공해주지 않는 방법이었다.

이 때문에 resolver라는 시스템을 도입했다.

현재 버전(2.32.0)의 eslint-plugin-import 에서는 Node와 Webpack resolver를 내장으로 제공해주고 있으며, 써드파티 resolver 패키지도 사용할 수 있으며, 이걸 사용하는 것을 권장하고 있다.

eslint-plugin-import에서 사용할 수 있는 resolver들

📌resolver plugin 세팅

참고로 전통적으로 eslint-import-resolver 들의 이름은 eslint-import-resolver-foo 형식이다.

 "settings": {
   // uses 'eslint-import-resolver-foo':
   "import/resolver": "foo",
 },

resolver plugin에 옵션들도 추가로 세팅이 가능하다.

  settings: {
    'import/resolver': {
      foo: { someConfig: value }
    }
  }

📒recommended 설정

나는 보통 recommended 설정으로 시작해서 필요하거나 생각되는 규칙들을 추가하거나, 필요없어 보이는 규칙들을 off 하는 방식으로 한다.

✅recommended에 속하는 rule들

➡️default

default import 구문을 사용하여 import를 했는데 해당 모듈에 default export가 없는 경우 에러를 발생시킨다.

// math.js
export const PI = 3.14;  // named export만 있음
export const add = (a, b) => a + b;
// default export 없음!

// main.js  
import MathUtils from './math.js'; // ❌ 에러! default export가 없는데 default import 시도

//============

// math.js
export default { PI, add }; // ✅ default export 존재

// main.js
import MathUtils from './math.js'; // ✅ 정상 작동

➡️named

named import 구문을 사용했을 때, 해당 모듈에 이에 맞는 named export가 존재해야 한다.

➡️namespace

namespace import로 모듈을 import 했을 때, 참조되는 속성들이 실제로 존재하는지 확인한다.

// utils.js (여기엔 namespace 정의가 없음)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import * as Utils from './utils.js';  
//         ↑ 여기서 Utils가 "namespace object"가 됨

➡️no-unresolved

존재하지 않는 파일을 import하려고 하면 에러를 낸다.