fe-stack

一个包含 Vite、Tailwind、Biome 和 TypeScript 配置的共享包，可以在多个项目中复用。

安装方法

在项目中安装：

pnpm add -D fe-stack

工具链开箱即用（batteries-included）

fe-stack 已将整套工具链（vite、@biomejs/biome、typescript、tailwindcss、@microsoft/api-extractor 等）作为自身 dependencies 一并携带，下游无需在 package.json 里单独安装这些工具，装好 fe-stack 即可直接运行 vite、biome、tsc 等 CLI。

⚠️ pnpm 用户必读：pnpm 默认采用严格 node_modules 布局，fe-stack 携带的传递依赖不会出现在你项目顶层的 node_modules/.bin，导致 vite / biome 等命令（以及 VS Code 的 Biome 扩展）无法找到对应二进制。请在项目根目录的 pnpm-workspace.yaml 中开启精准提升：

publicHoistPattern:
  - vite
  - '@biomejs/*'
  - typescript
  - tailwindcss
  - '@microsoft/api-extractor'

注意：

• pnpm 10+ 已不再从 .npmrc 读取 public-hoist-pattern，必须写在 pnpm-workspace.yaml 里，否则被忽略。
• 修改提升规则后需要重建 node_modules 才会生效：普通 pnpm install 可能提示 Already up to date 而不重链；若 pnpm 要求清除 node_modules 但无法交互确认，可用 CI=true pnpm install。
• npm / yarn 默认即会提升，无需此项配置。

使用方法

1. Biome 配置

在项目中创建 biome.json 继承：

{
  "extends": ["fe-stack/biome.json"]
}

2. 代码格式化（含 Vue）

格式化统一由 Biome 负责，不再需要 Prettier。Biome 通过实验性的 HTML 完整支持（html.experimentalFullSupportEnabled）直接格式化 .vue 文件（<script> / <template> / <style> 均覆盖），相关配置已内置在 fe-stack/biome.json 中，继承即可：

biome format --write .

注意：.vue 模板格式化依赖 Biome 的实验性 HTML 支持；模板属性内联表达式（如 @click="()=>{}"）暂不会被格式化。

3. Tailwind 配置

Tailwind v4 采用 CSS-first 配置，无需 tailwind.config.js。在入口 CSS 中引入即可：

@import "tailwindcss";

如需自定义主题，使用 @theme 指令：

@import "tailwindcss";

@theme {
  --color-brand: #1e40af;
}

Vite 项目通过 fe-stack/vite.config.base 已内置 @tailwindcss/vite 插件，开箱即用。

4. TypeScript 配置

tsconfig.json（Vue 应用）：

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

tsconfig.app.json：

{
  "extends": "fe-stack/tsconfig.app.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

tsconfig.node.json：

{
  "extends": "fe-stack/tsconfig.node.json",
  "include": ["vite.config.*"]
}

5. Vite 配置

Vue 应用模式

import { createBaseConfig } from 'fe-stack/vite.config.base';

export default createBaseConfig(import.meta.dirname, {
  viteConfig: {
    server: {
      port: 5173,
      proxy: {
        '/api': {
          target: 'http://your-api-server',
          changeOrigin: true,
        }
      }
    }
  }
});

Lib 打包模式

import { createBaseConfig } from 'fe-stack/vite.config.base';

export default createBaseConfig(import.meta.dirname, {
  mode: 'lib',
  dtsConfig: {
    // 自定义 vite-plugin-dts 配置
    exclude: ['**/*.test.ts', '**/*.spec.ts'],
    insertTypesEntry: true,
  },
  viteConfig: {
    build: {
      lib: {
        entry: './src/index.ts',
        name: 'MyLib',
        fileName: 'index',
      },
    },
  },
});

特性：

• ✅ 完整的 TypeScript 类型支持
• ✅ 使用 mergeConfig 优雅合并配置
• ✅ dtsConfig 直接配置 dts 插件选项
• ✅ lib 模式自动配置 vite-plugin-dts
• ✅ 默认打包为 ESM 格式