BLOG-19 Setting up prettier and sort the import order (#21)

### Description - Setup prettier for sort the import order - Apply re-ordering ### Package Changes - "@trivago/prettier-plugin-sort-imports": "^5.2.1" ### Screenshots _No response_ ### Reference Resolves #19 ### Checklist - [x] A milestone is set Reviewed-on: #21 Co-authored-by: SquidSpirit <squid@squidspirit.com> Co-committed-by: SquidSpirit <squid@squidspirit.com>
2025-01-18 15:13:15 +08:00 · 2025-01-18 15:13:15 +08:00 · bbfe40e521
commit bbfe40e521
parent 253c3e349a
11 changed files with 176 additions and 46 deletions
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@ -1,3 +1,11 @@
 {
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss", "@trivago/prettier-plugin-sort-imports"],
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "singleQuote": false,
+  "semi": true,
+  "importOrder": ["^[\\w-]+(/.*)?$", "^@[\\w-]+(/.*)?$", "^@/(app|lib)(/.*)?$", "^\\..*$"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }
--- a/frontend/package.json
+++ b/frontend/package.json
@ -23,6 +23,7 @@
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3.2.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.1",
    "@types/node": "^20.17.14",
    "@types/react": "^19.0.7",
    "@types/react-dom": "^19.0.3",
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@ -42,6 +42,9 @@ importers:
      '@eslint/eslintrc':
        specifier: ^3.2.0
        version: 3.2.0
+      '@trivago/prettier-plugin-sort-imports':
+        specifier: ^5.2.1
+        version: 5.2.1(prettier@3.4.2)
      '@types/node':
        specifier: ^20.17.14
        version: 20.17.14
@ -65,7 +68,7 @@ importers:
        version: 3.4.2
      prettier-plugin-tailwindcss:
        specifier: ^0.6.10
-        version: 0.6.10(prettier@3.4.2)
+        version: 0.6.10(@trivago/prettier-plugin-sort-imports@5.2.1(prettier@3.4.2))(prettier@3.4.2)
      tailwindcss:
        specifier: ^3.4.17
        version: 3.4.17
@ -79,6 +82,39 @@ packages:
    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
    engines: {node: '>=10'}

+  '@babel/code-frame@7.26.2':
+    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.26.5':
+    resolution: {integrity: sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.25.9':
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.26.5':
+    resolution: {integrity: sha512-SRJ4jYmXRqV1/Xc+TIVG84WjHBXKlxO9sHQnA2Pf12QQEAp1LOh6kDzNHXcUnbH1QI0FDoPPVOt+vyUDucxpaw==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/template@7.25.9':
+    resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.26.5':
+    resolution: {integrity: sha512-rkOSPOw+AXbgtwUga3U4u8RpoK9FEFWBNAlTpcnkLFjL5CT+oyHNuUUC/xx6XefEJ16r38r8Bc/lfp6rYuHeJQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.26.5':
+    resolution: {integrity: sha512-L6mZmwFDK6Cjh1nRCLXpa6no13ZIioJDz7mdkzHv399pThrTa/k0nUlNaenOeh2kWu/iaOQYElEpKPUswUa9Vg==}
+    engines: {node: '>=6.9.0'}
+
  '@emnapi/runtime@1.3.1':
    resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}

@ -386,6 +422,22 @@ packages:
  '@swc/helpers@0.5.15':
    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}

+  '@trivago/prettier-plugin-sort-imports@5.2.1':
+    resolution: {integrity: sha512-NDZndt0fmVThIx/8cExuJHLZagUVzfGCoVrwH9x6aZvwfBdkrDFTYujecek6X2WpG4uUFsVaPg5+aNQPSyjcmw==}
+    engines: {node: '>18.12'}
+    peerDependencies:
+      '@vue/compiler-sfc': 3.x
+      prettier: 2.x - 3.x
+      prettier-plugin-svelte: 3.x
+      svelte: 4.x || 5.x
+    peerDependenciesMeta:
+      '@vue/compiler-sfc':
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      svelte:
+        optional: true
+
  '@types/estree@1.0.6':
    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}

@ -950,6 +1002,10 @@ packages:
    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
    hasBin: true

+  globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+
  globals@14.0.0:
    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
    engines: {node: '>=18'}
@ -1137,6 +1193,9 @@ packages:
  jackspeak@3.4.3:
    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}

+  javascript-natural-sort@0.7.1:
+    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
+
  jiti@1.21.7:
    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
    hasBin: true
@ -1148,6 +1207,11 @@ packages:
    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
    hasBin: true

+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
  json-buffer@3.0.1:
    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}

@ -1193,6 +1257,9 @@ packages:
  lodash.merge@4.6.2:
    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}

