🛡️ ESLint

이 프로젝트에서는 ESLint 를 사용하여 코드 품질을 유지하고, 일관된 스타일을 적용합니다. ESLint 는 JavaScript 및 TypeScript 코드에서 잠재적인 오류를 찾아내고, 코드 스타일을 검사하는 도구로, 협업 시 코드 스타일의 일관성을 유지하는 데 큰 도움이 됩니다.

실행 방법

명령어

ESLint 검사는 lint CLI를 사용하여 수행합니다. 다만, 명령어를 실행하는 위치에 따라 실행 방법이 달라집니다.

pnpm run lint

프로젝트 루트에서 실행할 경우

루트 package.json에 정의된 lint 명령어는 turbo task 를 실행하도록 설정되어 있습니다. 즉, 루트 디렉토리에서 pnpm run lint 명령어를 실행하면, Turbo가 모든 워크스페이스에 대해 ESLint 검사를 병렬로 수행합니다.

{
  "scripts": {
    "lint": "turbo run lint"
    // ... 다른 스크립트들
  }
}

개별 워크스페이스에서 실행할 경우

각 워크스페이스별 package.json 파일에도 모두 lint 스크립트가 정의되어 있으므로, 이를 직접 실행할 수도 있습니다. 다만 이 경우, turbo task 를 사용하지 않고, 해당 워크스페이스에만 ESLint 검사를 수행하게 됩니다. 즉, turbo 에서 제공하는 병렬 실행 및 캐싱 기능을 활용하지 않고 직접 ESLint 검사를 수행하게 됩니다.

{
  "scripts": {
    "lint": "next lint --max-warnings 0"
    // ... 다른 스크립트들
  }
}

Turbo Task

앞서 언급한 대로, 프로젝트 루트 디렉토리에서 pnpm run lint 명령어를 실행하면 turbo task 로 정의된 lint 작업이 실행됩니다. lint 작업은 프로젝트 루트 디렉토리에 있는 turbo.json 파일에 다음과 같이 정의되어 있습니다.

{
  "tasks": {
    "lint": {
      "dependsOn": ["build", "^lint"]
    }
    // ... 다른 작업들
  }
}

빌드 실행 필요

이 프로젝트에서는 패키지들의 빌드 방식의 특성상, ESLint 검사 전에 반드시 빌드를 먼저 실행해야 합니다. 각 패키지들이 실제 빌드된 코드를 번들에 포함시키기 때문에, 빌드가 완료되지 않은 상태에서는 ESLint 검사가 올바르게 수행되지 않을 수 있기 때문입니다. 따라서, lint 작업의 dependsOn 필드에 build 작업에 의존하도록 설정되어 있습니다.

ESLint Config

공통 Config

공통 ESLint Config 들은 configs/eslint-config 디렉토리 아래에 위치하고 있습니다. 이 디렉토리에는 여러 개의 ESLint Config 파일이 있으며, 각 파일은 특정 목적에 맞게 설정되어 있습니다.

• base.js: 기본 ESLint 설정을 포함합니다. 이 설정은 모든 ESLint Config 파일에 공통적으로 적용할 기본 규칙들을 정의합니다.
• react-internal.js: React 를 사용하는 워크스페이스에 적용되는 ESLint 설정입니다. React 관련 규칙들을 포함하고 있습니다.
• next.js: Next.js 를 사용하는 워크스페이스에 적용되는 ESLint 설정입니다. Next.js 관련 규칙들을 포함하고 있습니다.

공통 Config 상속하기

각 워크스페이스에서는 공통 ESLint Config 를 상속받아 그대로 사용하거나, 추가적인 규칙을 정의할 수 있습니다.

그대로 사용하기

apps/docs 워크스페이스에서는 configs/eslint-config/next.js 파일에 정의된 Next.js 관련 ESLint 설정을 그대로 사용하고 있습니다.

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

확장하기

apps/frontend-workshop 워크스페이스에서는 configs/eslint-config/react-internal.js 파일을 확장하여 React 관련 규칙을 적용하고 있습니다.

import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";
import { config } from "@repo/eslint-config/react-internal";
 
export default tseslint.config(
  { ignores: ["dist", "storybook-static"] },
  {
    extends: [...config],
    files: ["**/*.{ts,tsx}"],
 
    // ... 추가적인 규칙들
  },
);

ESLint Plugins

직접 작성하기

이 프로젝트에서는 ESLint 플러그인을 직접 작성하여 사용할 수도 있습니다.

• 새 ESLint 플러그인을 작성하려면 패키지 > 새 패키지 추가 > ESLint 플러그인 문서를 참고해 주세요.
• eslint-plugin-sample 패키지에 대한 자세한 내용은 패키지 > 샘플 패키지 > eslint-plugin-samples 문서를 참고해 주세요.

ESLint Config 에 적용하기

작성한 ESLint 규칙은 ESLint Config 에 적용할 수 있습니다. 예를 들어, configs/eslint-config/base.js 파일을 보면, eslint-plugin-sample 패키지에서 작성한 규칙을 다음과 같이 적용하고 있습니다. 마찬가지로 새로운 ESLint 규칙을 작성한 후, 해당 규칙을 이와 같이 ESLint Config 에 추가하여 사용할 수 있습니다.

의존성 추가하기

작성한 ESLint 플러그인을 ESLint Config 에 적용하기 위해서는 해당 플러그인을 eslint-config 패키지의 devDependencies에 추가합니다.

{
  // ... 다른 설정들
  "devDependencies": {
    "@repo/eslint-plugin-sample": "workspace:*",
    // ... 다른 devDependencies
  },
}

이어서 아래의 명령어를 실행하여 eslint-plugin-sample 패키지를 eslint-config 패키지 의존성으로 설치합니다.

pnpm install --filter @repo/eslint-config

Config 에 적용하기

이제 eslint-config 패키지의 ESLint Config 파일에 작성한 ESLint 플러그인을 적용할 수 있습니다.

// ... 다른 import 문들
import samplePlugin from "@repo/eslint-plugin-sample";
 
/**
 * A shared ESLint configuration for the repository.
 *
 * @type {import("eslint").Linter.Config[]}
 * */
export const config = [
  // ... 다른 ESLint Config 들
  {
    plugins: {
      sample: samplePlugin,
    },
    rules: {
      "sample/no-new-date": "warn", // eslint-plugin-sample 패키지에서 작성한 규칙을 적용
    },
  },
];