나만의 eslint-config 만들기 (이론편)

해당 포스팅은 eslint 공식 홈페이지를 번역한 내용입니다.

공유 환경설정 (Share Configurations)

ESLint Configuration을 공유하기 위해서는, 공유 가능한 config를 만들어야 합니다.
공유 가능한 config를 NPM에 배포할 수 있으며, 다른 사용자들이 배포된 config를 다운로드하고 사용할 수 있습니다.

이 페이지는 어떻게 공유 가능한 config를 만들고 배포하는지 설명합니다.

공유 가능한 config 생성 (Creating a Shareable Config)

공유 가능한 config는 환경설정 객체를 가져오는(export) 간단한 NPM 패키지입니다.
시작하기 앞서서, 평소처럼 Node.js 모듈을 만들어봅시다.

해당 모듈의 이름은 다음 중 하나의 양식을 따라야 합니다.

• eslint-config로 시작해야 합니다. 예를 들면 eslint-config-myconfig로 작성할 수 있습니다.
• npm scpoed 모듈입니다. scoped 모듈을 생성하려면, 모듈의 이름 또는 접두사를 @scope/eslint-config로 지정합니다.
  @scope/eslint-config 혹은 @scope/eslint-config-myconfig 처럼 사용할 수 있습니다.

모듈 안에서, 공유 가능한 config에서 모듈의 메인 진입점 파일(main entry point file)을 가져옵니다. (export)
기본적으로 메인 진입점 포인트 파일은 index.js 파일입니다.

예를 들면

// index.js
module.exports = {

    globals: {
        MyGlobal: true
    },

    rules: {
        semi: [2, "always"]
    }

};

index.js 파일은 자바스크립트이기 때문에, 파일에서 이 설정들을 읽어올 수 있고 동적으로 생성할 수 있습니다.

공유 가능한 config 배포

공유 가능한 config가 준비 되었을 때, 다른 사람과 공유할 수 있게 NPM에 배포할 수 있습니다.
package.json 파일 안에 eslint, eslintconfig와 같은 keywords를 사용하는 것을 권고합니다.
다른 사용자들이 쉽게 해당 모듈을 찾을 수 있습니다.

package.json 파일 안에 peerDependencies 필드를 이용해서 ESLint 의존성을 선언할 수 있습니다.
호환성을 고려하면서 의존성을 선언할 때 추천하는 방식은 >=와 같은 범위 구문을 사용하는 것입니다.

예를 들면

{
    "peerDependencies": {
        "eslint": ">= 3"
    }
}

만약 공유 가능한 config가 어떠한 플러그인에 의존하고 있다면, 그것 또한 peerDependency로 지정해야 합니다.
(플러그인은 최종 사용자의 프로젝트에서 사용되는 것과 관련이 되어 있으므로, 최종 사용자는 필요한 플러그인을 설치해야 합니다.)

그러나, 만약 공유 가능한 config가 커스텀 parser에 의존하고 있거나 다른 공유 가능한 config에 의존하고 있다면 이러한 패키지들은 package.json 파일 안에 있는 dependencies 필드에 지정할 수 있습니다.

공유 가능한 config를 배포하기전에 컴퓨터에서 linking을 이용해서 테스트 해볼 수 있습니다.

npm link

그 다음에, 공유 가능한 config를 사용하려고 하는 프로젝트에서 명령어를 입력합니다.

npm link eslint-config-myconfig

직접 진행할 때는 eslint-config-myconfig를 모듈의 실제 이름으로 변경하세요.

공유 가능한 config 사용

공유 가능한 config를 사용할 때, 설정 파일의 extends 필드 안에 해당 config 이름을 포함해야 합니다.
모듈 이름을 작성합니다.

예를 들면

{
    "extends": "eslint-config-myconfig"
}

eslint-config를 생략할 수 있습니다.
ESLint에 의해 자동적으로 추정됩니다.

{
    "extends": "myconfig"
}

공유 가능한 config는 ESLint CLI --config 플래그와 같이 사용할 수 없습니다.

NPM Scoped Modules

NPM의 scoped 모듈 또한 여러 방식을 지원합니다.

모듈 이름을 사용할 수 있습니다.

{
    "extends": "@scope/eslint-config"
}

eslint-config를 생략할 수 있습니다.

