# blog

**Repository Path**: liufeida/blog

## Basic Information

- **Project Name**: blog
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-28
- **Last Updated**: 2025-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + TypeScript + Vite

## 1.启动项目
```bash
npm run dev

pnpm dev

pnpm start
```
## 2.格式化
```js
1. pnpm format

2. 安装依赖 (pnpm add -D ...)
  prettier
  prettier-plugin-organize-imports
  prettier-plugin-packagejson
  prettier-plugin-tailwindcss

3. 配置 .prettierrc.js
- 新版本 vite 在package.json 中加了 type = module,采用了ES模块，所以需要使用 export default 导出配置，而不是 module.exports = {} 导出配置。
  {
    ...,
   plugins: [
     'prettier-plugin-organize-imports',
     'prettier-plugin-packagejson',
     'prettier-plugin-tailwindcss',
   ],
  }
```
## 3.tailwindcss 配置
```js
1.安装依赖
 pnpm add -D tailwindcss @tailwindcss/vite

2.配置vite.config.js
 import { defineConfig } from 'vite'
 import tailwindcss from '@tailwindcss/vite'
 export default defineConfig({
  plugins: [
    ...,
    tailwindcss(),
  ],
 })

3.导入 css，v4 只需要导入这一个就行
 @import "tailwindcss";

4.tailwind.config.ts
好像不怎么用得到了，先保留着吧
```

## Expanding the ESLint configuration


```js
export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})
```