-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Next.js 向けの ESLint v8 と Prettier の基本設定例 #10
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
気になったので見てたらいくつか直せそうなところがあったのでレビューさせていただきました!
Co-authored-by: Fastman <74091672+hayato-osh@users.noreply.github.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
自分ならこうするかなというのを貼っておきます
warnにしているのはよほど致命的なもの以外はerrorにしたくないという個人的な趣味です
type importを一意に確定させる設定
tsconfigのverbatimModuleSyntax
と合わせるとほぼ一意に確定できるはず
"@typescript-eslint/consistent-type-imports": [
"warn",
{
fixStyle: "separate-type-imports",
prefer: "type-imports",
},
],
'import/consistent-type-specifier-style': ['warn', 'prefer-top-level'],
インポートのソートであれこれ悩みたくなかったので、以下に全て丸投げしていました
https://github.com/lydell/eslint-plugin-simple-import-sort
{
files: ["*"],
plugins: ["simple-import-sort"],
rules: {
"simple-import-sort/imports": "warn",
"simple-import-sort/exports": "warn",
},
}
Co-authored-by: YAGITA Yugo <14973783+ygkn@users.noreply.github.com>
Co-authored-by: YAGITA Yugo <14973783+ygkn@users.noreply.github.com>
上記、ちょっと気になるので、後ほど調べて導入検討します。
こちら、ありな感じはするのですが、一旦 ほかの、react 向けで、 ESLint v9 対応の際には、上記 plugin 検討しようと思います。 |
…r/eslint-v8-nextjs' into feat/eslint-prettier/eslint-v8-nextjs
…mple-import-sort`
9c8943c
to
1abe4bb
Compare
eslint-plugin-simple-import-sort の内容を再確認し、 また、併せて推奨されていた |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Next.js (v14) で ESLint (v8 & Legacy Config) と Prettier を利用する際の基本的な設定を追加しました。
※ Next.js v1 では、 ESLint v9 と Flat Config に対応していないため
pnpm create next
で生成される.eslintrc.json
と異なる点eslint:recommended
Shared Config を適用plugin:@typescript-eslint/recommended-requiring-type-checking
Shared Config を適用tailwindcss
を利用するであろう想定をし、eslint-plugin-tailwindcss
を追加eslint-config-prettier
を追加し、prettier
Shared Config を適用eslint-plugin-import
のimport/order
よりも、より広範囲かつ望ましい形でソートが可能なeslint-plugin-simple-import-sort
を利用したimport
とexport
の順序指定@typescript-eslint/consistent-type-imports
ルールを指定し、import
とimport type
を分割import/consistent-type-specifier-style
ルールを指定し、同一パスのimport type
とimport
の順序を指定.prettirerc
の設定内容.editorconfig
と併用する事を前提とし、デフォルトの設定を利用する簡素なスタイル