{
    "extends": "@scope"
}

모듈의 이름은 커스터마이징할 수 있습니다.
예를 들어서 패키지의 이름이 @scope/eslint-config-myconfig라면, 아래와 같이 명시할 수 있습니다.

{
    "extends": "@scope/eslint-config-myconfig"
}

또한 eslint-config를 생략할 수 있습니다.

{
    "extends": "@scope/myconfig"
}

공유 가능한 config의 설정 오버라이딩

.eslintrc 파일을 통해서 공유 가능한 config의 설정들을 오버라이딩할 수 있습니다.

여러 config 공유

여러 config들을 하나의 NPM 패키지에서 공유할 수 있습니다.
공유 가능한 config 생성(Creating a Shareable Config) 섹션에 패키지의 기본 config가 명시되어 있습니다. NPM 패키지에 새로운 파일을 추가함으로써 추가적인 config를 명시할 수 있습니다. 그리고 추가한 config를 참조할 수 있습니다.

예를 들어서, NPM 패키지에 my-sepcial-config.js라고 불리는 파일을 생성할 수 있습니다.
그리고 해당 config도 export 할 수 있습니다.

// my-special-config.js
module.exports = {
    rules: {
        quotes: [2, "double"]
    }
};

그리고 나서, 당신이 사용하고 있는 패키지 이름이 eslint-config-myconfig라고 가정했을 때
추가적인 config를 접근할 수 있습니다.

{
    "extends": "@scope/eslint-config/my-special-config"
}

파일 이름에서 .js을 분리해서 사용할 수 있습니다.

중요!
에러를 방지하기 위해서 plugin 안에는 항상 default config를 포함하고 있는 것을 강력하게 권장합니다.

Local Config File Resolution

만약 각기 다른 디렉터리에 있는 config에 서로 확장이 가능한 config 생성이 필요하다면, 필요한 내용을 조작할 수 있는 하나의 공유 가능한 config를 만들 수 있습니다.

예를 들어서, 사용하는 패키지 이름을 eslint-config-myconfig라고 가정하고, 해당 패키지는 아래의 구조를 가지고 있습니다.

myconfig
├── index.js
└─┬ lib
  ├── defaults.js
  ├── dev.js
  ├── ci.js
  └─┬ ci
    ├── frontend.js
    ├── backend.js
    └── common.js

index.js 파일에서는 아래와 같이 config 파일을 export 할 수 있습니다.

module.exports = require('./lib/ci.js');

패키지 안에는 아래와 같은 내용을 담고 있는 /lib/defaults.js 파일이 있습니다.

module.exports = {
    rules: {
        'no-console': 1
    }
};

/lib/ci.js 파일 안에는

module.exports = require('./ci/backend');

/lib/ci/common.js 안에는

module.exports = {
    rules: {
        'no-alert': 2
    },
    extends: 'myconfig/lib/defaults'
};

config 파일의 모든 extends 키워드에 확장하고 싶은 파일의 절대경로(full package path)를 사용함으로써 확장을 할 수 있습니다.

/lib/ci/backend.js 내용

module.exports = {
    rules: {
        'no-console': 1
    },
    extends: 'myconfig/lib/ci/common'
};

/lib/ci/backend.js 파일을 보면 config를 적절하게 사용하려면 패키지의 전체 경로를 포함해야 하는 것을 다시 한 번 확인할 수 있습니다.

마무리

새로운 라이브러리 혹은 프레임워크, 언어를 배우면서 공식문서를 제대로 번역해본적이 없었는데요!
최근 ESLint 내용을 계속해서 찾아보다보니, 공식문서를 한 번 번역해보고 싶다는 생각이 들었습니다! 📖

그래서 모든 문서를 다 번역하는 것은 어렵지만, 한 페이지 정도는 빠르게 할 수 있지 않을까? 라는 생각에 도전하게 되었습니다!
그래도 다른 포스팅과 문서들을 찾아보고 공식문서를 보니 어떠한 의미로 설명되었는지 조금 더 쉽게 이해가 됐던 것 같습니다!

그래도 언제나 그렇듯.. 영어는 어려운 것 같습니다 🤦‍♂️

출처

• https://eslint.org/docs/latest/extend/shareable-configs#creating-a-shareable-config