增加prettier来格式化代码

buyfakett · Jan 6, 2025 · c808a58 · c808a58
1 parent 15b8528
commit c808a58
Show file tree

Hide file tree

Showing 29 changed files with 546 additions and 525 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+node_modules/**
+dist/**
+.DS_Store
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,12 @@
+module.exports = {
+    tabWidth: 4, // 每个缩进的空格数为4个
+    semi: true, // 语句末尾加分号
+    singleQuote: true, // 使用单引号（'）而不是双引号（"）
+    arrowParens: 'always', // 在箭头函数参数中始终加圆括号，即使参数只有一个
+    quoteProps: 'as-needed', // 对象的属性名只有在必要时才使用引号
+    printWidth: 80, // 每行的最大字符数为80，超出会自动换行
+    trailingComma: 'all', // 不在对象、数组的最后一个元素后添加逗号
+    bracketSameLine: true, // JSX 中的闭合标签与最后一个属性保持在同一行
+    jsxBracketSameLine: false, // JSX 元素的闭合标签放在同一行（仅限于多行元素）
+    bracketSpacing: true,  // 让花括号内有空格
+};
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     }
   },
   "devDependencies": {
+    "prettier": "3.4.2",
     "react-scripts": "^5.0.1",
     "react-snap": "^1.23.0",
     "typescript": "^4.9.5"

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,18 +1,18 @@
-import React, {useEffect, useState} from "react";
-import {Routes, Route} from "react-router-dom";
-import Footer from "./components/Footer";
-import NavBar from "./components/NavBar";
-import AboutMe from "./components/AboutMe";
-import * as Config from "./config"
-import {waka_timeDefaultData} from "./default_data/waka_time"
-import {buildInfo} from "./default_data/buildInfo"
-import Tools from "./components/Tools";
-import Urls from "./components/Urls";
-import NotFound from "./404";
-import Pictures from "./components/Pictures";
-import Watermark from "@hi-ui/watermark"
-import BackToTop from "./components/BackToTop";
-import {Helmet} from "react-helmet";
+import React, { useEffect, useState } from 'react';
+import { Route, Routes } from 'react-router-dom';
+import Footer from './components/Footer';
+import NavBar from './components/NavBar';
+import AboutMe from './components/AboutMe';
+import * as Config from './config';
+import { waka_timeDefaultData } from './default_data/waka_time';
+import { buildInfo } from './default_data/buildInfo';
+import Tools from './components/Tools';
+import Urls from './components/Urls';
+import NotFound from './404';
+import Pictures from './components/Pictures';
+import Watermark from '@hi-ui/watermark';
+import BackToTop from './components/BackToTop';
+import { Helmet } from 'react-helmet';
 
 const App = () => {
     // semi-design的主题默认为暗色
@@ -25,9 +25,9 @@ const App = () => {
 
     useEffect(() => {
         // 动态设置 Favicon
-        const link = document.createElement("link");
-        link.rel = "icon";
-        link.type = "image/x-icon";
+        const link = document.createElement('link');
+        link.rel = 'icon';
+        link.type = 'image/x-icon';
         link.href = Config.imgUrl.headPortrait;
         document.head.appendChild(link);
 
@@ -56,11 +56,11 @@ const App = () => {
             {isProduction && (
                 <Helmet>
                     {/* 动态注入构建信息到 <head> */}
-                    <meta name="git-hash" content={buildInfo.gitHash}/>
-                    <meta name="git-branch" content={buildInfo.gitBranch}/>
-                    <meta name="commit-date" content={buildInfo.commitDate}/>
-                    <meta name="commit-count" content={buildInfo.commitCount}/>
-                    <meta name="build-time" content={buildInfo.buildTime}/>
+                    <meta name="git-hash" content={buildInfo.gitHash} />
+                    <meta name="git-branch" content={buildInfo.gitBranch} />
+                    <meta name="commit-date" content={buildInfo.commitDate} />
+                    <meta name="commit-count" content={buildInfo.commitCount} />
+                    <meta name="build-time" content={buildInfo.buildTime} />
                     {/*umami*/}
                     <script
                         src={Config.umamiScript}