+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
  loose-envify@1.4.0:
    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
    hasBin: true
@ -1829,6 +1896,51 @@ snapshots:

  '@alloc/quick-lru@5.2.0': {}

+  '@babel/code-frame@7.26.2':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.25.9
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/generator@7.26.5':
+    dependencies:
+      '@babel/parser': 7.26.5
+      '@babel/types': 7.26.5
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+      jsesc: 3.1.0
+
+  '@babel/helper-string-parser@7.25.9': {}
+
+  '@babel/helper-validator-identifier@7.25.9': {}
+
+  '@babel/parser@7.26.5':
+    dependencies:
+      '@babel/types': 7.26.5
+
+  '@babel/template@7.25.9':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/parser': 7.26.5
+      '@babel/types': 7.26.5
+
+  '@babel/traverse@7.26.5':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.5
+      '@babel/parser': 7.26.5
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.5
+      debug: 4.4.0
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.26.5':
+    dependencies:
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+
  '@emnapi/runtime@1.3.1':
    dependencies:
      tslib: 2.8.1
@ -2081,6 +2193,18 @@ snapshots:
    dependencies:
      tslib: 2.8.1

+  '@trivago/prettier-plugin-sort-imports@5.2.1(prettier@3.4.2)':
+    dependencies:
+      '@babel/generator': 7.26.5
+      '@babel/parser': 7.26.5
+      '@babel/traverse': 7.26.5
+      '@babel/types': 7.26.5
+      javascript-natural-sort: 0.7.1
+      lodash: 4.17.21
+      prettier: 3.4.2
+    transitivePeerDependencies:
+      - supports-color
+
  '@types/estree@1.0.6': {}

  '@types/json-schema@7.0.15': {}
@ -2866,6 +2990,8 @@ snapshots:
      package-json-from-dist: 1.0.1
      path-scurry: 1.11.1

+  globals@11.12.0: {}
+
  globals@14.0.0: {}

  globalthis@1.0.4:
@ -3054,6 +3180,8 @@ snapshots:
    optionalDependencies:
      '@pkgjs/parseargs': 0.11.0

+  javascript-natural-sort@0.7.1: {}
+
  jiti@1.21.7: {}

  js-tokens@4.0.0: {}
@ -3062,6 +3190,8 @@ snapshots:
    dependencies:
      argparse: 2.0.1

+  jsesc@3.1.0: {}
+
  json-buffer@3.0.1: {}

  json-schema-traverse@0.4.1: {}
@ -3104,6 +3234,8 @@ snapshots:

  lodash.merge@4.6.2: {}

+  lodash@4.17.21: {}
+
  loose-envify@1.4.0:
    dependencies:
      js-tokens: 4.0.0
@ -3308,9 +3440,11 @@ snapshots:

  prelude-ls@1.2.1: {}

-  prettier-plugin-tailwindcss@0.6.10(prettier@3.4.2):
+  prettier-plugin-tailwindcss@0.6.10(@trivago/prettier-plugin-sort-imports@5.2.1(prettier@3.4.2))(prettier@3.4.2):
    dependencies:
      prettier: 3.4.2
+    optionalDependencies:
+      '@trivago/prettier-plugin-sort-imports': 5.2.1(prettier@3.4.2)

  prettier@3.4.2: {}

--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@ -1,8 +1,10 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "./globals.css";
-import Navbar from "@/lib/common/presenter/ui/Navbar";
+
 import Footer from "@/lib/common/presenter/ui/Footer";
