본문으로 건너뛰기

ESLint Plugin Start

TanStack Start에는 자체 ESLint 플러그인이 포함되어 있습니다. 이 플러그인은 Server Components와 server/client 경계를 다룰 때 모범 사례를 강제하고 흔히 발생하는 실수를 피하도록 돕습니다.

설치​

이 플러그인은 설치해야 하는 별도의 패키지입니다:

npm install -D @tanstack/eslint-plugin-start

or

pnpm add -D @tanstack/eslint-plugin-start

or

yarn add -D @tanstack/eslint-plugin-start

or

bun add -D @tanstack/eslint-plugin-start

Flat Config (eslint.config.js)​

ESLint 9.0의 릴리스에서는 flat config 형식을 사용하여 ESLint를 구성하는 새로운 방법이 도입되었습니다. TanStack Start ESLint Plugin은 이 형식을 지원하며, 모든 권장 규칙을 활성화하는 데 사용할 수 있는 권장 config를 제공합니다.

모든 권장 규칙을 활성화하려면:

// eslint.config.js
import pluginStart from '@tanstack/eslint-plugin-start'

export default [
  pluginStart.configs['flat/recommended'],
  // Any other config...
]

사용자 지정 Flat Config 설정​

또는, 플러그인을 로드하고 원하는 규칙만 구성합니다:

// eslint.config.js
import pluginStart from '@tanstack/eslint-plugin-start'

export default [
  {
    plugins: {
      '@tanstack/start': pluginStart,
    },
    rules: {
      '@tanstack/start/no-client-code-in-server-component': 'error',
      '@tanstack/start/no-async-client-component': 'error',
    },
  },
  // Any other config...
]

Legacy Config (.eslintrc)​

ESLint 9.0 이전에는 ESLint를 구성하는 가장 일반적인 방법이 .eslintrc 파일을 사용하는 것이었습니다. TanStack Start ESLint plugin은 여전히 이 구성 방법을 지원합니다.

모든 권장 규칙을 활성화하려면 plugin:@tanstack/eslint-plugin-start/recommended를 extends에 추가합니다:

{
  "extends": ["plugin:@tanstack/eslint-plugin-start/recommended"]
}

사용자 지정 Legacy Config 설정​

또는 @tanstack/eslint-plugin-start를 plugins에 추가하고 원하는 규칙을 구성합니다:

{
  "plugins": ["@tanstack/eslint-plugin-start"],
  "rules": {
    "@tanstack/start/no-client-code-in-server-component": "error",
    "@tanstack/start/no-async-client-component": "error"
  }
}

규칙​

다음 규칙을 TanStack Start ESLint plugin에서 사용할 수 있습니다: