conradzhangcong / one-day

One-Day

开发环境

• node 20.11.0
• pnpm 8.15.1

项目构建流程

使用vite初始化项目

pnpm create vite one-day --template react-ts

使用shadcn-ui初始化ui组件库

(1) 安装Tailwind并初始化

pnpm add -D tailwindcss postcss autoprefixer
pnpm dlx tailwindcss init -p

(2) 修改tsconfig.json

tsconfig.json文件中添加以下配置:

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
    // ...
  }
}

(3) 更新vite.config.ts 配置别名

pnpm install @types/node -D

// 引入path
import path from "path";

export default defineConfig({
  // ...
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  // ...
});

(4) 使用shadcn-ui脚手架生成配置

pnpm dlx shadcn-ui@latest init

✔ Would you like to use TypeScript (recommended)? … yes
✔ Which style would you like to use? › New York
✔ Which color would you like to use as base color? › Zinc
✔ Where is your global CSS file? … src/styles/global.css
✔ Would you like to use CSS variables for colors? … yes
✔ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) … tw-
✔ Where is your tailwind.config.js located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … no
✔ Write configuration to components.json. Proceed? … yes

增加stylelint

# 初始化stylelint
pnpm create stylelint

会自动安装stylelint和stylelint-config-standard, 并且生成.stylelintrc.json配置文件

rules配置参考stylelint官网

配置支持tailwindcss

rules中新增配置

export default {
  // ...
  rules: {
    // ...
    // tailwindcss
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
        ],
      },
    ],
    // ...
  },
};

公共方法

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list