eslint-plugin-import 한국어 번역

November 17, 2021

해당 플러그인은 ES2015+(ES6+) 가져오기(import)/내보내기(export) 구문의 린트(Lint)를 지원하고 파일 경로 및 가져오기 이름의 철자 오류 문제를 방지합니다. ES2015+ 정적 모듈 구문이 제공하는 모든 장점들이 편집기에서 표시됩니다.

만약 import 목록들 순서를 보기 좋게 그룹화 및 자동정렬 하고 싶다면 꼭 사용하기를 추천한다.

설치방법

npm install eslint-plugin-import -g

혹은 ESLint을 dev(개발) dependency(종속성) 관리하고 싶다면:

# 프로젝트의 작업 트리 내부
npm install eslint-plugin-import --save-dev

모든 규칙들은 기본적으로 해제되어있습니다. 단, 당신의 .eslintrc.(yml|json|js) 파일에서 수동으로 구성을 설정할 수 있습니다.

---
extends:
  - eslint:recommended
  - plugin:import/recommended
  # 또는, 'recommended' 는 다음 두 규칙 집합의 조합입니다:
  - plugin:import/errors
  - plugin:import/warnings

# 혹은 수동으로 설정하세요:
plugins:
  - import

rules:
  import/no-unresolved: [2, { commonjs: true, amd: true }]
  import/named: 2
  import/namespace: 2
  import/default: 2
  import/export: 2
  # 그외...

TypeScript

다음 단축키를 사용하거나 아래에 설명된 세부 설정을 사용하여 고유한 조합을 설정할 수 있습니다. @typescript-eslint/parser 가 당신의 구성에서 설치가 되어있는지 확인하세요. 불행하게도 NPM은 선택정으로 종속성을 나열 할 수 없습니다.

extends:
  - eslint:recommended
  - plugin:import/recommended
  - plugin:import/typescript # 해당 라인은 속임수입니다.

또한 Typescript resolver를 설치하고 구성해야 합니다. eslint-import-resolver-typescript.

import/order: 모듈(module) 가져오기(import) 순서(order) 규칙 적용하기

require() / import 구문을 사용하여 순서 규칙을 적용합니다. +(수정가능) [명령어 라인(command line)]에서 --fix 옵션은 보고된 문제들을 자동적으로 수정합니다.

groups 의 ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type"]로 된 설정은 다음 예제의 순서와 같습니다.

// 1. 노드 "builtin" 모듈
import fs from 'fs';
import path from 'path';
// 2. "외부(external)" 모듈
import _ from 'lodash';
import chalk from 'chalk';
// 3. "내부(internal)" modules
// (내부 경로를 다르게 처리하도록 경로 또는 웹팩을 구성한 경우)
import foo from 'src/foo';
// 4. "상위(부모, parent)" 디렉토리 모듈
import foo from '../foo';
import qux from '../../foo/qux';
// 5. 동일하거나 "형제(sibling)"  디렉토리 모듈
import bar from './bar';
import baz from './bar/baz';
// 6. "index" 현재 디렉토리
import main from './';
// 7. "object"-imports (오직 TypeScript에서만 사용 가능합니다)
import log = console.log;
// 8. "type" imports (오직 Flow 이나 TypeScript에서 사용 가능합니다)
import type { Foo } from 'foo';

할당되지 않은 import(가져오기)들은 가져오는 순서가 중요할 수 있으므로 무시됩니다. ES6 import 구문은 반드시 require() 구문 앞에 써야합니다.

틀린 경우(Fail)

import _ from "lodash";
import path from "path"; // `path` 는 `lodash` 이전에 반드시 import 해야합니다.

// -----

var _ = require("lodash");
var path = require("path"); // `path` 는 `lodash` 이전에 반드시 import 해야합니다.

// -----

var path = require("path");
import foo from "./foo"; // `import` 는 `require` 이전에 써야합니다.

맞는 경우(Pass)

import path from "path";
import _ from "lodash";

// -----

var path = require("path");
var _ = require("lodash");

// -----

//  ̀`babel-register` 가 먼저 사용해야합니다.
require("babel-register");
var path = require("path");

// -----

// `import` 는 `require` 이전에 사용해야 합니다.
import foo from "./foo";
var path = require("path");

Options

이 규칙들은 아래의 옵션들을 지원합니다:

`groups: [array]`:

어떻게 그룹을 정의하고 순서를 정하는지 알아보십다. groups은 반드시 string(문자열) 혹은 [string]이여야 합니다. 유일하게 허용되는 string은 다음과 같습니다. "builtin(내장)", "external(외부)", "internal(내부)", "unknown(알수없음)", "parent(부모)", "sibling(형제)", "index(인덱스)", "object(객체)", "type(타입)". 적용되는 순서는 그룹의 각 element와 동일합니다. 생략된 유형은 마지막 요소로 함께 그룹화됩니다.

