裂開！WebStorm 把我心態(tài)搞炸了
今天被 webStorm 把我心態(tài)搞炸了。
情況是這樣的，我發(fā)現(xiàn) webStorm 的 JSX 粘貼進(jìn)來一段代碼，他就會(huì)自動(dòng)把我以前的代碼格式化掉。表現(xiàn)如下:
然后呢，我就非常不想要這個(gè)自動(dòng)格式化的功能。所以就想著在哪里配置一下，把這個(gè)自動(dòng)格式化的功能給禁用掉。
結(jié)果，就為了這么個(gè)破玩意兒，浪費(fèi)了整整兩個(gè)小時(shí)。試了好多種方式，都沒有用?。?！
比如這種，Setting -> Editor -> General -> Smart Keys，然后把 Reformat on paste 設(shè)置為 None。
最后才找到是這個(gè)破玩意兒在這里配置的。
使用 webStorm 已經(jīng)大半年了，整體使用下來的感受就是，這個(gè)破玩意兒的配置成本真的太高了。每次搞配置都要搞好久好久。有的配置找半天也找不到在哪里搞的，垃圾 webStorm！心態(tài)已炸?。?！
上面是純吐槽部分，這篇文章其實(shí)主要是跟大家分享一下如何在 Next.js 中引入 shadcn/ui 這個(gè)組件庫。
下圖是本文案例中，利用 shadcn/ui 實(shí)現(xiàn) dark 模式切換的效果。
一、shadcn/ui 介紹
shadcn/ui 是最近幾年爆火的一個(gè) UI 組件庫。如圖所示，他的 star 已經(jīng)達(dá)到了 74.5K，這里最關(guān)鍵的是，去年的這個(gè)時(shí)候，他只有大概 35K 左右。一年時(shí)間漲了接近一倍。
這個(gè)流行速度，表示 shadcn/ui 正在快速被很多人接受。因此，我也很想去試試這個(gè)組件庫。就在新的項(xiàng)目中引入了。使用下來的整體感受就是，這個(gè) UI 組件庫的上手陳本，遠(yuǎn)比我想象中的要高。 雖然說，用熟練了之后他確實(shí)很好用，不過這個(gè)上手成本與反常的不適應(yīng)感，我估計(jì)也勸退了一些想要嘗試他的小伙伴。
因此，我就專門寫一篇文章，給大家分享一下 shadcn/ui 的一些關(guān)鍵點(diǎn)。
嚴(yán)格上來說，shadcn/ui 并不是一個(gè)組件庫。因?yàn)槲覀兛梢灾粡?fù)制其中的某一個(gè)組件到代碼里，單獨(dú)使用這個(gè)一個(gè)組件。
shadcn/ui 建立在 RadixUI + Tailwincss 之上。目前支持 Next.js、Gatsby、Vite、Remix、Astro、Laravel、Manual。由于他是來自于 vercel 成員 shadcn 的開源作品，因此目前在 Next.js 應(yīng)用是最廣泛的。
?
因此，shadcn/ui 的快速發(fā)展，也意味著 Next.js 的發(fā)展速度非常之快。特別是最近兩年的增量發(fā)展都聚焦在出海項(xiàng)目上，也促進(jìn)了 Next.js 和 shadcn/ui 的火爆
二、怪異的引入方式
由于 shadcn/ui 的樣式，與 tailwindcss 息息相關(guān)。因此，在使用 shadcn/ui 之前，你需要確保你有 tailwindcss 的使用經(jīng)驗(yàn)，這樣才能更好的理解和使用 shadcn/ui，否則，你在使用的過程中，會(huì)有比較強(qiáng)的不適應(yīng)感。
在 Next.js 的項(xiàng)目中執(zhí)行如下指令，可以準(zhǔn)備好 shadcn/ui 的使用環(huán)境。在初始化之前，你需要確保你的項(xiàng)目中，已經(jīng)準(zhǔn)備好了 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安裝的過程中，我們需要選擇樣式風(fēng)格 New York，以及主題色。最后是否選擇使用 css 變量，選擇 yes。
我們可以在自定義主題的面板中，觀察主題色的樣式，例如 Zinc 的風(fēng)格以黑白色為主。如下所示。
你也可以選擇玫瑰紅 rose。
如果我們執(zhí)行如下執(zhí)行，則可以直接基于默認(rèn)選擇結(jié)果 New York Zinc Yes 來初始化執(zhí)行環(huán)境。
npx shadcn@latest init -d這里需要特別注意的是，實(shí)際上初始環(huán)境的準(zhǔn)備，就是在添加 tailwindcss 和組件相關(guān)的配置。因此執(zhí)行這條指令之后，會(huì)對(duì)本地的一些配置文件進(jìn)行一些更改。
首先是新增了 components.json。里面記錄了 shadcn/ui 相關(guān)的配置項(xiàng)，例如，是否支持 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 變量來實(shí)現(xiàn)主題切換，因此這里的配置主要是以配置 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))'
}
}除此之外，他還會(huì)在 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%;
}
}官方文檔提供了主題變換的操作面板。
配置好之后，可以點(diǎn)擊 Copy code 來把調(diào)整之后的主題代碼復(fù)制到這里來替換掉即可。
此時(shí)，我們還無法直接使用組件，每使用一個(gè)組件，我們都得單獨(dú)執(zhí)行如下指令把對(duì)應(yīng)的組件代碼代碼復(fù)制到項(xiàng)目中，才可以使用。
npx shadcn@latest add button執(zhí)行這條指令之后，我們會(huì)發(fā)現(xiàn)項(xiàng)目中的 src/components/ui 目錄下，多出來一個(gè) button.tsx 組件。
之后，結(jié)合剛才默認(rèn)的別名配置，我們就可以在其他組件中，使用如下方式，按照官方文檔的用法，使用 Button 組件。
import { Button } from "@/components/ui/button"<Button variant="outline">Button</Button>通過這個(gè)引入方式的介紹，我們就能很明顯的感受到，shadcn/ui 的使用前置知識(shí)比較多，并不是像 antd 那樣拿來即用。如果我們對(duì) css 變量和 tailwindcss 不熟悉的話，可能還對(duì)這些前置知識(shí)不太理解。
三、實(shí)現(xiàn) dark 模式切換
我們直接使用 next-themes 來實(shí)現(xiàn) dark 模式。首先在項(xiàng)目中引入它。
yarn add next-themes然后，我們需要單獨(dú)創(chuàng)建一個(gè)頂層的 Provider 組件來控制切換的邏輯。
components/theme-provider.tsx。
由于這些邏輯必須在客戶端環(huán)境才能執(zhí)行，因此前面要加上 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>
}然后我們就可以在項(xiàng)目根節(jié)點(diǎn) app/layout.tsx 中，套一層我們剛才定義好的 Provider 組件。需要注意，這里直接是服務(wù)端組件，而不是客戶端組件。這也是我們需要單獨(dú)把 ThemeProvider 抽離出去的原因，是為了把客戶端邏輯單獨(dú)隔離出去，從而避免這個(gè)邏輯影響整個(gè)項(xiàng)目。
?
這里在 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>
</>
)
}然后，我們單獨(dú)定義一個(gè)操作按鈕組件，該組件依賴于 Button 與 DropdownMenu，因此在定義之前，要單獨(dú)引入這兩個(gè)組件。
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>
)
}最終演示效果如下：
四、自定義樣式
有的時(shí)候，我們需要自定義樣式。這里需要注意的是，由于我們?cè)陧?xiàng)目中支持了 dark mode，因此，在這個(gè)基礎(chǔ)之上，我們并不能隨心所欲的使用 tailwindcss 的顏色，而是應(yīng)該在剛才我們定義的主題色的基礎(chǔ)之上去使用。
@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%;
}
}例如，當(dāng)我們配置背景色，就應(yīng)該基于 tailwindcss 結(jié)合這里的自定義 css 變量使用。
<html className='bg-background'></html>如果你還想要擴(kuò)展顏色，則需要在同樣的位置新增配置。擴(kuò)展起來還是比較方便。
!
注意需要同時(shí)修改 globals.css 與 tailwind.config.ts
五、總結(jié)
和 antd 相比，shadcn/ui 的場(chǎng)景與需求覆蓋還略顯不足。antd 能夠滿足更加復(fù)雜多樣的需求。因此，在做選擇上，一定要根據(jù)自己的實(shí)際情況慎重考慮。
shadcn/ui 的使用成本主要體現(xiàn)在，需要在使用之前，對(duì) tailwindcss 有足夠的了解。在使用過程中，需要經(jīng)常跟相關(guān)的配置文件打交道。
shadcn/ui 的優(yōu)勢(shì)在于，足夠的靈活。我們可以比較輕松的植入自己想要的樣式，也能夠直接修改組件源碼，擴(kuò)展組件的基礎(chǔ)能力，他在定制與擴(kuò)展上面，做到了一個(gè)比較好的平衡取舍，這也是他能火起來的主要原因之一。因此理論上來說，如果我們的技術(shù)能力足夠，我們可以直接覆蓋所有的復(fù)雜場(chǎng)景。但是這也要求開發(fā)者具備更強(qiáng)的開發(fā)能力。
shadcn/ui 也更容易擴(kuò)展和集成其他的三方工具庫來充實(shí)自己的能力。但是由于國外的項(xiàng)目，交互相對(duì)與國內(nèi)的產(chǎn)品而言，還是比較簡單。因此，如果使用 shadcn/ui 來開發(fā)國內(nèi)的項(xiàng)目，可能會(huì)遇到許多比較難受的點(diǎn)
最后根據(jù)群友反饋，許多 AI 大模型都是基于 shadcn/ui 來訓(xùn)練直接生成頁面，因此，在 AI 的準(zhǔn)確度上來說，shadcn/ui 具備很強(qiáng)的優(yōu)勢(shì)。
