vite 创建react hook项目

create-vite安装

create-vite 是一个用于快速搭建 Vite 项目的脚手架工具。你可以通过 npm（Node 包管理器）来安装它。通常情况下，你不需要单独安装 create-vite，因为你可以直接使用 npx（Node 包运行器）来运行它。npx 是 npm 5.2.0 版本及以上版本自带的一个工具，用于执行在本地或远程注册表中找到的包。

使用 npx 创建 Vite 项目

要使用 npx 创建一个新的 Vite 项目，你可以在终端中运行以下命令：

npx create-vite@latest my-react-app -- --template react-ts

这里，my-react-app 是你的项目名称，--template react-ts 表示你想要创建一个使用 React 和 TypeScript 的模板项目。

如果你仍然想全局安装 create-vite

虽然通常不需要全局安装 create-vite，但你也可以选择全局安装它，以便在任何地方都能使用 create-vite 命令。要全局安装 create-vite，你可以运行以下命令：

npm install -g create-vite

全局安装后，你可以直接在终端中使用 create-vite 命令来创建新项目：

create-vite my-react-app --template react-ts

总结

• 推荐方式：使用 npx 运行 create-vite，无需单独安装。
• 全局安装：如果你更喜欢全局安装，可以使用 npm install -g create-vite。

无论你选择哪种方式，都可以快速开始你的 Vite 项目。

创建react hook项目

下面是创建一个支持 React Hook、TypeScript、ESLint 和自动修复功能的 Vite 项目的完整步骤：

步骤 1：创建项目

首先，使用 npx 创建一个新的 Vite 项目，并选择 React + TypeScript 模板：

npx create-vite@latest my-react-app -- --template react-ts

步骤 2：进入项目目录

cd my-react-app

步骤 3：安装依赖

安装 ESLint、ESLint 插件、Prettier 和 Vite 插件：

npm install eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier vite-plugin-eslint vite-tsconfig-paths --save-dev

步骤 4：配置 ESLint

在项目根目录中创建一个 .eslintrc.js 文件，并添加以下内容：

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  env: {
    browser: true,
    node: true,
  },
  rules: {
    // 在这里添加自定义规则
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

步骤 5：配置 Prettier

在项目根目录中创建一个 .prettierrc 文件，并添加以下内容：

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 4
}

步骤 6：配置 Vite

在项目根目录中创建一个 vite.config.ts 文件，并添加以下内容：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import eslintPlugin from 'vite-plugin-eslint';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [
    react(),
    eslintPlugin({
      fix: true, // 启用 ESLint 自动修复
    }),
    tsconfigPaths(),
  ],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
  css: {
    modules: {
      generateScopedName: '[name]__[local]___[hash:base64:5]',
    },
  },
});

步骤 7：添加 npm 脚本

在 package.json 文件中添加以下脚本：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
  "format": "prettier --write ."
}

步骤 8：启动开发服务器

运行以下命令来启动开发服务器：

npm run dev

现在，你已经创建了一个支持 React Hook、TypeScript、ESLint 和自动修复功能的 Vite 项目。你可以使用 npm run lint 来运行 ESLint 检查，使用 npm run lint:fix 来自动修复 ESLint 问题，使用 npm run format 来格式化代码。开发服务器启动后，你可以在浏览器中访问 http://localhost:3000 来查看你的应用程序。