TSESLint v8, ESLint v9(flat config)에서 Prettier plugin 설정하는 방법

• 요약: legacy에서 “extends” 필드로 사용했던 config들을, extends 필드 대신 flat config의 가변 인자로 넘겨주면 됩니다.

1. 정상 동작하는 설정 방법

import js from "@eslint/js";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
import tseslint from "typescript-eslint";

export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommended,
  eslintPluginPrettierRecommended,
  {
    files: ["**/*.{ts,tsx}"],
    ignores: ["dist"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {},
    rules: {},
  },
);

2. 비정상 동작 혹은 동작하지 않는 설정 방법

2-1. 시도 1: Prettier rule 활성화되지 않음

import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";

export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    plugins: {
      prettier: eslintPluginPrettierRecommended,
    },
  },
);

2-2. 시도 2: ESLint plugin 오류 발생

• “prettier/prettier” 규칙을 추가해서 강제 활성화
• 원래 plugin이 제대로 등록됐다면 기본 적용되어야 합니다.

import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";

export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    plugins: {
      prettier: eslintPluginPrettierRecommended,
    },
    rules: {
      'prettier/prettier': 'error',
    },
  },
);

• 오류 발생

TypeError: Key "rules": Key "prettier/prettier": Could not find "prettier" in plugin "prettier".

2-3. 시도 3: import 구문에서 recommended 제외

• import 대상을 “eslint-plugin-prettier/recommended” 대신 “eslint-plugin-prettier”로 변경

import eslintPluginPrettier from "eslint-plugin-prettier";

export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    plugins: {
      prettier: eslintPluginPrettier,
    },
    rules: {
      'prettier/prettier': 'error',
    },
  },
);

• 문제점: 'prettier/prettier': 'error' 규칙 제거 시 prettier 실행이 되지 않습니다.
• 즉, recommended 설정이 적용되지 않고 있습니다.
• 즉, eslint-config-prettier도 적용되지 않고 있다는 말입니다.

2-5. 시도 4: flat config에 eslintPluginPrettierRecommended 사용

• (정상 동작 Case와 동일 내용)

2-6. 시도 5: eslintPluginPrettier.configs.recommended 사용

• 별도의 근거 없이 시도해봤는데 잘 되지는 않았습니다..!

import eslintPluginPrettier from "eslint-plugin-prettier";

export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommended,
  eslintPluginPrettier.configs.recommended,
  { /* ... */ },
);

• 오류 발생

ConfigError: Config (unnamed): Unexpected key "0" found.

3. 설명

3-1. prettier plugin은 원래부터 plugin이 아닌, config로 설정했습니다.

// legacy config
extends: [
  'eslint:recommended',
  'plugin:@typescript-eslint/recommended',
  'plugin:react-hooks/recommended',
  'plugin:storybook/recommended',
  'plugin:prettier/recommended',
],

• extends 필드는 config 파일을 입력으로 받습니다.

• 정확하게는 직접 require하기 때문에 config 파일 자체가 아닌 그 경로를 입력 받습니다.

• legacy config에서도 prettier 설정은 config로 했음을 알 수 있습니다.

• 즉 원래부터 “plugin:prettier/recommended”는 plugin이 아니라, config 였습니다.
‣

The extends property value is either:

• a string that specifies a configuration (either a path to a config file, the name of a shareable config, eslint:recommended, or eslint:all)

• an array of strings where each additional configuration extends the preceding configurations

3-2. eslintPluginPrettierRecommended는 plugin이 아니라, plugin 패키지에 포함된 config입니다.

• “eslint-plugin-prettier/recommended”는 plugin이 아니라, plugin 패키지에 포함된 config입니다.

• config이기 때문에 flat config 상에서는 plugin으로 인식할 수 없습니다.

• plugin 구성은 config 객체와 다른 형상이기 때문에, plugin으로 그대로 등록하면 정상 동작하지 않는 게 정상입니다. (flat config 이전에도 동일)

3-3. eslint-config-prettier는 config에 없어도 됩니다.

• eslint-plugin-prettier가 실행되면 알아서 활용합니다.

Enable the eslint-config-prettier config which will turn off ESLint rules that conflict with Prettier.

const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended');

module.exports = [
  eslintPluginPrettierRecommended,
];

This will:

• Enable the prettier/prettier rule.

• Disable the arrow-body-style and prefer-arrow-callback rules which are problematic with this plugin - see the below for why.

• Enable the eslint-config-prettier config which will turn off ESLint rules that conflict with Prettier.

3-4. flat config에서 extends 필드는 사용하지 않습니다.

• extends 필드 활용은 레거시 config 설정 방법입니다.

• flat config에서는 각 config를 배열 혹은 가변 인자로 1차원으로 늘여뜨려 전달합니다.

// ESLint
export default [
  someConfig,
  eslintConfigPrettier,
];

// TypeScript-ESLint
export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommended,
  eslintPluginPrettierRecommended,
  {
    // extends: 필드 사용 X. ConfigError
    // extends 대신 가변 인자 활용(flat config)
    files: ["**/*.{ts,tsx}"],
    ignores: ["dist"],
    languageOptions: {},
    plugins: {},
    rules: {},
  },
);