学习前端 React 记录的一些目录

创建 vite + react + ts 前端项目

pnpm create vite ReactTs --template react-ts

• 安装 TailWind Css

TailWind Css v4地址： Installing Tailwind CSS with Vite - Tailwind CSS

# 新版本
pnpm add tailwindcss @tailwindcss/vite

# 老版本
pnpm add -D tailwindcss@3.4.1 postcss autoprefixer
pnpm exec tailwindcss init -p

设置 TailWind CSS 的 VS Code 环境

mkdir .vscode & touch .vscode/settings.json

# 添加以下内容
{
  "tailwindCSS.includeLanguages": {
    "css": "css",
    "scss": "scss",
    "less": "less",
    "typescript": "javascript",
    "typescriptreact": "html",
    "javascript": "javascript",
    "javascriptreact": "html"
  },
  "css.validate": false,
  "scss.validate": false,
  "less.validate": false
}

配置 ESLint + Prettier

Install · Prettier

• 安装环境

pnpm add -D eslint @eslint/js globals eslint-plugin-react-hooks eslint-plugin-react-refresh typescript typescript-eslint eslint-plugin-prettier prettier

# solidjs
pnpm add --save-dev eslint eslint-plugin-solid

• 在 eslint.config.js 中加入以下内容

import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";
import { globalIgnores } from "eslint/config";
import prettierPlugin from "eslint-plugin-prettier";

export default tseslint.config([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs["recommended-latest"],
      reactRefresh.configs.vite,
    ],
    plugins: {
      prettier: prettierPlugin,
    },
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    rules: {
      // Prettier 规则
      "prettier/prettier": [
        "error",
        {
          semi: true, // 自动加分号
          singleQuote: true, // 单引号
          trailingComma: "all", // 尾逗号
          tabWidth: 2, // 缩进 2 空格
          printWidth: 100, // 每行最大长度
        },
      ],
      // ESLint 规则覆盖
      semi: ["error", "always"],
    },
  },
]);

安装 React-Router V6

pnpm add react-router-dom@6

配置 Vite 项目别名

• 在 tsconfig.json 中添加如下内容

{
  "compilerOptions": {
    "baseUrl": ".", // 设置项目根目录为基础路径
    "paths": {
      "~/*": ["src/*"] // 用 ~ 代表 src
    },
    ...
  }
}

• 在 vite.config.ts 中添加如下内容

import path from 'path';
...
  resolve: {
    alias: {
      "~": path.resolve(__dirname, "src"),
    },
  },
...

• 如果 path 有红线, 进行安装

pnpm add @types/node

安装husky

开始 | Husky 中文网

pnpm add --save-dev husky