ESLint 공식문서 번역 | 설정 공유하기 (Share Configurations)

요약 : 
ESLint 설정을 공유하려면 ‘공유 설정(shareable config)’을 만드세요. 공유 설정을 npm에 배포하면 다른 사람들이 이를 다운로드하여 자신의 ESLint 프로젝트에 사용할 수 있습니다. 이 페이지에서는 공유 설정을 만들고 npm에 배포하는 방법을 설명합니다.

1. 공유 설정 만들기

공유 설정은 설정 객체를 export하는 단순한 npm 패키지입니다. 먼저, 일반적으로 하듯이 Node.js 모듈을 만드세요.

모듈 이름은 다음 형식 중 하나여야 합니다:

• eslint-config-로 시작합니다(예: eslint-config-myconfig).
• npm 범위 지정 모듈이어야 합니다. 범위 모듈을 만들려면 @scope/eslint-config와 같이 모듈 이름이나 접두사를 지정하세요. (예: @scope/eslint-config 또는 @scope/eslint-config-myconfig).

모듈에서 공유 설정을 모듈의 메인 진입점 파일로 내보내세요. 기본 진입점은 index.js입니다. 예를 들어:

// index.js
module.exports = {

    globals: {
        MyGlobal: true
    },

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

};

index.js 파일은 그냥 자바스크립트이기 때문에, 이러한 설정을 파일에서 읽거나 동적으로 생성할 수 있습니다.

2. 공유 설정 배포하기

공유 설정이 준비되었다면, npm에 배포하여 다른 사람들과 공유할 수 있습니다. 다른 사람이 모듈을 쉽게 찾을 수 있도록 package.json 파일에서 eslint와 eslintconfig 키워드를 사용하는 것을 권장합니다.

ESLint에 대한 종속성을 peerDependencies 필드를 사용하여 package.json에 선언해야 합니다. 미래 호환성을 위해 종속성을 선언하는 권장 방법은 " > = " 범위 구문을 사용하여 필요한 가장 낮은 ESLint 버전을 사용하는 것입니다. 예를 들면:

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

만약 공유 설정이 플러그인에 의존한다면, 플러그인도 peerDependency로 지정해야 합니다. (플러그인은 최종 사용자의 프로젝트를 기준으로 로드되므로 최종 사용자가 필요한 플러그인을 설치해야 합니다). 그러나 공유 설정이 사용자 정의 파서나 다른 공 설 설정에ㅇ존한다,면 이한러 패키지를 package.json의 종속성으로 지정할 수 있습니다.

전역으로 모듈을 링크하여 게시하기 전에 컴퓨터에서 공유 설정을 테스트할 수도 있습니다. 다음을 입력하세요:

npm link

그런 다음 공유 설정을 사용하려는 프로젝트에서 다음과 같이 입력합니다:

npm link eslint-config-myconfig

eslint-config-myconfig를 모듈의 실제 이름으로 바꾸어야 합니다.

3. 공유 설정 사용하기

공유 설정을 사용하려면, 설정 파일의 extends 필드에 config 이름을 포함시키세요. 값으로는 모듈 이름을 사용하세요. 예를 들면:

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

또한 eslint-config-를 생략할 수도 있으며, ESLint가 자동으로 가정합니다.

{
    "extends": "myconfig"
}

ESLint CLI의 --config 플래그로 공유 설정을 사용할 수는 없습니다.

npm Scoped Modules

npm Scoped Modules는 다음과 같은 방법으로도 지원됩니다.

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

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

eslint-config를 생략할 수도 있으며 ESLint에서 자동으로 가정합니다:

{
    "extends": "@scope"
}

모듈 이름도 임의로 설정할 수 있습니다. 예를 들어, @scope/eslint-config-myconfig라는 이름의 패키지가 있는 경우 다음과 같이 설정을 지정할 수 있습니다:

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

eslint-config를 생략하여 구성을 다음과 같이 지정할 수도 있습니다:

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

공유 설정 재정의

공유 설정에서 설정을 직접 .eslintrc 파일에 추가하여 재정의할 수 있습니다.

4. 다중 설정 공유

같은 npm 패키지에서 여러 개의 설정을 공유할 수 있습니다. ‘공유 설정 생성(Creating a Shareable Config)’ 섹션에서 설명된 방법을 따라 패키지의 기본 설정을 지정할 수 있습니다. npm 패키지에 새 파일을 추가한 다음 ESLint 설정에서 참조하여 공유 설정을 추가로 지정할 수 있습니다.

예를 들어, npm 패키지의 루트에 my-special-config.js라는 파일을 만들고 다음과 같은 설정을 내보낼 수 있습니다:

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

그런 다음 패키지 이름 eslint-config-myconfig를 사용한다고 가정하면 다음을 통해 추가 설정에 액세스할 수 있습니다:

{
    "extends": "myconfig/my-special-config"
}

npm scoped modules을 사용할 때 eslint-config 네임스페이스를 생략할 수는 없습니다. 위에서 설명한 대로 이렇게 하면 해결 오류가 발생합니다. 패키지 이름이 @scope/eslint-config인 경우, 추가 설정은 다음과 같이 액세스할 수 있습니다:

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

참고: 파일 이름에서 .js를 생략할 수 있습니다.

중요: 오류를 방지하기 위해 항상 플러그인에 대한 기본 설정을 포함할 것을 강력하게 권장합니다.

5. 로컬 설정 파일 해결

서로 확장할 수 있는 여러 개의 설정을 만들고, 서로 다른 디렉터리에 둘 필요가 있는 경우 이러한 시나리오를 처리하는 단일 공유 설정을 만들 수 있습닏.

예를 들어, eslint-config-myconfig 패키지를 사용하고 패키지가 다음과 같이 구성된 경우를 가정해 봅시다.

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

index.js 파일에서 다음과 같은 작업을 수행할 수 있습니다:

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'
};

완전히 다른 디렉토리에 있더라도, 확장할 구성 파일의 전체 패키지 경로를 사용해야 함을 알 수 있습니다.

이제 /lib/ci/backend.js 안에는 다음이 포함되어 있습니다.

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

마지막 파일에서도 다시 한번, 설정을 올바르게 해석하려면 전체 패키지 경로를 포함해야 함을 알 수 있습니다.

참고 : https://eslint.org/docs/latest/extend/shareable-configs