traPtitech / traPortfolio-Dashboard

3 stars 0 forks source link

Fix/formatRule #386

Closed Pugma closed 1 month ago

Pugma commented 1 month ago

User description

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


PR Type

enhancement


Description


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[bot] commented 1 month ago

    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[bot] commented 1 month ago

    PR Code Suggestions ✨

    Explore these optional code suggestions:

    CategorySuggestion                                                                                                                                    Score
    Enhancement
    アイコン表示の条件を改善して、より堅牢なチェックを行う。 ___ **
    iconプロパティがundefinedでない場合にのみアイコンを表示する現在の条件を、iconの真偽値チェックに変更してください。これにより、nullや空文字列など、falsyな値がiconに設定されている場合にもアイコンが表示されないようになります。** [src/components/UI/FormInput.vue [39-42]](https://github.com/traPtitech/traPortfolio-Dashboard/pull/386/files#diff-eec0aca5bbfec1ce522c080b476d26ef7d7907d2a0c6a21512ba2c3f55520445R39-R42) ```diff
    ```
    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]](https://github.com/traPtitech/traPortfolio-Dashboard/pull/386/files#diff-6dd39e0ccbeb6480292f207d72db2c009a37026942f2c4a8082d94037f5e2494R100-R103) ```diff ```
    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]](https://github.com/traPtitech/traPortfolio-Dashboard/pull/386/files#diff-57cbe87a366fd650efaf12cfa87987c929a9e54ffd8888d8ecbee01dfcd335a6R77-R80) ```diff ```
    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]](https://github.com/traPtitech/traPortfolio-Dashboard/pull/386/files#diff-6dd39e0ccbeb6480292f207d72db2c009a37026942f2c4a8082d94037f5e2494R34-R35) ```diff
  • ```
    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]](https://github.com/traPtitech/traPortfolio-Dashboard/pull/386/files#diff-8fa659e3153dfa9e05cfc9887d7bce3d6fb7562066f065335a501f193c5e4c69R34-R35) ```diff
  • ```
    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]](https://github.com/traPtitech/traPortfolio-Dashboard/pull/386/files#diff-74e61f4aa7faa48a24b92e1e9ba7b3957eabab9bca0dfcb4517c89486ef821deR17-R20) ```diff
    ```
    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