@@ -70,25 +70,24 @@ const App = () => {
                 </Helmet>
             )}
             <div className="bg-gray-900 text-gray-300">
-                <Watermark
-                    content={[Config.myName, Config.skipUrl.aboutMe]}
-                >
-                    <NavBar/>
+                <Watermark content={[Config.myName, Config.skipUrl.aboutMe]}>
+                    <NavBar />
 
                     <Routes>
-                        <Route path="/" element={<AboutMe wakatimeData={wakatimeData}/>}/>
-                        <Route path="/tools" element={<Tools/>}/>
-                        <Route path="/urls" element={<Urls/>}/>
-                        <Route path="/pictures" element={<Pictures/>}/>
-                        <Route path="*" element={<NotFound/>}/>
+                        <Route
+                            path="/"
+                            element={<AboutMe wakatimeData={wakatimeData} />}
+                        />
+                        <Route path="/tools" element={<Tools />} />
+                        <Route path="/urls" element={<Urls />} />
+                        <Route path="/pictures" element={<Pictures />} />
+                        <Route path="*" element={<NotFound />} />
                     </Routes>
 
-                    <Footer
-                        buildInfo={buildInfo}
-                    />
+                    <Footer buildInfo={buildInfo} />
 
                     {/*返回顶部*/}
-                    <BackToTop/>
+                    <BackToTop />
                 </Watermark>
             </div>
         </>

diff --git a/src/components/AboutMe/HeadPortrait.jsx b/src/components/AboutMe/HeadPortrait.jsx
@@ -1,25 +1,23 @@
-import React from "react";
-import {HeadPortraitCircle} from "../magicui/HeadPortraitCircle";
-import {motion} from "framer-motion";
-import {imgUrl} from "../../config";
-
+import React from 'react';
+import { HeadPortraitCircle } from '../magicui/HeadPortraitCircle';
+import { motion } from 'framer-motion';
+import { imgUrl } from '../../config';
 
 const HeadPortrait = () => {
     return (
         <motion.div
             className="dark:bg-gray-900 dark:text-gray-300"
-            initial={{opacity: 0, scale: 0.9}}
-            animate={{opacity: 1, scale: 1}}
-            transition={{duration: 0.3, delay: 0.5}}
-        >
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.5 }}>
             <HeadPortraitCircle>
                 <img
                     className="w-32 h-32 rounded-full object-cover"
                     src={imgUrl.headPortrait}
-                    alt=""/>
+                    alt=""
+                />
             </HeadPortraitCircle>
         </motion.div>
-
     );
 };
 

diff --git a/src/components/AboutMe/LanguageSection.jsx b/src/components/AboutMe/LanguageSection.jsx
@@ -1,20 +1,20 @@
-import React from "react";
-import {motion} from "framer-motion";
-import clsx from "clsx";
-import {NumberTicker} from "../magicui/NumberTicker";
-import {TypingAnimation} from "../magicui/TypingAnimation";
-import SkillSection from "./SkillSection";
-import {languageSkillData} from "../../config";
+import React from 'react';
+import { motion } from 'framer-motion';
+import clsx from 'clsx';
+import { NumberTicker } from '../magicui/NumberTicker';
+import { TypingAnimation } from '../magicui/TypingAnimation';
+import SkillSection from './SkillSection';
+import { languageSkillData } from '../../config';
 
