Fix/formatRule

[Pugma]

User description

CI 上の警告を全て解決させた

---

PR Type

enhancement

---

Description

• Vueファイルの多くのコンポーネントや要素を再フォーマットし、各属性を新しい行に配置しました。これにより、コードの可読性と一貫性が向上します。
• ESLintとPrettierの設定を更新し、HTMLの自己閉じタグやインデントに関する新しいルールを追加しました。

---

Changes walkthrough 📝

	Relevant files
Formatting	42 files App.vue Reformat navigation-bar component for better readability  src/App.vue Reformatted navigation-bar component to have each attribute on a new line. +4/-1      ContestTeams.vue Reformat list item attributes for clarity                                src/components/Contest/ContestTeams.vue Reformatted li element to have each attribute on a new line. +4/-1      EventHostItem.vue Reformat user-icon component for consistency                          src/components/Event/EventHostItem.vue Reformatted user-icon component to have each attribute on a new line. +4/-1      EventItem.vue Reformat span element for improved readability                      src/components/Events/EventItem.vue Reformatted span element to have each attribute on a new line. +5/-1      EventLevelMenu.vue Reformat div element for better structure                                src/components/Events/EventLevelMenu.vue Reformatted div element to have each attribute on a new line. +4/-1      PageInfoPanel.vue Reformat components for improved readability                          src/components/Index/PageInfoPanel.vue Reformatted router-link and icon components to have each attribute on a new line. +9/-2      ContentHeader.vue Reformat elements for better readability                                  src/components/Layout/ContentHeader.vue Reformatted icon and template elements to have each attribute on a new line. +9/-2      PageFooter.vue Reformat image element for consistency                                      src/components/Layout/PageFooter.vue Reformatted img element to have each attribute on a new line. +4/-1      PageHeader.vue Reformat button element for clarity                                            src/components/Layout/PageHeader.vue Reformatted button element to have each attribute on a new line. +4/-1      NavigationBarFooter.vue Reformat icon component for consistency                                    src/components/NavigationBar/NavigationBarFooter.vue Reformatted icon component to have each attribute on a new line. +4/-1      NavigationLinksItem.vue Reformat icon component for better readability                      src/components/NavigationBar/NavigationLinksItem.vue Reformatted icon component to have each attribute on a new line. +5/-1      ProjectMember.vue Reformat components for improved structure                              src/components/Projects/ProjectMember.vue Reformatted user-icon and icon components to have each attribute on a new line. +12/-3    BaseButton.vue Reformat icon component for consistency                                    src/components/UI/BaseButton.vue Reformatted icon component to have each attribute on a new line. +4/-1      Checkbox.vue Reformat input element for better readability                        src/components/UI/Checkbox.vue Reformatted input element to have each attribute on a new line. +5/-1      ConfirmModal.vue Reformat dialog element for consistency                                    src/components/UI/ConfirmModal.vue Reformatted dialog element to have each attribute on a new line. +4/-1      EventTypeAccordion.vue Reformat base-select component for clarity                              src/components/UI/EventTypeAccordion.vue Reformatted base-select component to have each attribute on a new line. +5/-1      ExternalLink.vue Reformat icon component for consistency                                    src/components/UI/ExternalLink.vue Reformatted icon component to have each attribute on a new line. +4/-1      FormInput.vue Reformat form input elements for clarity                                  src/components/UI/FormInput.vue Reformatted div and input elements to have each attribute on a new line. +17/-4    FormTextArea.vue Reformat text area element for consistency                              src/components/UI/FormTextArea.vue Reformatted div element to have each attribute on a new line. +5/-1      Icon.vue Reformat icon component for better readability                      src/components/UI/Icon.vue Reformatted icon component to have each attribute on a new line. +6/-1      LinkButton.vue Reformat icon component for consistency                                    src/components/UI/LinkButton.vue Reformatted icon component to have each attribute on a new line. +4/-1      MemberInput.vue Reformat list item for improved readability                            src/components/UI/MemberInput.vue Reformatted li element to have each attribute on a new line. +6/-1      RadioButton.vue Reformat radio button elements for clarity                              src/components/UI/RadioButton.vue Reformatted input and span elements to have each attribute on a new line. +10/-2    SearchInput.vue Reformat search input icon for consistency                              src/components/UI/SearchInput.vue Reformatted icon component to have each attribute on a new line. +5/-1      ServiceAccordion.vue Reformat service accordion for better readability                src/components/UI/ServiceAccordion.vue Reformatted base-select component to have each attribute on a new line. +5/-1      UserAccounts.vue Reformat user accounts icon for consistency                            src/components/User/UserAccounts.vue Reformatted icon component to have each attribute on a new line. +5/-1      UserProfileDesktop.vue Reformat user profile desktop components for clarity          src/components/User/UserProfileDesktop.vue Reformatted user-icon and link-button components to have each attribute on a new line. +8/-2      UserProfileMobile.vue Reformat user profile mobile components for consistency    src/components/User/UserProfileMobile.vue Reformatted user-icon and link-button components to have each attribute on a new line. +8/-2      Contest.vue Reformat contest page elements for better readability        src/pages/Contest.vue Reformatted p and a elements to have each attribute on a new line. +8/-2      ContestEdit.vue Reformat contest edit page for consistency                              src/pages/ContestEdit.vue Reformatted multiple form elements to have each attribute on a new line. +30/-7    ContestNew.vue Reformat contest new page for better readability                  src/pages/ContestNew.vue Reformatted multiple form elements to have each attribute on a new line. +19/-4    ContestTeamEdit.vue Reformat contest team edit page for consistency                    src/pages/ContestTeamEdit.vue Reformatted multiple form elements to have each attribute on a new line. +40/-9    ContestTeamNew.vue Reformat contest team new page for better readability        src/pages/ContestTeamNew.vue Reformatted multiple form elements to have each attribute on a new line. +36/-8    Contests.vue Reformat contests page list items for clarity                        src/pages/Contests.vue Reformatted li element to have each attribute on a new line. +4/-1      Events.vue Reformat events page list items for consistency                    src/pages/Events.vue Reformatted li element to have each attribute on a new line. +4/-1      Project.vue Reformat project page for better readability                          src/pages/Project.vue Reformatted multiple form elements to have each attribute on a new line. +30/-7    ProjectNew.vue Reformat project new page for consistency                                src/pages/ProjectNew.vue Reformatted multiple form elements to have each attribute on a new line. +26/-6    Projects.vue Reformat projects page list items for clarity                        src/pages/Projects.vue Reformatted li element to have each attribute on a new line. +4/-1      User.vue Reformat user page components for better readability          src/pages/User.vue Reformatted user profile components to have each attribute on a new line. +12/-3    UserAccountEdit.vue Reformat user account edit page for consistency                    src/pages/UserAccountEdit.vue Reformatted multiple form elements to have each attribute on a new line. +14/-3    UserAccountNew.vue Reformat user account new page for better readability        src/pages/UserAccountNew.vue Reformatted multiple form elements to have each attribute on a new line. +10/-2    UserAccounts.vue Reformat user accounts page list items for clarity              src/pages/UserAccounts.vue Reformatted li element to have each attribute on a new line. +4/-1
Configuration changes	2 files eslint.config.js Update ESLint configuration for HTML formatting                    eslint.config.js Added new ESLint rules for HTML self-closing and indentation. +16/-1    .prettierrc Update Prettier configuration for single attribute per line .prettierrc Added singleAttributePerLine rule to Prettier configuration. +2/-1

