在electron-vite使用ShadCN

集成tailwind

这一步较为简单，仅需按照官网步骤即可~
这里不再赘述！

稍微需要注意的是，你的集成配置都需要在 electron.vite.config.ts!

补全tsconfig.json

{
  // ...
  "compilerOptions": {
    "composite": true,
    "types": ["electron-vite/node"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/renderer/src/*"]
    }
  }
}

创建vite.config.ts

修改 electron.vite.config.ts， renderer>resolve>alias增加一行

export default defineConfig({
  main: {
    // ...
    resolve: {
      alias: {
        '@main': resolve('src/main'),
        '@': resolve('src'),
      },
    },
  },
  // ...
  renderer: {
    resolve: {
      alias: {
        // ...
        '@': resolve('src/renderer/src') // Add this line
      }
    }
  }
})

复制一份electron.vite.config.ts，并将其改为为 vite.config.ts!

安装shadcn

现在你可以正常执行安装步骤了

npx shadcn@latest init

# pnpm使用
pnpm dlx shadcn@latest init

初始化完成， vite.config.ts 就没作用并可以删除啦！

接着我们来使用一个插件来试试pnpm dlx shadcn@latest add button,在组件中使用它

import { Button } from "@renderer/components/ui/button"

export default function Demo() {
  return  <Button>Button</Button>
}

修复shadcn组件内部引用报错

在 electron.vite.config.ts文件中午论是任何进程，安全起见都加上跟路径的短连接配置，比如renderer进程中配置

export default defineConfig({
  // ...
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src'),
        '@': resolve('src'),
      },
    },
  },
});

另外在 tsconfig.json tsconfig.web.json tsconfig.node.json也都加上短连接配置

// tsconfig.json
"compilerOptions": {
    // ...
    "@/*": ["./src/*"]
  }
}

// tsconfig.web.json
"compilerOptions": {
  // ...
  "paths": {
    "@renderer/*": [
      "./src/renderer/src/*"
    ],
    "@/*": ["./src/*"]
  }
}

// tsconfig.node.json
"compilerOptions": {
  // ...
  "paths": {
    "@main/*": [
      "./src/main/*"
    ],
    "@/*": ["./src/*"]
  }
}

然后，在 components.json文件修改如下

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/renderer/src/assets/base.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": { // 这里改动
    "components": "@/renderer/src/components",
    "utils": "@/renderer/src/lib/utils",
    "ui": "@/renderer/src/components/ui",
    "lib": "@/renderer/src/lib",
    "hooks": "@/renderer/src/hooks"
  },
  "registries": {}
}

最后手动把 shadcn 初始化生成的文件移动至 src/renderer/src/lib 即可！

至此，你使用诸如 pnpm dlx shadcn@latest add button 安装的shadcn组件内才不会出现引用报错问题！

优化

eslint

注释掉 eslintConfigPrettie，关闭eslint中关于prettier的检查，我觉得prettier的都不重要，只要能右键格式化没毛病即可，没必要让编辑器提示。

另外 rules 把函数必须定义返回类型关闭，这个太严格了，否则react组件没定义返回类型都报错！

'@typescript-eslint/explicit-function-return-type': 'off',