eslint-plugin-import
서론
하나의 자바스크립트 파일 내에서 적게는 0개에서 많게는 10의 단위의 모듈 들을 호출할 때가 있습니다. 크게 네 가지 정도 생각나는데요, Node.js에 내장되어있는 라이브러리, 외부에서 가져온 모듈, 내부에서 절대 경로로 가져온 모듈, 내부에서 상대 경로로 가저온 모듈이 될 것 같아요.
네 가지로 분류한 모듈 들이 많이 놓여져 있을 때에는 간혹 혼란 스러웠던 적이 있었어요. named module을 추가하거나 삭제할 때 그 모듈이 어디 있는 지 찾는 것도 번거로웠고, 무수히 긴 상대 경로(예를 들어 ’../../../../../../some.js’)도 그렇구요. 일반적으로 자바스크립트 파일 제일 위에 있는 import를 일관성 있고 보기에도 정돈되어 보이는 게 있으면 좋겠다고 생각했습니다.
그래서 발견한 eslint plugin import 모듈을 소개하려 합니다!
eslint-plugin-import란?
공식문서에 설명하기로, ES6+ import/export 문법의 린팅을 지원하고, 파일 경로와 import 이름의 오타를 예방합니다. 이러한 것들을 마크업 에디터에 표시해주는 모듈이라고 합니다.
설치
설치는 아래와 같이 cli를 통해 명령어를 입력하여 설치합니다. 보통은 개발 단계에서만 린트를 사용하기 때문에 devDependency에 설치합니다.
npm install eslint-plugin-import --save-dev
// or
yarn add -D eslint-plugin-import.eslintrc에 설정
eslintrc 파일에서는 아래와 같이 plugins에 설정을 합니다. 기호에 맞게 extends에 eslint-plugin-import에서 추천하는 규칙을 적용할 수 있고, recommended에 조합하여 설정할 수도 있습니다.
추천하는 규칙은 깃허브에서 확인 가능합니다.
// 플러그인에 eslint-plugin-import를 설정
plugins: [
'import',
]
// 기호에 맞춰 eslint-plugin-import에서 추천하는 규칙을 적용한다.
extends: [
"plugin:import/recommended",
// 대안으로, 'recommended'는 아래의 두 개의 설정과 조합할 수 있습니다.
"plugin:import/errors",
"plugin:import/warnings",
]타입스크립트를 사용한다면..
@typscript-eslint/parser와 eslint-import-resolver-typescript 라이브러리를 설치합니다.
yarn add -D @typescript-eslint/parser eslint-import-resolver-typescript
// or
npm i --save-dev @typescript-eslint/parser eslint-import-resolver-typescript@typescript-eslint/parser는 eslintrc의 parser에 설정이 되어있어야합니다.
"parser": "@typescript-eslint/parser",규칙 설정
import 관련 많은 설정을 하지만, 이번 포스팅에서는 순서와 그룹 간 여백 설정에 대해 알아보겠습니다.
순서 및 여백 설정(import/order)
순서에 대한 설명은 공식문서에 매우 자세하게 나와있어 읽어보시는 걸 추천합니다.
groups를 통해 모듈 들을 분류하며, 동일한 레벨에 두 가지 이상을 놓고싶은 경우에는 문자열 대신 배열을 놓습니다.
pathGroups를 통해 절대 경로 별칭을 별도로 설정할 수 있으며, 설정한 별칭은 어떤 순서에 넣을지 또한 설정할 수 있습니다.
또한 newlines-between을 통해 여백을 설정 할 수 있습니다
"rules": {
"import/order": [
"error",
{
"groups": [
["builtin", "external"],
"internal",
["parent", "sibling"],
"index"
],
"newlines-between": "always",
"pathGroups": [
{
"pattern": "@/**",
"group": "internal",
"position": "after"
}
]
}
],
}