ESLint

ESLint는 JavaScript 코드의 문제를 빠르게 찾고 수정하기 위한 정적 분석 도구입니다.

이 가이드에서는 다음을 다룹니다:

• Flat Configuration을 사용하는 ESLint v9
• 레거시 구성을 사용하는 ESLint v8
• lint 작업 설정 방법 (두 버전 모두에 적용)

monorepo의 Workspace 전체에서 구성을 공유하여 패키지 전반에 걸쳐 구성이 일관되고 구성 가능하여 높은 캐시 적중률을 유지합니다.

ESLint v9 (Flat Configs)

ESLint v9의 Flat Configs를 사용하면 다음과 같은 파일 구조를 갖게 됩니다:

이 구조에는 다음이 포함됩니다:

• 모든 ESLint 구성을 보유하는 ./packages/eslint-config의 @repo/eslint-config라는 패키지
• 각각 자체 eslint.config.js가 있는 두 개의 애플리케이션
• 자체 eslint.config.js가 있는 ui 패키지

구성 패키지에 대하여

@repo/eslint-config 패키지에는 세 개의 구성 파일인 base.js, next.js, react-internal.js가 있습니다. 필요에 따라 다른 패키지에서 사용할 수 있도록 package.json에서 내보내집니다. 구성의 예는 Turborepo GitHub 저장소에서 찾을 수 있으며 npx create-turbo@latest에서 사용할 수 있습니다.

특히, next.js 및 react-internal.js 구성은 일관성을 위해 base.js 구성을 사용하며, 각각의 요구 사항에 대한 더 많은 구성으로 확장합니다. 또한 eslint-config에 대한 package.json에는 저장소에 대한 모든 ESLint 종속성이 있습니다. 이는 @repo/eslint-config를 가져오는 패키지에서 종속성을 다시 지정할 필요가 없다는 것을 의미하므로 유용합니다.

구성 패키지 사용

web 앱에서는 먼저 @repo/eslint-config를 종속성으로 추가해야 합니다.

{
  "devDependencies": {
    "@repo/eslint-config": "workspace:*"
  }
}

그런 다음 다음과 같이 구성을 가져올 수 있습니다:

import { nextJsConfig } from '@repo/eslint-config/next-js';
 
/** @type {import("eslint").Linter.Config} */
export default nextJsConfig;

또한 다음과 같이 패키지별 구성을 추가할 수 있습니다:

import { nextJsConfig } from '@repo/eslint-config/next-js';
 
/** @type {import("eslint").Linter.Config} */
export default [
  ...nextJsConfig,
  // Other configurations
];

ESLint v8 (Legacy)

ESLint v8 이하의 레거시 구성을 사용하면 다음과 같은 파일 구조를 갖게 됩니다:

@repo/eslint-config라는 패키지와 각각 자체 .eslintrc.js가 있는 두 개의 애플리케이션이 있습니다.

@repo/eslint-config 패키지

@repo/eslint-config 파일에는 두 개의 파일인 next.js와 library.js가 포함되어 있습니다. 이들은 두 가지 다른 ESLint 구성이며, 필요에 따라 다른 패키지에서 사용할 수 있습니다.

Next.js에 대한 구성은 다음과 같을 수 있습니다:

/* Custom ESLint configuration for use with Next.js apps. */
module.exports = {
  extends: [
    'eslint-config-turbo',
    'eslint-config-next',
    // ...your other ESLint configurations
  ].map(require.resolve),
  // ...your other configuration
};

package.json은 다음과 같습니다:

{
  "name": "@repo/eslint-config",
  "version": "0.0.0",
  "private": true,
  "devDependencies": {
    "eslint": "^8",
    "eslint-config-turbo": "latest",
    "eslint-config-next": "latest"
  }
}

ESLint 종속성이 모두 여기에 나열되어 있습니다. 이는 @repo/eslint-config를 가져오는 앱 내에서 종속성을 다시 지정할 필요가 없다는 것을 의미하므로 유용합니다.

@repo/eslint-config 패키지 사용 방법

web 앱에서는 먼저 @repo/eslint-config를 종속성으로 추가해야 합니다.

{
  "dependencies": {
    "@repo/eslint-config": "workspace:*"
  }
}

그런 다음 다음과 같이 구성을 가져올 수 있습니다:

module.exports = {
  root: true,
  extends: ['@repo/eslint-config/next.js'],
};

extends 배열에 @repo/eslint-config/next.js를 추가함으로써, ESLint에게 @repo/eslint-config라는 패키지를 찾고 next.js 파일을 참조하도록 지시합니다.

lint 작업 설정

ESLint를 실행하려는 각 패키지의 package.json은 다음과 같아야 합니다:

{
  "scripts": {
    "lint": "eslint ."
  }
}

스크립트가 준비되면 Turborepo 작업을 만들 수 있습니다:

{
  "tasks": {
    "lint": {}
  }
}

전역 turbo로 turbo lint를 실행하거나 루트 package.json에 스크립트를 만들 수 있습니다:

{
  "scripts": {
    "lint": "turbo run lint"
  }
}