Skip to content
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

chore: ESLint v9 #5197

Merged
merged 12 commits into from
Dec 24, 2024
Merged

chore: ESLint v9 #5197

merged 12 commits into from
Dec 24, 2024

Conversation

s-sasaki-0529
Copy link
Contributor

@s-sasaki-0529 s-sasaki-0529 commented Dec 16, 2024

関連URL

社内向けドキュメント
eslint v9 と Flat Config と SmartHR

概要

eslint-plugin-config および eslint-config-smarthr の v9 化・FlatConfig 化 が完了したので、本リポジトリでも対応します。

変更内容

  • ESLint v9 に更新
  • eslint-config-smarthr v8 に更新
  • FlatConfig で設定ファイルをリライト
  • 新たに検知した既存コードの修正

確認方法

コードをチェックアウトし、以下コマンドを実行することで ESLint の設定を確認できます。ざっと見て問題無さそうであればとりあえず良さそう。

$ pnpm eslint --inspect-config

以下を確認してます。

  • InspectConfig から各種ルールが必要十分に適用されていること
  • pnpm ui lint:eslint が意図通り実行されうこと
  • コミット時の lint-staged で ESLint が意図通り実行されること
  • エディタ(vscode) 上で、ESLint が動作すること

@s-sasaki-0529 s-sasaki-0529 self-assigned this Dec 16, 2024
Copy link

pkg-pr-new bot commented Dec 16, 2024

Open in Stackblitz

npm i https://pkg.pr.new/kufu/smarthr-ui@5197

commit: 9de08d1

'packages/smarthr-ui/lib/',
'packages/smarthr-ui/.storybook',
]
},
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FlatConfig では、 ignores のみを持つオブジェクトを定義することで、全体の ignore リストが設定できるらしいです。

@@ -60,7 +60,7 @@ export function ButtonWrapper({
if (props.isAnchor) {
const { anchorRef, elementAs, isAnchor: _, ...others } = props
const Component = elementAs || 'a'
// eslint-disable-next-line jsx-a11y/anchor-has-content

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ESLint v9 では、このように無効な無効化コメントを検知できるようになりました。

@@ -97,7 +97,7 @@ type Props<T extends React.ElementType> = PropsWithChildren<
> &
ComponentPropsWithoutRef<T>

const _Cluster = <T extends React.ElementType = 'div'>(
const ActualCluster = <T extends React.ElementType = 'div'>(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここリネームしてます。

ESLint のバージョンアップによって、「Hooks を使えるのは React コンポーネントだけだぞ」ってルールに引っかかりました。

これはちゃんと React コンポーネントなんですが、どうやらコンポーネントならキャメルメースの命名のはずだと疑われてしまったので、ちゃんとキャメルメースを満たす名前に変えました。

@s-sasaki-0529 s-sasaki-0529 marked this pull request as ready for review December 16, 2024 10:56
@s-sasaki-0529 s-sasaki-0529 requested a review from a team as a code owner December 16, 2024 10:56
@s-sasaki-0529 s-sasaki-0529 requested review from moshisora, uknmr and a team and removed request for a team December 16, 2024 10:56
Copy link
Member

@nabeliwo nabeliwo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

warning がめっちゃ増えてるっぽいですが、eslint-disable-next-line を消した影響ですかね?
いずれにせよ error ではないので別で対応ということでこの PR は LGTM と判断しました!

対応ありがとうございます!

@s-sasaki-0529
Copy link
Contributor Author

warning がめっちゃ増えてるっぽいですが、eslint-disable-next-line を消した影響ですかね?

eslint-disable-next-line を消した これは不要なコメントを消しただけなので結果には影響しないはずですね。
ログ見ると、 .stories.tsx に対しての警告が増えてるので対象ファイルちょっと変わってるかも・・・?

Storybook コードも ESLint の対象にするって方針だった気がするので、今が正解にも見えますが別途調整します!

@s-sasaki-0529 s-sasaki-0529 merged commit b2f1541 into master Dec 24, 2024
13 checks passed
@s-sasaki-0529 s-sasaki-0529 deleted the eslint-v9 branch December 24, 2024 01:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants