flat config

[nozomiishii]

作業

• [ ] eslint-vercel消す
• [ ] eslint-airbnb消す

公式 Flat Config support 表 https://github.com/eslint/eslint/issues/18093

対応パッケージ

• [ ] @next/eslint-plugin-next
  • https://github.com/vercel/next.js/issues/58411
• [x] @tanstack/eslint-plugin-query
  • https://github.com/TanStack/query/issues/7544
• [x] @typescript-eslint/eslint-plugin
• [x] @typescript-eslint/parser
• [x] eslint-config-prettier
• [x] eslint-plugin-eslint-comments
  • 元々のメンテされてないのでこっちを使う
  • https://eslint-community.github.io/eslint-plugin-eslint-comments/
    • 入れるなら複数行でコメント書きたいので次のがマージされたら
    • https://github.com/eslint-community/eslint-plugin-eslint-comments/issues/190
• [x] eslint-plugin-import
  • https://github.com/import-js/eslint-plugin-import/issues/2556
  • こっちに移行してもいいかも 　- https://github.com/un-ts/eslint-plugin-import-x
• [x] eslint-plugin-jsdoc
• [x] eslint-plugin-jsx-a11y
  • https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/978
• [x] eslint-plugin-perfectionist
• [x] eslint-plugin-playwright
• [x] eslint-plugin-react
  • サポートされた
  • https://github.com/jsx-eslint/eslint-plugin-react?tab=readme-ov-file#configuration-new-eslintconfigjs
• [ ] eslint-plugin-react-hooks
  • https://github.com/facebook/react/issues/28313
• [ ] eslint-plugin-storybook
  • https://github.com/storybookjs/eslint-plugin-storybook/issues/135
• [x] eslint-plugin-tailwindcss
• [ ] eslint-plugin-testing-library
  • https://github.com/testing-library/eslint-plugin-testing-library/issues/899
• [ ] eslint-plugin-tsdoc
  • https://github.com/microsoft/tsdoc/issues/374
• [x] eslint-plugin-unicorn
• [x] 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