ESLint v9 に対応 #232

Pugma · 2024-10-19T14:26:27Z

User description

v9 に対応させるとともに、flat config への移行が完了

参考にしたサイトの URL を以下に示すので、これをもとに確認していただければと思います

ESLint 全体の移行: https://eslint.org/docs/latest/use/configure/migration-guide
Vue プラグインの移行: https://eslint.vuejs.org/user-guide/
TypeScript プラグインの移行: https://typescript-eslint.io/getting-started

Vue プラグイン移行だけこれでも不整合が起きたので、追加で以下のサイトも参考にした
https://zenn.dev/shun91/articles/min-eslint-flat-config-for-vue3-ts-prettier

PR Type

enhancement, configuration changes

Description

ESLint v9に対応するための設定ファイルを追加し、VueとTypeScriptのプラグインを設定。
ESLint関連のパッケージを更新し、スクリプトのlintコマンドを更新。
Vueファイル全体で改行を追加し、コードの可読性を向上。
不要なESLintディレクティブを削除。

Changes walkthrough 📝

Relevant files

Enhancement

38 files

IndexPage.vue `コードの可読性向上のための改行追加` src/pages/IndexPage.vue 改行を追加してコードの可読性を向上 `<h1>`や`<h2>`タグの中に改行を追加	+18/-6
ContestsContainer.vue `コードの可読性向上のための改行追加` src/components/User/ContestsContainer.vue 改行を追加してコードの可読性を向上 `<h2>`タグや`<li>`タグの中に改行を追加	+16/-5
TopSection.vue `コードの可読性向上のための改行追加` src/components/Index/TopSection.vue 改行を追加してコードの可読性を向上 `<h2>`タグや`<router-link>`タグの中に改行を追加	+11/-3
BreadCrumbTrail.vue `コードの可読性向上のための改行追加` src/components/Layout/BreadCrumbTrail.vue 改行を追加してコードの可読性を向上 `<template>`タグや`<span>`タグの中に改行を追加	+8/-2
EventPage.vue `コードの可読性向上のための改行追加` src/pages/EventPage.vue 改行を追加してコードの可読性を向上 `<page-title>`タグや`<p>`タグの中に改行を追加	+9/-3
ProjectsContainer.vue `コードの可読性向上のための改行追加` src/components/User/ProjectsContainer.vue 改行を追加してコードの可読性を向上 `<h2>`タグや`<project-list>`タグの中に改行を追加	+10/-3
HostnameListItem.vue `コードの可読性向上のための改行追加` src/components/Event/HostnameListItem.vue 改行を追加してコードの可読性を向上 `<user-icon>`タグや`<div>`タグの中に改行を追加	+8/-2
ContestPage.vue `コードの可読性向上のための改行追加` src/pages/ContestPage.vue 改行を追加してコードの可読性を向上 `<external-link>`タグの中に改行を追加	+4/-2
MemberListItem.vue `コードの可読性向上のための改行追加` src/components/Group/MemberListItem.vue 改行を追加してコードの可読性を向上 `<user-icon>`タグや`<p>`タグの中に改行を追加	+8/-2
UserDetailContainer.vue `コードの可読性向上のための改行追加` src/components/User/UserDetailContainer.vue 改行を追加してコードの可読性を向上 `<user-icon>`タグや`<div>`タグの中に改行を追加	+8/-2
MemberListItem.vue `コードの可読性向上のための改行追加` src/components/ContestTeam/MemberListItem.vue 改行を追加してコードの可読性を向上 `<user-icon>`タグや`<p>`タグの中に改行を追加	+8/-2
SearchInput.vue `コードの可読性向上のための改行追加` src/components/UI/SearchInput.vue 改行を追加してコードの可読性を向上 `<a-icon>`タグや`<input>`タグの中に改行を追加	+6/-2
UserListItem.vue `コードの可読性向上のための改行追加` src/components/Search/UserListItem.vue 改行を追加してコードの可読性を向上 `<user-icon>`タグや`<p>`タグの中に改行を追加	+8/-2
MemberListItem.vue `コードの可読性向上のための改行追加` src/components/Project/MemberListItem.vue 改行を追加してコードの可読性を向上 `<user-icon>`タグの中に改行を追加	+5/-1
AdminListItem.vue `コードの可読性向上のための改行追加` src/components/Group/AdminListItem.vue 改行を追加してコードの可読性を向上 `<user-icon>`タグの中に改行を追加	+5/-1
EventsContainer.vue `コードの可読性向上のための改行追加` src/components/User/EventsContainer.vue 改行を追加してコードの可読性を向上 `<div>`タグや`<p>`タグの中に改行を追加	+9/-2
ContestTeamListItem.vue `コードの可読性向上のための改行追加` src/components/Contest/ContestTeamListItem.vue 改行を追加してコードの可読性を向上 `<span>`タグの中に改行を追加	+4/-1
PageFooter.vue `コードの可読性向上のための改行追加` src/components/Layout/PageFooter.vue 改行を追加してコードの可読性を向上 `<img>`タグや`<div>`タグの中に改行を追加	+7/-2
SearchPage.vue `コードの可読性向上のための改行追加` src/pages/SearchPage.vue 改行を追加してコードの可読性を向上 `<template>`タグの中に改行を追加	+3/-1
GroupsContainer.vue `コードの可読性向上のための改行追加` src/components/User/GroupsContainer.vue 改行を追加してコードの可読性を向上 `<h2>`タグの中に改行を追加	+3/-1
ExternalLink.vue `コードの可読性向上のための改行追加` src/components/UI/ExternalLink.vue 改行を追加してコードの可読性を向上 `<a>`タグや`<a-icon>`タグの中に改行を追加	+9/-2
AccountList.vue `コードの可読性向上のための改行追加` src/components/User/AccountList.vue 改行を追加してコードの可読性を向上 `<img>`タグの中に改行を追加	+5/-1
ProjectPage.vue `コードの可読性向上のための改行追加` src/pages/ProjectPage.vue 改行を追加してコードの可読性を向上 `<external-link>`タグの中に改行を追加	+4/-1
AdminList.vue `コードの可読性向上のための改行追加` src/components/Group/AdminList.vue 改行を追加してコードの可読性を向上 `<admin-list-item>`タグの中に改行を追加	+5/-1
GroupPage.vue `コードの可読性向上のための改行追加` src/pages/GroupPage.vue 改行を追加してコードの可読性を向上 `<external-link>`タグの中に改行を追加	+4/-1
AccountListItem.vue `コードの可読性向上のための改行追加` src/components/User/AccountListItem.vue 改行を追加してコードの可読性を向上 `<a-icon>`タグの中に改行を追加	+5/-1
PageHeader.vue `コードの可読性向上のための改行追加` src/components/Layout/PageHeader.vue 改行を追加してコードの可読性を向上 `<img>`タグの中に改行を追加	+1/-1
EventsPage.vue `コードの可読性向上のための改行追加` src/pages/EventsPage.vue 改行を追加してコードの可読性を向上 `<page-title>`タグの中に改行を追加	+3/-1
AIcon.vue `コードの可読性向上のための改行追加` src/components/UI/AIcon.vue 改行を追加してコードの可読性を向上 `<Icon>`タグの中に改行を追加	+6/-1
ContestListItem.vue `コードの可読性向上のための改行追加` src/components/Contests/ContestListItem.vue 改行を追加してコードの可読性を向上 `getFullDayWithTimeString`関数の呼び出しに改行を追加	+1/-1
EventList.vue `コードの可読性向上のための改行追加` src/components/Events/EventList.vue 改行を追加してコードの可読性を向上 `<event-list-item>`タグの中に改行を追加	+5/-1
GroupList.vue `コードの可読性向上のための改行追加` src/components/Groups/GroupList.vue 改行を追加してコードの可読性を向上 `<group-list-item>`タグの中に改行を追加	+5/-1
App.vue `コードの可読性向上のための改行追加` src/App.vue 改行を追加してコードの可読性を向上 `<router-view>`タグの中に改行を追加	+4/-1
PageContainer.vue `コードの可読性向上のための改行追加` src/components/Layout/PageContainer.vue 改行を追加してコードの可読性を向上 `<bread-crumb-trail>`タグの中に改行を追加	+4/-1
GroupList.vue `コードの可読性向上のための改行追加` src/components/Index/GroupList.vue 改行を追加してコードの可読性を向上 `<img>`タグの中に改行を追加	+1/-1
UserIcon.vue `コードの可読性向上のための改行追加` src/components/UI/UserIcon.vue 改行を追加してコードの可読性を向上 `<img>`タグの中に改行を追加	+1/-1
LoadingPage.vue `コードの可読性向上のための改行追加` src/pages/LoadingPage.vue 改行を追加してコードの可読性を向上 `<main>`タグの中に改行を追加	+3/-1
index.ts `不要なESLintディレクティブの削除` src/lib/apis/index.ts 不要なESLintディレクティブを削除	+1/-1

