flat config

[nozomiishii]

作業

• eslint-vercel消す
• eslint-airbnb消す

公式 Flat Config support 表
eslint/eslint#18093

対応パッケージ

• @next/eslint-plugin-next
  • Docs: How to configure eslint-config-next in flat config vercel/next.js#58411
• @tanstack/eslint-plugin-query
  • ESLint Plugin: Flat Config Support TanStack/query#7544
• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser
• eslint-config-prettier
• eslint-plugin-eslint-comments
  • 元々のメンテされてないのでこっちを使う
  • https://eslint-community.github.io/eslint-plugin-eslint-comments/
    • 入れるなら複数行でコメント書きたいので次のがマージされたら
    • require-description - Allow comment above eslint-community/eslint-plugin-eslint-comments#190
• eslint-plugin-import
  • [Feature Request] Support new ESLint flat config import-js/eslint-plugin-import#2556
  • こっちに移行してもいいかも
    　- https://github.com/un-ts/eslint-plugin-import-x
• eslint-plugin-jsdoc
• eslint-plugin-jsx-a11y
  • Add support for ESLint 9 jsx-eslint/eslint-plugin-jsx-a11y#978
• eslint-plugin-perfectionist
• eslint-plugin-playwright
• eslint-plugin-react
  • サポートされた
  • https://github.com/jsx-eslint/eslint-plugin-react?tab=readme-ov-file#configuration-new-eslintconfigjs
• eslint-plugin-react-hooks
  • eslint-plugin-react-hooks & "Flat Config" (ESLint 9) facebook/react#28313
• eslint-plugin-storybook
  • Support for the new FlatConfig format storybookjs/eslint-plugin-storybook#135
• eslint-plugin-tailwindcss
• eslint-plugin-testing-library
  • Prepare the rules for ESLint v9 testing-library/eslint-plugin-testing-library#899
• eslint-plugin-tsdoc
  • ESLint flat configurations? microsoft/tsdoc#374
• eslint-plugin-unicorn
• eslint-plugin-vitest

案
#46

[nozomiishii]

久々にflat config試そうとしたが全然できん

[nozomiishii]

prettierはいける

// @ts-check
import { defineFlatConfig } from 'eslint-define-config';
import eslintConfigPrettier from 'eslint-config-prettier';

/**
 * eslint-config-prettier
 * {@link https://www.npmjs.com/package/eslint-config-prettier}
 */
export default defineFlatConfig([eslintConfigPrettier]);

[nozomiishii]

nextjsは無理

import { defineFlatConfig } from 'eslint-define-config';
import next from '@next/eslint-plugin-next';

/**
 * FIXME: @ts-checkすると死ぬ
 *
 * @next/eslint-plugin-next
 * {@link https://www.npmjs.com/package/@next/eslint-plugin-next}
 */
export default defineFlatConfig([
  {
    files: ['**/*.ts', '**/*.tsx'],
    plugins: {
      '@next/next': next,
    },
    rules: {
      ...next.configs.recommended.rules,
      ...next.configs['core-web-vitals'].rules,
    },
  },
]);

[nozomiishii]

tailwindはdefineFlatConfigではうまくいかなかったけど
import("eslint").Linter.FlatConfig[]なら型安全

// @ts-check
import tailwind from 'eslint-plugin-tailwindcss';

/**
 * eslint-plugin-tailwindcss
 * {@link https://www.npmjs.com/package/eslint-plugin-tailwindcss}
 *
 * @type {import("eslint").Linter.FlatConfig[]}
 */
export default [...tailwind.configs['flat/recommended']];

[nozomiishii]

@tanstack/eslint-plugin-queryだめ

[nozomiishii]

reactもダメだな

[nozomiishii]

延期

[nozomiishii]

--ignore-path廃止されたから
gitinoreはこれ
https://github.com/antfu/eslint-config-flat-gitignore

[nozomiishii]

このcliで作ることもできるのかー！
https://github.com/eslint/create-config

[nozomiishii]

Nextjsいけるかも

vercel/next.js#64409 (comment)

[nozomiishii]

こっちのreactのeslintも良さそう
https://www.npmjs.com/package/@eslint-react/eslint-plugin

facebook/react#28313 (comment)