안녕하세요. J4J입니다.
이번 포스팅은 Import에도 ESLint 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다.
들어가기에 앞서 해당 글은 ESLint 기본 설정 방법에 대한 설명은 따로 없습니다.
ESLint 설정이 되어 있지 않으신 분들은 [React] 타입 스크립트 환경에서 ESLint / Prettier 설정하기를 참고해서 기본 설정을 해주시면 됩니다.
설정 방법
[ 1. 패키지 설치 ]
$ npm install -D eslint-plugin-import
[ 2. eslint 설정 파일 수정 (.eslintrc) ]
{
"plugins": [
"import"
],
"rules": {
"import/order": [
"error", {}
]
}
}
위와 같이만 설정해도 default 값으로 매핑되는 설정 값들의 순서에 맞게 import가 자동으로 정렬이 됩니다.
조금 더 원하는 상황에 맞게 커스텀할 수 있도록 부가적인 설정들을 확인해보겠습니다.
groups
groups는 import 해오는 모듈들을 그룹 단위로 묶어서 정렬될 수 있도록 도와줍니다.
groups의 종류는 다음과 같이 있습니다.
- builtin → builin 모듈
- external → external 모듈
- internal → internal 모듈
- parent → 상위 경로에 있는 모듈
- sibling → 동일 경로에 있는 모듈
- index → 현재 경로 index 파일
- object → object import
- type → type import
또한 설정 방법은 다음과 같고 배열의 인덱스가 작을수록 import가 더 높은 곳에 위치합니다.
{
"rules": {
"import/order": [
"error", {
"groups": [
"builtin",
"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';
추가적으로 groups의 설정은 위와 같이 순서대로 정렬할 수도 있지만 여러 group들을 동일 레벨로 설정할 수 있습니다.
설정하는 방법은 다음과 같이 배열로 묶어주면 됩니다.
{
"rules": {
"import/order": [
"error", {
"groups": [
"builtin",
"external",
"internal",
["parent", "type"],
"sibling",
"index",
"object"
],
}
]
}
}
그러면 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
pathGroups는 경로를 이용해 import 순서를 정할 수 있도록 도와줍니다.
사용되는 속성 값들은 다음과 같이 있습니다.
- pattern → 경로 설정 패턴
- patternOptions → (패턴의 옵션을 설정하는 것으로 보이나 명확한 용도 확인 불가)
- group → 설정한 경로 패턴이 상대적으로 위치할 group
- position → group을 기반으로 앞에 있을지 뒤에 있을지 설정, [before, after]
우선 pathGroups가 가장 유용하게 사용될 것이라고 생각하는 부분은 절대 경로를 위해 alias를 설정한 부분입니다.
groups의 순서를 이것저것 테스트해보신분들은 느끼셨을 겁니다.
절대 경로를 위해 alias를 설정한 것은 groups의 순서와 상관없이 항상 마지막에 위치해있습니다.
pathGroups는 위와 같은 alias의 문제점을 해결해줄 수 있습니다.
예를 들어 다음과 같이 pathGroups를 설정해보겠습니다.
{
"rules": {
"import/order": [
"error", {
"groups": [
"builtin",
"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
pathGroupsExcludedImportTypes는 pathGroups 설정을 했음에도 불구하고 적용되지 않는 타입들을 예외 처리하여 적용될 수 있도록 도와줍니다.
대표적인 예시로 react로 선언된 것을 최상단에 두기 위해 다음과 같이 설정했지만 적용되지 않는 것을 확인할 수 있습니다.
{
"rules": {
"import/order": [
"error", {
"groups": [
"builtin",
"external",
"internal",
"parent",
"sibling",
"index",
"object",
"type"
],
"pathGroups": [
{
"pattern": "react",
"group": "builtin",
"position": "before"
}
],
}
]
}
}
이럴 때 다음과 같이 pathGroupsExcludedImportTypes를 설정해주시면 됩니다.
{
"rules": {
"import/order": [
"error", {
"groups": [
"builtin",
"external",
"internal",
"parent",
"sibling",
"index",
"object",
"type"
],
"pathGroups": [
{
"pattern": "react",
"group": "builtin",
"position": "before"
}
],
"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';
추가로 eslint-plugin-import github을 확인해보면 위와 같이 pathGroups 컨트롤이 필요한 것은 보통 external group에 해당되는 것이라고 하니 참고하시면 될 것 같습니다.
newlines-between
newlines-between은 group들 사이마다 개행이 이루어질 수 있도록 도와줍니다.
선택할 수 있는 속성 값은 다음과 같이 있습니다.
- ignore → 개행 규칙 적용하지 않음
- always → group들 사이마다 개행 적용 (group 내부에서 개행 적용 불가)
- always-and-inside-groups → group들 사이마다 개행 적용 및 group 내부에서 개행 적용 가능 (group 내부 개행은 정렬되지 않음)
- never → group들 사이마다 개행이 없도록 적용
이해를 돕기 위해 예시를 하나씩 보여드리겠습니다.
[ 1. 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';
[ 2. always ]
always를 적용하면 group들 사이마다 개행이 적용되며 group 내부에서는 개행이 되지 않는 것을 확인할 수 있습니다.
// 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';
[ 3. always-and-inside-groups ]
always-and-inside-groups를 적용하면 always와 같이 group들 사이마다 개행이 이루어지고 또한 group 내부에서도 다음과 같이 개행을 의도적으로 할 수 있습니다.
// 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';
[ 4. never ]
마지막으로 never로 설정하면 group들 사이마다 개행을 할 수 없게 됩니다.
참고로 설정 문제로 인해 저만 그런지 모르겠지만 개행이 이루어져 있을 때 에러는 발생하지만 포매팅이 자동으로 이루어지며 개행이 없어지지는 않았습니다.
// 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
alphabetize는 group 내부에서 알파벳 순서로 정렬될 수 있도록 도와줍니다.
사용되는 속성 값은 다음과 같이 있습니다.
- order → 순서 설정 (오름차순 or 내림차순), [ignore, asc, desc]
- caseInsensitive → 대소문자 순서 설정 (true : 대문자 우선, false : 소문자 우선)
내림차순이며 대문자 우선으로 적용하고자 하면 다음과 같이 설정할 수 있습니다.
{
"rules": {
"import/order": [
"error", {
"groups": [
"builtin",
"external",
"internal",
"parent",
"sibling",
"index",
"object",
"type"
],
"alphabetize": {
"order": "desc",
"caseInsensitive": true
}
}
]
}
}
그러면 다음과 같이 import가 정렬되는 것을 확인할 수 있습니다. (대문자, 소문자 우선 구분은 Baz와 Bar로 확인)
// 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
warnOnUnassignedImports는 할당하지 않는 import들에 warning을 띄우는 것으로 보이는데... 아무리 테스트해봐도 명확한 기능을 확인할 수 없었습니다.
이상으로 Import에도 ESLint 적용하는 방법에 대해 간단하게 알아보는 시간이었습니다.
읽어주셔서 감사합니다.
'SPA > React' 카테고리의 다른 글
| [React] 뒤로 가기 막기 (0) | 2022.10.10 |
|---|---|
| [React] react-router 사용하기 (1) | 2022.08.22 |
| [React] react-hook-form register 등록 방법 커스텀하기 (0) | 2022.08.16 |
| [React] 사용해본 yup 조건절 정리 (0) | 2022.08.11 |
| [React] react-hook-form과 yup으로 동적 배열 유효성 검증하기 (1) | 2022.08.09 |
댓글