Configuration changes

1 files

eslint.config.js `ESLint v9対応のための設定ファイル追加` eslint.config.js ESLint v9に対応するための設定ファイルを追加 VueとTypeScriptのプラグインを設定	+45/-0

Dependencies

1 files

package.json `ESLint関連パッケージとスクリプトの更新` package.json ESLint関連のパッケージを更新スクリプトのlintコマンドを更新	+9/-8

Additional files (token-limit)

1 files

package-lock.json `...` package-lock.json ...	+1136/-977

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

github-actions · 2024-10-19T14:28:25Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review コード整合性 Vueファイルのタグが正しく閉じられていない可能性があります。特に自己閉じタグの使用が一貫していないため、Vueのパースエラーが発生する可能性があります。パフォーマンス大量のDOM要素や複雑なスクリプトがページのパフォーマンスに影響を与える可能性があります。特にユーザー詳細の表示に多くのコンポーネントとデータバインディングが使用されています。設定エラー ESLintの設定ファイルにおいて、未定義の変数やモジュールが参照されている可能性があります。特にカスタムルールの設定が正しく機能しているか確認が必要です。

github-actions · 2024-10-19T14:29:09Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Enhancement	ESLintがTypeScriptとVueファイルのみをチェックするように設定を修正します。 `eslint` コマンドのオプションに `--ext .ts,.vue` を追加してください。これにより、ESLintがTypeScriptファイルとVueファイルのみを対象にチェックするようになります。 package.json [8-9] -"lint": "eslint --fix --cache src", -"lint:nofix": "eslint --cache src", +"lint": "eslint --fix --cache --ext .ts,.vue src", +"lint:nofix": "eslint --cache --ext .ts,.vue src", Suggestion importance[1-10]: 9 Why: The suggestion to add the `--ext .ts,.vue` option to the ESLint command is valid and important. It ensures that ESLint only checks TypeScript and Vue files, which aligns with the project's requirements. This change enhances the accuracy and efficiency of the linting process, making it a high-impact improvement.	9