---

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

[github-actions]

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 パフォーマンス問題 v-ifディレクティブが多用されており、DOMの再描画が頻繁に発生する可能性があります。特に、アイコンやリンクが条件によって表示されるケースで、パフォーマンスの低下が懸念されます。 可読性の問題 単一のチェックボックスコンポーネントに対して、スタイルのカスタマイズが複雑になっています。スタイルの管理が難しく、保守性が低下している可能性があります。 コード重複 同様のフォーム要素が複数の場所で繰り返し使用されており、コンポーネント化することでDRY原則に則った設計が可能です。特に、ラベル付きのフォーム入力が複数存在します。

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Enhancement	アイコン表示の条件を改善して、より堅牢なチェックを行う。 iconプロパティがundefinedでない場合にのみアイコンを表示する現在の条件を、iconの真偽値チェックに変更してください。これにより、nullや空文字列など、falsyな値がiconに設定されている場合にもアイコンが表示されないようになります。 src/components/UI/FormInput.vue [39-42] <div - v-if="props.icon !== undefined" + v-if="props.icon" :class="$style.iconContainer" > Suggestion importance[1-10]: 7 Why: Changing the condition to check for truthiness instead of undefined makes the code more robust, preventing icons from displaying when icon is falsy. This enhances the code's reliability.	7
Best practice	ブール値の属性には明示的な値を設定して、意図を明確にする。 コンポーネントのrequired属性がブール値として明示的に設定されていません。Vue.jsでは、真偽値のプロパティには明示的に値を設定することが推奨されています。 src/pages/UserAccountEdit.vue [100-103] <labeled-form label="サービス名" - required + :required="true" :class="$style.labeledForm" > Suggestion importance[1-10]: 6 Why: Explicitly setting boolean attributes in Vue.js is a recommended practice for clarity. This suggestion improves code readability and avoids potential confusion, making it a worthwhile enhancement.	6
	明示的なデータバインディングを使用してコードの可読性を向上させる。 :is-menu-open属性にバインドされているdisplayMenuは、v-bindディレクティブを使用して明示的にバインドしてください。これにより、Vue.jsのテンプレート内でのデータバインディングの意図が明確になり、可読性が向上します。 src/components/Event/EventItem.vue [77-80] <span ref="element" :class="$style.icon" - :is-menu-open="displayMenu" + v-bind:is-menu-open="displayMenu" > Suggestion importance[1-10]: 5 Why: The suggestion to use v-bind explicitly for the :is-menu-open attribute can improve code readability by making the data binding intention clearer. However, it does not change the functionality, so the impact is moderate.	5
	v-forで使用するキーをより一意にすることで、DOMの更新効率を向上させる。 v-forディレクティブを使用する際は、v-bind:keyに一意のキーを指定してください。これにより、Vue.jsがDOMを効率的に更新できるようになります。 src/pages/UserAccountEdit.vue [34-35] <li - v-for="account in me.accounts" - :key="account.id" + v-for="(account, index) in me.accounts" + :key="`account-${index}`" > Suggestion importance[1-10]: 5 Why: The suggestion to use a more unique key in the v-for directive is a good practice for ensuring efficient DOM updates. However, the existing code already uses account.id, which is likely unique. The improvement is marginal unless account.id is not unique.	5
	v-forのキーとしてより一意性が高い値を使用して、リストレンダリングの正確性を保証する。 v-forディレクティブ内で使用されるaccount.idが本当に一意であるか確認してください。アカウントIDが重複する可能性がある場合は、別の一意の属性をキーとして使用することを検討してください。 src/pages/UserAccounts.vue [34-35] <li - v-for="account in me.accounts" - :key="account.id" + v-for="(account, index) in me.accounts" + :key="`account-${account.id}-${index}`" > Suggestion importance[1-10]: 5 Why: The suggestion to ensure the uniqueness of the v-for key is valid, especially if account.id might not be unique. However, if account.id is guaranteed to be unique, the improvement is unnecessary. The suggestion is context-dependent.	5
Performance	パフォーマンスの向上とテンプレートの複雑さの削減。 v-forディレクティブ内で使用されているeventLevelsオブジェクトのエントリをループする際、Object.entriesメソッドの結果をコンポーネントの計算プロパティとして定義し、テンプレートで直接参照することを検討してください。これにより、テンプレートの複雑さが減少し、パフォーマンスが向上します。 src/components/Events/EventLevelMenu.vue [17-20] <div - v-for="[level, detail] in Object.entries(eventLevels)" + v-for="[level, detail] in eventLevelEntries" :key="level" > Suggestion importance[1-10]: 6 Why: Defining Object.entries(eventLevels) as a computed property can reduce template complexity and potentially improve performance. This is a good practice for cleaner code, though the performance gain might be minimal.	6

[nokhnaton]

良さそう!