[
  "builtin", // 내장 유형이 첫번째입니다.
  ["sibling", "parent"], // 그런 다음 형제 및 부모 유형이 옵니다. 해당 유형들은 섞일 수 있습니다
  "index", // 그런 다음 인덱스 파일
  "object",
  // 그런 다음 나머지: 내부 및 외부 유형
];

기본 값은 ["builtin", "external", "parent", "sibling", "index"] 입니다.

다음과 같이 옵션 설정을 할 수도 있습니다:

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

`pathGroups: [array of objects]`:

To be able to group by paths mostly needed with aliases pathGroups can be defined.

Properties of the objects

property	required	type	description
pattern	x	string	minimatch pattern for the paths to be in this group (will not be used for builtins or externals)
patternOptions		object	options for minimatch, default: { nocomment: true }
group	x	string	one of the allowed groups, the pathGroup will be positioned relative to this group
position		string	defines where around the group the pathGroup will be positioned, can be ‘after’ or ‘before’, if not provided pathGroup will be positioned like the group

{
  "import/order": [
    "error",
    {
      "pathGroups": [
        {
          "pattern": "~/**",
          "group": "external"
        }
      ]
    }
  ]
}

`pathGroupsExcludedImportTypes: [array]`:

This defines import types that are not handled by configured pathGroups. This is mostly needed when you want to handle path groups that look like external imports.

Example:

{
  "import/order": [
    "error",
    {
      "pathGroups": [
        {
          "pattern": "@app/**",
          "group": "external",
          "position": "after"
        }
      ],
      "pathGroupsExcludedImportTypes": ["builtin"]
    }
  ]
}

You can also use patterns(e.g., react, react-router-dom, etc).

Example:

{
  "import/order": [
    "error",
    {
      "pathGroups": [
        {
          "pattern": "react",
          "group": "builtin",
          "position": "before"
        }
      ],
      "pathGroupsExcludedImportTypes": ["react"]
    }
  ]
}

The default value is ["builtin", "external"].

`newlines-between: [ignore|always|always-and-inside-groups|never]`:

Enforces or forbids new lines between import groups:

If set to ignore, no errors related to new lines between import groups will be reported (default).
If set to always, at least one new line between each group will be enforced, and new lines inside a group will be forbidden. To prevent multiple lines between imports, core no-multiple-empty-lines rule can be used.
If set to always-and-inside-groups, it will act like always except newlines are allowed inside import groups.
If set to never, no new lines are allowed in the entire import section.

With the default group setting, the following will be invalid:

/* eslint import/order: ["error", {"newlines-between": "always"}] */
import fs from "fs";
import path from "path";
import index from "./";
import sibling from "./foo";

/* eslint import/order: ["error", {"newlines-between": "always-and-inside-groups"}] */
import fs from "fs";

import path from "path";
import index from "./";
import sibling from "./foo";

/* eslint import/order: ["error", {"newlines-between": "never"}] */
import fs from "fs";
import path from "path";

import index from "./";

import sibling from "./foo";

while those will be valid:

/* eslint import/order: ["error", {"newlines-between": "always"}] */
import fs from "fs";
import path from "path";

import index from "./";

import sibling from "./foo";

/* eslint import/order: ["error", {"newlines-between": "always-and-inside-groups"}] */
import fs from "fs";

import path from "path";

import index from "./";

import sibling from "./foo";

/* eslint import/order: ["error", {"newlines-between": "never"}] */
import fs from "fs";
import path from "path";
import index from "./";
import sibling from "./foo";

`alphabetize: {order: asc|desc|ignore, caseInsensitive: true|false}`:

Sort the order within each group in alphabetical manner based on import path:

order: use asc to sort in ascending order, and desc to sort in descending order (default: ignore).
caseInsensitive: use true to ignore case, and false to consider case (default: false).

Example setting:

alphabetize: {
  order: 'asc', /* sort in ascending order. Options: ['ignore', 'asc', 'desc'] */
  caseInsensitive: true /* ignore case. Options: [true, false] */
}

This will fail the rule check:

/* eslint import/order: ["error", {"alphabetize": {"order": "asc", "caseInsensitive": true}}] */
import React, { PureComponent } from "react";
import aTypes from "prop-types";
import { compose, apply } from "xcompose";
import * as classnames from "classnames";
import blist from "BList";

While this will pass:

/* eslint import/order: ["error", {"alphabetize": {"order": "asc", "caseInsensitive": true}}] */
import blist from "BList";
import * as classnames from "classnames";
import aTypes from "prop-types";
import React, { PureComponent } from "react";
import { compose, apply } from "xcompose";

`warnOnUnassignedImports: true|false`:

default: false