+import Navbar from "@/lib/common/presenter/ui/Navbar";
+
+import "./globals.css";

 const inter = Inter({
  subsets: ["latin"],
@ -21,11 +23,11 @@ export default function RootLayout({
  return (
    <html lang="zh-Hant">
      <body className={`${inter.className} antialiased`}>
-          <div className="min-h-screen">
-            <Navbar />
-            {children}
-          </div>
-          <Footer />
+        <div className="min-h-screen">
+          <Navbar />
+          {children}
+        </div>
+        <Footer />
      </body>
    </html>
  );
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@ -3,9 +3,7 @@ import SelfTags from "@/lib/home/framework/ui/SelfTags";
 export default function HomePage() {
  return (
    <div className="mx-auto flex min-h-[--content-height] max-w-screen-xl flex-col justify-center gap-y-2.5 px-4 md:gap-y-8 md:px-6">
-      <h2 className="text-3xl font-bold text-gray-800 md:text-6xl">
-        Hello 大家好！
-      </h2>
+      <h2 className="text-3xl font-bold text-gray-800 md:text-6xl">Hello 大家好！</h2>
      <h1 className="flex flex-row items-center gap-x-2 text-4xl font-bold text-gray-800 md:text-7xl">
        <span>我是</span>
        <div className="rounded-lg bg-blue-600 px-1.5 py-1">
--- a/frontend/src/lib/common/presenter/ui/Footer.tsx
+++ b/frontend/src/lib/common/presenter/ui/Footer.tsx
@ -1,7 +1,8 @@
+import Link from "next/link";
+
 import { faGitAlt, faYoutube } from "@fortawesome/free-brands-svg-icons";
 import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import Link from "next/link";

 export default function Footer() {
  return (
@ -9,25 +10,13 @@ export default function Footer() {
      <div className="mx-auto flex max-w-screen-xl flex-col items-center justify-center gap-4 px-4 py-12 md:flex-row md:px-6">
        <div className="flex flex-row items-center justify-center gap-x-4">
          <Link href="https://www.youtube.com/@squidspirit16" target="_blank">
-            <FontAwesomeIcon
-              className="size-4"
-              icon={faYoutube}
-              title="YouTube Channel"
-            />
+            <FontAwesomeIcon className="size-4" icon={faYoutube} title="YouTube Channel" />
          </Link>
          <Link href="mailto:squid@squidspirit.com">
-            <FontAwesomeIcon
-              className="size-4"
-              icon={faEnvelope}
-              title="Email"
-            />
+            <FontAwesomeIcon className="size-4" icon={faEnvelope} title="Email" />
          </Link>
          <Link href="https://git.squidspirit.com/squid/blog" target="_blank">
-            <FontAwesomeIcon
-              className="size-4"
-              icon={faGitAlt}
-              title="Git Repository"
-            />
+            <FontAwesomeIcon className="size-4" icon={faGitAlt} title="Git Repository" />
          </Link>
        </div>
        <Devider className="max-md:hidden" />
--- a/frontend/src/lib/common/presenter/ui/Navbar.tsx
+++ b/frontend/src/lib/common/presenter/ui/Navbar.tsx
@ -17,13 +17,8 @@ export default function Navbar() {

 function Action(props: { label: string; link: string; isSelected: boolean }) {
  return (
-    <div
-      className={`rounded px-1.5 ${props.isSelected ? "bg-blue-600" : "bg-transparent"}`}
-    >
-      <Link
-        className={`font-extrabold ${props.isSelected ? "text-white" : "text-gray-800"}`}
-        href={props.link}
-      >
+    <div className={`rounded px-1.5 ${props.isSelected ? "bg-blue-600" : "bg-transparent"}`}>
+      <Link className={`font-extrabold ${props.isSelected ? "text-white" : "text-gray-800"}`} href={props.link}>
        {props.label}
      </Link>
    </div>
--- a/frontend/src/lib/home/framework/ui/SelfTags.tsx
+++ b/frontend/src/lib/home/framework/ui/SelfTags.tsx
@ -1,10 +1,11 @@
 "use client";

-import { Provider } from "react-redux";
-import tagStore from "../../presenter/tagStore";
-import { useTagDispatch, useTagSelector } from "../../presenter/tagHooks";
 import { useEffect, useState } from "react";
-import { tagStartedAction, tagStoppedAction } from "../../presenter/tagSlice";
+import { Provider } from "react-redux";
+
+import { useTagDispatch, useTagSelector } from "@/lib/home/presenter/tagHooks";
+import { tagStartedAction, tagStoppedAction } from "@/lib/home/presenter/tagSlice";
+import tagStore from "@/lib/home/presenter/tagStore";

 export default function SelfTags() {
  return (
--- a/frontend/src/lib/home/presenter/tagHooks.ts
+++ b/frontend/src/lib/home/presenter/tagHooks.ts
@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from "react-redux";
-import tagStore from "./tagStore";
+
+import tagStore from "@/lib/home/presenter/tagStore";

 export const useTagDispatch = useDispatch.withTypes<typeof tagStore.dispatch>();
-export const useTagSelector =
-  useSelector.withTypes<ReturnType<typeof tagStore.getState>>();
+export const useTagSelector = useSelector.withTypes<ReturnType<typeof tagStore.getState>>();
--- a/frontend/src/lib/home/presenter/tagSlice.ts
+++ b/frontend/src/lib/home/presenter/tagSlice.ts
@ -1,5 +1,6 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import tagStore from "./tagStore";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+
+import tagStore from "@/lib/home/presenter/tagStore";
 import shuffleArray from "@/lib/util/shuffleArray";

 export interface TagState {
--- a/frontend/src/lib/home/presenter/tagStore.ts
+++ b/frontend/src/lib/home/presenter/tagStore.ts
@ -1,5 +1,6 @@
 import { configureStore } from "@reduxjs/toolkit";
-import tagReducer from "./tagSlice";
+
+import tagReducer from "@/lib/home/presenter/tagSlice";

 const tagStore = configureStore({
  reducer: {