Pugma · 2024-10-19T14:36:18Z

eslint コマンドのオプションに --ext .ts,.vue
を追加してください。これにより、ESLintがTypeScriptファイルとVueファイルのみを対象にチェックするようになります。

というおすすめが入ってますが、これは ESLint v9 になった段階で廃止されたコマンドライン引数なので使えません

nokhnaton · 2024-10-21T04:20:31Z

eslint.config.js

+const vueLint = {
+  files: ['*.vue', '**/*.vue'],
+  languageOptions: {
+    parser: vueParser,


Suggested change

parser: vueParser,

"parser": "vue-eslint-parser"

公式サイトだとこういう風になっているサイトしか見つからなかったので、こうしておくのが無難かなと思います。
https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser

あれ、これその後のコミットで直しております

あ、ほんとだ

nokhnaton · 2024-10-21T04:37:34Z

src/components/Event/HostnameListItem.vue

@@ -15,7 +15,9 @@ defineProps<{
    >
      <user-icon :class="$style.icon" :user-name="hostname.name" :size="128" />


ここら辺warnが出てたりするので、fixかけるといいのかなと思います。

これ linter と formatter が競合している編集箇所っぽいのでちょっと後回しにします
とりあえず v9 対応したかったって感じなので

nokhnaton · 2024-10-21T06:16:11Z

こっちの話どうなってますか?
#232 (comment)

Pugma added 2 commits October 19, 2024 22:37

chore: updated packages

aec3c58

ESLint v9 に対応完了！！！！

65c7111

github-actions bot added the Review effort [1-5]: 3 label Oct 19, 2024

run format

a6a72ea

Pugma added 3 commits October 20, 2024 09:11

run npm i after delete package-lock.json & node_modules

5fe7910

added @types/node

c2c33ef

recreate package-lock.json

a1bd0ee

Pugma mentioned this pull request Oct 20, 2024

Bump @typescript-eslint/parser from 6.17.0 to 7.15.0 traPtitech/traQ_S-UI#4347

Merged

nokhnaton reviewed Oct 21, 2024

View reviewed changes

nokhnaton mentioned this pull request Oct 21, 2024

UpdateESLint traPtitech/traPortfolio-Dashboard#382

Merged

Pugma added 3 commits October 21, 2024 14:19

run lint

5f869f3

run format

d54c02d

fix: parser

64141e0

Pugma requested a review from nokhnaton October 21, 2024 05:49

nokhnaton approved these changes Oct 21, 2024

View reviewed changes

Pugma merged commit e616462 into main Oct 21, 2024
8 checks passed

Pugma deleted the updateESLint branch October 21, 2024 06:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ESLint v9 に対応 #232

ESLint v9 に対応 #232

Pugma commented Oct 19, 2024 •

edited by github-actions bot

Loading

github-actions bot commented Oct 19, 2024

github-actions bot commented Oct 19, 2024

Pugma commented Oct 19, 2024

nokhnaton Oct 21, 2024

Pugma Oct 21, 2024

nokhnaton Oct 21, 2024

nokhnaton Oct 21, 2024

Pugma Oct 21, 2024

nokhnaton commented Oct 21, 2024

		@@ -15,7 +15,9 @@ defineProps<{
		>
		<user-icon :class="$style.icon" :user-name="hostname.name" :size="128" />

ESLint v9 に対応 #232

ESLint v9 に対応 #232

Conversation

Pugma commented Oct 19, 2024 • edited by github-actions bot Loading

User description

PR Type

Description

Changes walkthrough 📝

github-actions bot commented Oct 19, 2024

PR Reviewer Guide 🔍

github-actions bot commented Oct 19, 2024

PR Code Suggestions ✨

Pugma commented Oct 19, 2024

nokhnaton Oct 21, 2024

Choose a reason for hiding this comment

Pugma Oct 21, 2024

Choose a reason for hiding this comment

nokhnaton Oct 21, 2024

Choose a reason for hiding this comment

nokhnaton Oct 21, 2024

Choose a reason for hiding this comment

Pugma Oct 21, 2024

Choose a reason for hiding this comment

nokhnaton commented Oct 21, 2024

Pugma commented Oct 19, 2024 •

edited by github-actions bot

Loading