ESLint - import/order

import/order

• require() / import 문의 순서 컨벤션을 정하고, 강제화함
• --fix 명령어를 사용하여 컨벤션에 맞지 않는 코드를 한 번에 수정할 수 있음
• Options
  • groups
  • pathGroups
  • pathGroupsExcludedImportTypes
  • newlines-between

groups

• import되는 순서를 정의함
  • 가능한 그룹 문자열
    • buitlin : Node's builtin modules
    • external : external modules (외부 라이브러리)
    • internal : internal modules (webpack 등에 의해 매핑한 절대 경로
    • parent : modules in parent path (상위 경로에 있는 모듈)
    • sibling: modules in sibling path (동일 경로에 있는 모듈)
    • index : current directoy (현재 경로 indexx 파일)
    • object: object impoort
    • type : type import
  • 그룹 내 각 요소의 순서와 동일하게 정의함
    • 배열의 인덱스가 작을수록 import 문이 더 높은 곳에 위치함
  • 생략된 문자열은 마지막 요소와 함께 그룹화됨
  • 기본값 : ["builtin", "external", "parent", "sibling", "index"]

// .eslintrc
{
  "import/order": [
    "error", {
      "groups": [
        "bulitin",
        "external",
        "internal",
        "parent",
        "sibling",
        "index",
        "object",
        "type"
        ]
      }
    ]
  }

• 위와 같이 설정하면, 다음과 같이 import 순서들이 정렬됨

// builtin
import fs from 'fs';
import path from 'path';
// external
import styled from 'styled-components';
import _ from 'lodash';
import * as React from 'react';
// parent
import Home from '../pages/home';
// sibling
import Baz from './bar/baz';
import Ming from './ming';
import Bar from './bar';
// index
import importOrder from './';
// type
import type { FooProps } from '../foo';
// alias
import foo from '@/foo';

• 그룹 내 요소들을 배열로 묶어서 동일 레벨로 설정하여 정렬할 수 있음

// .eslintrc
{
  "import/order": [
    "error", {
      "groups": [
        "bulitin",
        "external",
        "internal",
        ["parent","sibling"],
        "index",
        "object",
        "type"
        ]
      }
    ]
  }

• 위와 같이 설정하면, import 순서가 다음과 같이 변경됨

// builtin
import fs from 'fs';
import path from 'path';
// external
import styled from 'styled-components';
import _ from 'lodash';
import * as React from 'react';
// parent, type
import Home from '../pages/home';
import type { FooProps } from '../foo';
// sibling
import Baz from './bar/baz';
import Ming from './ming';
import Bar from './bar';
// index
import importOrder from './';
// alias
import foo from '@/foo';

pathGroups

• 경로를 이용해 import 순서를 정할 수 있게 설정함
• alias와 함께 사용되는 경로를 그룹화하기 위해 주로 사용됨
  • pattern : 경로 설정 패턴
  • group : 설정한 경로 패턴이 상대적으로 위치할 그룹
  • position
    • group을 기반으로 앞(before) 또는 뒤(after)에 있을 지 설정
      • 생략할 경우, 앞/뒤가 아닌 그룹과 같이 배치됨

// .eslintrc
{
  "import/order": [
    "error", {
      "groups": [
        "bulitin",
        "external",
        "internal",
        "parent",
        "sibling",
        "index",
        "object",
        "type"
      ],
      "pathGroups": [
        {
          "pattern": "@/**",
          "group": "external",
          "position": "after"
        }
      ],
    }
  ]
}

• 위와 같이 설정하면 alias에 해당하는 import 문이 external 뒤에 배치됨

// builtin
import fs from 'fs';
import path from 'path';
// external
import styled from 'styled-components';
import _ from 'lodash';
import * as React from 'react';
// alias
import foo from '@/foo';
// parent
import Home from '../pages/home';
// sibling
import Baz from './bar/baz';
import Ming from './ming';
import Bar from './bar';
// index
import importOrder from './';
// type
import type { FooProps } from '../foo';

pathGroupsExcludedImportTypes

• pathGroups 설정을 했음에도 불구하고 적용되지 않는 타입들을 예외 처리하는데 사용됨
• 예: react로 선언된 것을 최상단에 두기 위해 다음과 같이 설정했지만 적용되지 않음

// before : 적용 X
{
  "import/order": [
    "error", {
      "groups": [
        "builtin", 
        "external", 
        "internal", 
        "parent", 
        "sibling", 
        "index", 
        "object",
        "type"
      ],
      "pathGroups": [
        {
          "pattern": "react",
          "group": "builtin",
          "position": "before"
        }
      ],
    }
  ]
}


// after : 적용 O
{
  "import/order": [
    "error", {
      "groups": ...,
      "pathGroups": [
        {
          "pattern": "react",
          "group": "builtin",
          "position": "before"
        }
      ],
      "pathGroupsExcludedImportTypes": ["react"]
    }
  ]
}

• pathGroupsExcludedImportTypes에 react를 할당하면, react가 최상단으로 정렬됨

// react
import * as React from 'react';
// builtin
import fs from 'fs';
import path from 'path';
// external
import styled from 'styled-components';
import _ from 'lodash';
// parent
import Home from '../pages/home';
// sibling
import Baz from './bar/baz';
import Ming from './ming';
import Bar from './bar';
// index
import importOrder from './';
// type
import type { FooProps } from '../foo';
// alias
import foo from '@/foo';

newlines-between

• 그룹들 간의 개행을 설정함
  • ignore : 개행 규칙을 적용하지 않음
  • always : 그룹들 사이마다 개행 적용 (그룹 내부에서는 개행 X)
  • always-and-inside-groups: 그룹들 사이와 그룹 내부 모두 개행 적용
  • never : 전체 import 문 사이에 개행 없음

newlines-between : ignore

• ignore로 설정하면, 마음대로 개행하더라도 정렬이 적용되지 않음

// builtin
import fs from 'fs';
import path from 'path';
// external
import * as React from 'react';
import styled from 'styled-components';
import _ from 'lodash';

// parent
import Home from '../pages/home';
// sibling
import Baz from './bar/baz';

import Ming from './ming';

import Bar from './bar';

// index
import importOrder from './';
// type
import type { FooProps } from '../foo';

// alias
import foo from '@/foo';

newlines-between : always

• always로 설정하면, 그룹들 사이마다 개행이 적용되고 그룹 내부에서는 개행이 적용되지 않음

// builtin
import fs from 'fs';
import path from 'path';

// external
import * as React from 'react';
import styled from 'styled-components';
import _ from 'lodash';

// parent
import Home from '../pages/home';

// sibling
import Baz from './bar/baz';
import Ming from './ming';
import Bar from './bar';

// index
import importOrder from './';

// type
import type { FooProps } from '../foo';

// alias
import foo from '@/foo';

newlines-between : always-and-inside-groups

• always-and-inside-groups로 설정하면, 그룹들 사이와 그룹 내부에서 개행이 적용됨

// builtin
import fs from 'fs';

import path from 'path';

// external
import * as React from 'react';

import styled from 'styled-components';

import _ from 'lodash';

// parent
import Home from '../pages/home';

// sibling
import Baz from './bar/baz';
import Ming from './ming';
import Bar from './bar';

// index
import importOrder from './';

// type
import type { FooProps } from '../foo';

// alias
import foo from '@/foo';

newlines-between : never

• never로 설정하면, 전체 import 문 사이에 개행이 적용되지 않음

// builtin
import fs from 'fs';
import path from 'path';
// external
import * as React from 'react';
import styled from 'styled-components';
import _ from 'lodash';
// parent
import Home from '../pages/home';
// sibling
import Baz from './bar/baz';
import Ming from './ming';
import Bar from './bar';
// index
import importOrder from './';
// type
import type { FooProps } from '../foo';
// alias
import foo from '@/foo';

alphabetize

• group 내부에서 알파벳 순서로 정렬함
  • order : 정렬 순서 설정
    • asc : 오름차순
    • desc : 내림차순
    • ignre : 순서 무시
  • caseInsensitive : 대소문자 순서 설정
    • true : 대문자 우선
      • false : 대소문자 구분 없음

{
  "import/order": [
    "error", {
      "groups": [
        "builtin", 
        "external", 
        "internal", 
        "parent", 
        "sibling", 
        "index", 
        "object",
        "type"
      ],
      "alphabetize": {
        "order": "desc",
        "caseInsensitive": true
      }
    }
  ]
}

• 위와 같이 설정하면, 대문자 우선인 내림차순으로 정렬됨

// builtin
import path from 'path';
import fs from 'fs';

// external
import styled from 'styled-components';
import * as React from 'react';
import _ from 'lodash';

// parent
import Home from '../pages/home';

// sibling
import Ming from './ming';
import Baz from './Bars/baz'; // 대문자 우선이므로 먼저 정렬됨
import Bar from './bar';

// index
import importOrder from './';

// type
import type { FooProps } from '../foo';

// alias
import foo from '@/foo';

warnOnUnassignedImports

• 할당되지 않은 import문이 정렬되어 있지 않을 때 경고함
  • 기본값 : false

/* eslint import/order: ["error", {"warnOnUnassignedImports": true}] */
// Warning
import fs from 'fs';
import './styles.css';
import path from 'path';


// Pass
import fs from 'fs';
import path from 'path';
import './styles.css';

참고

• eslint-plugin-import
• Import에도 ESLint 적용하기