裂開！WebStorm 把我心態搞炸了
今天被 webStorm 把我心態搞炸了。
情況是這樣的，我發現 webStorm 的 JSX 粘貼進來一段代碼，他就會自動把我以前的代碼格式化掉。表現如下:
然后呢，我就非常不想要這個自動格式化的功能。所以就想著在哪里配置一下，把這個自動格式化的功能給禁用掉。
結果，就為了這么個破玩意兒，浪費了整整兩個小時。試了好多種方式，都沒有用！！！
比如這種，Setting -> Editor -> General -> Smart Keys，然后把 Reformat on paste 設置為 None。
最后才找到是這個破玩意兒在這里配置的。
使用 webStorm 已經大半年了，整體使用下來的感受就是，這個破玩意兒的配置成本真的太高了。每次搞配置都要搞好久好久。有的配置找半天也找不到在哪里搞的，垃圾 webStorm！心態已炸！！！
上面是純吐槽部分，這篇文章其實主要是跟大家分享一下如何在 Next.js 中引入 shadcn/ui 這個組件庫。
下圖是本文案例中，利用 shadcn/ui 實現 dark 模式切換的效果。
一、shadcn/ui 介紹
shadcn/ui 是最近幾年爆火的一個 UI 組件庫。如圖所示，他的 star 已經達到了 74.5K，這里最關鍵的是，去年的這個時候，他只有大概 35K 左右。一年時間漲了接近一倍。
這個流行速度，表示 shadcn/ui 正在快速被很多人接受。因此，我也很想去試試這個組件庫。就在新的項目中引入了。使用下來的整體感受就是，這個 UI 組件庫的上手陳本，遠比我想象中的要高。 雖然說，用熟練了之后他確實很好用，不過這個上手成本與反常的不適應感，我估計也勸退了一些想要嘗試他的小伙伴。
因此，我就專門寫一篇文章，給大家分享一下 shadcn/ui 的一些關鍵點。
嚴格上來說，shadcn/ui 并不是一個組件庫。因為我們可以只復制其中的某一個組件到代碼里，單獨使用這個一個組件。
shadcn/ui 建立在 RadixUI + Tailwincss 之上。目前支持 Next.js、Gatsby、Vite、Remix、Astro、Laravel、Manual。由于他是來自于 vercel 成員 shadcn 的開源作品，因此目前在 Next.js 應用是最廣泛的。
?
因此，shadcn/ui 的快速發展，也意味著 Next.js 的發展速度非常之快。特別是最近兩年的增量發展都聚焦在出海項目上，也促進了 Next.js 和 shadcn/ui 的火爆
二、怪異的引入方式
由于 shadcn/ui 的樣式，與 tailwindcss 息息相關。因此，在使用 shadcn/ui 之前，你需要確保你有 tailwindcss 的使用經驗，這樣才能更好的理解和使用 shadcn/ui，否則，你在使用的過程中，會有比較強的不適應感。
在 Next.js 的項目中執行如下指令，可以準備好 shadcn/ui 的使用環境。在初始化之前，你需要確保你的項目中，已經準備好了 tailwindcss。
npx shadcn@latest initWhich style would you like to use? ? New York
Which color would you like to use as base color? ? Zinc
Do you want to use CSS variables for colors? ? no / yes安裝的過程中，我們需要選擇樣式風格 New York，以及主題色。最后是否選擇使用 css 變量，選擇 yes。
我們可以在自定義主題的面板中，觀察主題色的樣式，例如 Zinc 的風格以黑白色為主。如下所示。
你也可以選擇玫瑰紅 rose。
如果我們執行如下執行，則可以直接基于默認選擇結果 New York Zinc Yes 來初始化執行環境。
npx shadcn@latest init -d這里需要特別注意的是，實際上初始環境的準備，就是在添加 tailwindcss 和組件相關的配置。因此執行這條指令之后，會對本地的一些配置文件進行一些更改。
首先是新增了 components.json。里面記錄了 shadcn/ui 相關的配置項，例如，是否支持 RSC，以及組件的別名配置。
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "src/app/globals.css",
"baseColor": "zinc",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}然后是在 tailwind.config.ts 中，修改了主題配色，由于我這里選擇了基于 css 變量來實現主題切換，因此這里的配置主要是以配置 colors 為主。
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
}
}除此之外，他還會在 globals.css 中，新增一些樣式配置。這里主要是把 shadcn/ui 中所使用的 css 變量定義好。如果我們想要修改主題，就可以直接在這里修改就可以了。
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}官方文檔提供了主題變換的操作面板。
配置好之后，可以點擊 Copy code 來把調整之后的主題代碼復制到這里來替換掉即可。
此時，我們還無法直接使用組件，每使用一個組件，我們都得單獨執行如下指令把對應的組件代碼代碼復制到項目中，才可以使用。
npx shadcn@latest add button執行這條指令之后，我們會發現項目中的 src/components/ui 目錄下，多出來一個 button.tsx 組件。
之后，結合剛才默認的別名配置，我們就可以在其他組件中，使用如下方式，按照官方文檔的用法，使用 Button 組件。
import { Button } from "@/components/ui/button"<Button variant="outline">Button</Button>通過這個引入方式的介紹，我們就能很明顯的感受到，shadcn/ui 的使用前置知識比較多，并不是像 antd 那樣拿來即用。如果我們對 css 變量和 tailwindcss 不熟悉的話，可能還對這些前置知識不太理解。
三、實現 dark 模式切換
我們直接使用 next-themes 來實現 dark 模式。首先在項目中引入它。
yarn add next-themes然后，我們需要單獨創建一個頂層的 Provider 組件來控制切換的邏輯。
components/theme-provider.tsx。
由于這些邏輯必須在客戶端環境才能執行，因此前面要加上 use client。
"use client"
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
export function ThemeProvider({
children,
...props
}: React.ComponentProps<typeof NextThemesProvider>) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}然后我們就可以在項目根節點 app/layout.tsx 中，套一層我們剛才定義好的 Provider 組件。需要注意，這里直接是服務端組件，而不是客戶端組件。這也是我們需要單獨把 ThemeProvider 抽離出去的原因，是為了把客戶端邏輯單獨隔離出去，從而避免這個邏輯影響整個項目。
?
這里在 Next.js 中最重要，也是最常見的技巧。
import { ThemeProvider } from "@/components/theme-provider"
export default function RootLayout({ children }: RootLayoutProps) {
return (
<>
<html lang="en" suppressHydrationWarning>
<head />
<body>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
</>
)
}然后，我們單獨定義一個操作按鈕組件，該組件依賴于 Button 與 DropdownMenu，因此在定義之前，要單獨引入這兩個組件。
npx shadcn@latest add button
npx shadcn@latest add dropdown-menu完整代碼如下：
'use client';
import { useTheme } from "next-themes"
import {Button} from "@/components/ui/button"
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from '@/components/ui/dropdown-menu'
export default function ThemeToggleButton() {
const {setTheme} = useTheme()
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant='outline' size='icon'>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6 scale-100 rotate-0 dark:-rotate-90 dark:scale-0">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6 scale-0 rotate-90 dark:-rotate-90 dark:scale-100 absolute">
<path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
</svg>
<span className='sr-only'>Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem notallow={() => setTheme("light")}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"/>
</svg>
Light
</DropdownMenuItem>
<DropdownMenuItem notallow={() => setTheme("dark")}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
</svg>
Dark
</DropdownMenuItem>
<DropdownMenuItem notallow={() => setTheme("system")}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125Z" />
</svg>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}最終演示效果如下：
四、自定義樣式
有的時候，我們需要自定義樣式。這里需要注意的是，由于我們在項目中支持了 dark mode，因此，在這個基礎之上，我們并不能隨心所欲的使用 tailwindcss 的顏色，而是應該在剛才我們定義的主題色的基礎之上去使用。
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}例如，當我們配置背景色，就應該基于 tailwindcss 結合這里的自定義 css 變量使用。
<html className='bg-background'></html>如果你還想要擴展顏色，則需要在同樣的位置新增配置。擴展起來還是比較方便。
!
注意需要同時修改 globals.css 與 tailwind.config.ts
五、總結
和 antd 相比，shadcn/ui 的場景與需求覆蓋還略顯不足。antd 能夠滿足更加復雜多樣的需求。因此，在做選擇上，一定要根據自己的實際情況慎重考慮。
shadcn/ui 的使用成本主要體現在，需要在使用之前，對 tailwindcss 有足夠的了解。在使用過程中，需要經常跟相關的配置文件打交道。
shadcn/ui 的優勢在于，足夠的靈活。我們可以比較輕松的植入自己想要的樣式，也能夠直接修改組件源碼，擴展組件的基礎能力，他在定制與擴展上面，做到了一個比較好的平衡取舍，這也是他能火起來的主要原因之一。因此理論上來說，如果我們的技術能力足夠，我們可以直接覆蓋所有的復雜場景。但是這也要求開發者具備更強的開發能力。
shadcn/ui 也更容易擴展和集成其他的三方工具庫來充實自己的能力。但是由于國外的項目，交互相對與國內的產品而言，還是比較簡單。因此，如果使用 shadcn/ui 來開發國內的項目，可能會遇到許多比較難受的點
最后根據群友反饋，許多 AI 大模型都是基于 shadcn/ui 來訓練直接生成頁面，因此，在 AI 的準確度上來說，shadcn/ui 具備很強的優勢。