-const LanguageSection = ({start_time, languages, update_time}) => {
+const LanguageSection = ({ start_time, languages, update_time }) => {
     return (
         <>
             {/* 文字介绍 */}
             <div className="text-center mb-8 h-[70px]">
                 <TypingAnimation
                     text={[
                         "Hi ! I'm a full stack engineer,my job position is ops",
-                        "My MBTI type is INFJ-T."
+                        'My MBTI type is INFJ-T.',
                     ].join('\n')}
                     duration={20}
                     className="text-lg"
@@ -23,7 +23,7 @@ const LanguageSection = ({start_time, languages, update_time}) => {
 
             {/* 技能展示 */}
             <div className="w-full max-w-xl md:mt-0.5 mt-18">
-                <SkillSection sections={languageSkillData}/>
+                <SkillSection sections={languageSkillData} />
             </div>
 
             {/* 语言使用时间排行榜 */}
@@ -33,35 +33,33 @@ const LanguageSection = ({start_time, languages, update_time}) => {
                     href="https://wakatime.com/dashboard"
                     target="_blank"
                     rel="wakatime"
-                    className="text-gray-500 text-sm hover:text-gray-700"
-                >
+                    className="text-gray-500 text-sm hover:text-gray-700">
                     data statistics form {start_time}
-                    <br/>
+                    <br />
                     last update at {update_time}
                 </a>
                 <div className="space-y-4 mt-4">
                     {languages.map((lang, index) => (
                         <motion.div
                             key={lang.name}
                             className="w-full bg-gray-800 rounded-lg overflow-hidden"
-                            initial={{opacity: 0, scale: 0.9}}
-                            animate={{opacity: 1, scale: 1}}
-                            transition={{duration: 0.5, delay: index * 0.2}}
-                        >
+                            initial={{ opacity: 0, scale: 0.9 }}
+                            animate={{ opacity: 1, scale: 1 }}
+                            transition={{ duration: 0.5, delay: index * 0.2 }}>
                             <div
                                 className={clsx(
-                                    "h-9 flex items-center px-0.1 text-sm font-medium",
-                                    lang.color
+                                    'h-9 flex items-center px-0.1 text-sm font-medium',
+                                    lang.color,
                                 )}
-                                style={{width: `${lang.percentage}%`}}
-                            >
+                                style={{ width: `${lang.percentage}%` }}>
                                 &nbsp;&nbsp;
                                 {lang.name}
                                 &nbsp;&nbsp;
                                 <NumberTicker
                                     value={lang.percentage}
                                     decimalPlaces={2}
-                                />%
+                                />
+                                %
                             </div>
                         </motion.div>
                     ))}

diff --git a/src/components/AboutMe/ProjectCard.jsx b/src/components/AboutMe/ProjectCard.jsx
@@ -1,23 +1,25 @@
-import React from "react";
-import {Card, Avatar} from "@douyinfe/semi-ui";
-import {imgUrl} from "../../config";
+import React from 'react';
+import { Avatar, Card } from '@douyinfe/semi-ui';
+import { imgUrl } from '../../config';
 
-const ProjectCard = ({data}) => {
-    const {Meta} = Card;
+const ProjectCard = ({ data }) => {
+    const { Meta } = Card;
 
     return (
         <Card
-            style={{width: "100%"}}
+            style={{ width: '100%' }}
             className="cursor-pointer"
             title={
                 <Meta
                     title={data.title}
-                    description={data.description ? data.description : ""}
+                    description={data.description ? data.description : ''}
                     avatar={
                         <Avatar
                             alt={data.title}
                             size="default"
-                            src={data.avatar ? data.avatar : imgUrl.headPortrait}
+                            src={
+                                data.avatar ? data.avatar : imgUrl.headPortrait
+                            }
                         />
                     }
                 />
@@ -36,9 +38,10 @@ const ProjectCard = ({data}) => {
             //         </div>
             //     )
             // }
-            onClick={data.src ? () => window.open(data.src, "_blank") : undefined}
-        >
-            {data.full_description ? data.full_description : ""}
+            onClick={
+                data.src ? () => window.open(data.src, '_blank') : undefined
+            }>
+            {data.full_description ? data.full_description : ''}
         </Card>
     );
 };

diff --git a/src/components/AboutMe/Projects.jsx b/src/components/AboutMe/Projects.jsx
@@ -1,17 +1,16 @@
-import React from "react";
-import ProjectCard from "./ProjectCard";
-import {motion} from "framer-motion";
-import {projectData} from "../../config";
+import React from 'react';
+import ProjectCard from './ProjectCard';
+import { motion } from 'framer-motion';
+import { projectData } from '../../config';
 
 const Projects = () => {
     return (
         <div className="dark:bg-gray-900 dark:text-gray-300">
             <motion.div
                 className="w-full max-w-screen-lg mx-auto flex flex-col items-center mt-20 px-4"
-                initial={{opacity: 0, y: 50}}
-                animate={{opacity: 1, y: 0}}
-                transition={{duration: 1}}
-            >
+                initial={{ opacity: 0, y: 50 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 1 }}>
                 <h1 className="text-2xl md:text-4xl font-bold mb-4 text-center">
                     Projects
                 </h1>
@@ -21,25 +20,21 @@ const Projects = () => {
             <div
                 className={`mt-10 grid gap-4 ${
                     projectData.length === 1
-                        ? "grid-cols-1 place-items-center"
+                        ? 'grid-cols-1 place-items-center'
                         : projectData.length === 2
-                            ? "grid-cols-2 justify-center"
-                            // : projectData.length === 3
+                          ? 'grid-cols-2 justify-center'
+                          : // : projectData.length === 3
                             //     ? "grid-cols-3 justify-center"
-                                : "sm:grid-cols-1 md:grid-cols-3"
-                }`}
-            >
+                            'sm:grid-cols-1 md:grid-cols-3'
+                }`}>
                 {projectData.map((item, index) => (
                     <motion.div
-                        initial={{opacity: 0, scale: 0.9}}
-                        animate={{opacity: 1, scale: 1}}
-                        transition={{duration: 0.5, delay: index * 0.2}}
+                        initial={{ opacity: 0, scale: 0.9 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        transition={{ duration: 0.5, delay: index * 0.2 }}
                         key={index}
-                        className="mt-5"
-                    >
-                        <ProjectCard
-                            data={item}
-                        />
+                        className="mt-5">
+                        <ProjectCard data={item} />
                     </motion.div>
                 ))}
             </div>

diff --git a/src/components/AboutMe/SkillSection.jsx b/src/components/AboutMe/SkillSection.jsx
@@ -1,26 +1,24 @@
-import React from "react";
-import {motion} from "framer-motion";
+import React from 'react';
+import { motion } from 'framer-motion';
 
-const SkillSection = ({sections}) => {
+const SkillSection = ({ sections }) => {
     return (
         <section className="flex flex-col gap-y-5">
             {sections.map((section, index) => (
                 <motion.div
                     className="flex flex-col gap-y-3"
                     key={index}
-                    initial={{opacity: 0, scale: 0.9}}
-                    animate={{opacity: 1, scale: 1}}
-                    transition={{duration: 0.5, delay: index * 0.2}}
-                >
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.5, delay: index * 0.2 }}>
                     {/* 左侧标题 */}
                     <h3 className="font-medium text-lg">{section.title}</h3>
                     {/* 右侧按钮组 */}
                     <div className="flex flex-wrap gap-x-4 gap-y-2">
                         {section.items.map((item, idx) => (
                             <button
                                 key={idx}
-                                className="inline-flex items-center gap-x-1 bg-primary-foreground border border-border px-2 py-1 text-sm transition-all hover:bg-input cursor-default rounded-xl"
-                            >
+                                className="inline-flex items-center gap-x-1 bg-primary-foreground border border-border px-2 py-1 text-sm transition-all hover:bg-input cursor-default rounded-xl">
                                 <p>{item}</p>
                             </button>
                         ))}