Warns when unassigned imports are out of order. These warning will not be fixed with --fix because unassigned imports are used for side-effects and changing the import of order of modules with side effects can not be done automatically in a way that is safe.

This will fail the rule check:

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

While this will pass:

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

import/external-module-folders setting
import/internal-regex setting

개인 적용예시

`.eslintrc.js` 설정 예시

// .eslintrc.js
module.exports = {
  extends: ["next", "prettier"],
  rules: {
    "import/order": [
      "error",
      {
        groups: ["builtin", "external", "parent", "sibling", "index", "object"],
        pathGroups: [
          {
            pattern: "~/**",
            group: "external",
            position: "before",
          },
          { pattern: "@*", group: "external", position: "after" },
          { pattern: "@*/**", group: "external", position: "after" },
        ],
        pathGroupsExcludedImportTypes: ["react"],
        "newlines-between": "always",
        alphabetize: {
          order: "asc",
          caseInsensitive: true,
        },
      },
    ],
  },
};

파일 적용 후

// 적용 후
import React from "react";
import { connect } from "react-redux";

import CustomerModel from "@Components/Api/Customer/Models/CustomerModel";
import ErrorsModel from "@Components/Api/Error/Model/ErrorsModel";
import { trackException } from "@Components/ApplicationInsights";
import CustomerNavigation from "@Components/Customer/Components/CustomerNavigation/CustomerNavigation";
import { getGlobalDYCampaignChoiceResponse } from "@Components/DY/Api/utils";
import ApiDownExceptionModel from "@Components/ErrorTemplates/ApiDownExceptionModel";
import PageNotFound from "@Components/ErrorTemplates/PageNotFound";
import Layout from "@Components/Layout/Layout";
import MetaFormatter from "@Components/Meta/MetaFormatter";
import Service from "@Components/Service/Service";
import Topic from "@Components/Topic/Topic";
import TopicApi from "@Components/Topic/TopicApi";
import TopicModel from "@Components/Topic/TopicModel";
import { getDYChoiceResponseForTopic } from "@Components/Topic/TopicUtils";
import ApiStatus from "@Enum/ApiStatus";
import CustomerStatus from "@Enum/CustomerStatus";
import PageContextType from "@Enum/PageContextType";
import PageType from "@Enum/Pagetype";

import TopicPageInterface from "../../pageInterfaces/TopicPageInterface";
import { getServerSideProps as MainGetServerSideProps } from "../../src/MainPage";
import { wrapper } from "../../src/store/Store";

요약

1.
자세한 설정은 공식문서를 참조하자
3.

참고 영상

Import eslint plugin (My eslint config part 4)

참조 문서 및 사이트

상단으로 푸샤 깃허브 이동

Twitter Facebook LinkedIn

eslint-plugin-import 한국어 번역

설치방법

TypeScript

import/order: 모듈(module) 가져오기(import) 순서(order) 규칙 적용하기

틀린 경우(Fail)

맞는 경우(Pass)

Options

`groups: [array]`:

`pathGroups: [array of objects]`:

`pathGroupsExcludedImportTypes: [array]`:

`newlines-between: [ignore|always|always-and-inside-groups|never]`:

`alphabetize: {order: asc|desc|ignore, caseInsensitive: true|false}`:

`warnOnUnassignedImports: true|false`:

개인 적용예시

`.eslintrc.js` 설정 예시

파일 적용 후

요약

요약

참고 영상

참조 문서 및 사이트

공유하기

댓글남기기

참고

useEffect와 useState state 업데이트 에러

useRef .current null Error

Webstorm 튜토리얼

구글 태그 매니저(GTM)

설치방법

TypeScript

import/order: 모듈(module) 가져오기(import) 순서(order) 규칙 적용하기

틀린 경우(Fail)

맞는 경우(Pass)

Options

groups: [array]:

pathGroups: [array of objects]:

pathGroupsExcludedImportTypes: [array]:

newlines-between: [ignore|always|always-and-inside-groups|never]:

alphabetize: {order: asc|desc|ignore, caseInsensitive: true|false}:

warnOnUnassignedImports: true|false:

Related

개인 적용예시

.eslintrc.js 설정 예시

파일 적용 후

요약

요약

참고 영상

참조 문서 및 사이트

공유하기

댓글남기기

참고

useEffect와 useState state 업데이트 에러

useRef .current null Error

Webstorm 튜토리얼

구글 태그 매니저(GTM)

`groups: [array]`:

`pathGroups: [array of objects]`:

`pathGroupsExcludedImportTypes: [array]`:

`newlines-between: [ignore|always|always-and-inside-groups|never]`:

`alphabetize: {order: asc|desc|ignore, caseInsensitive: true|false}`:

`warnOnUnassignedImports: true|false`:

`.eslintrc.js` 설정 예시