Vite6+React18+Ts项目-01.初始化项目及修改配置文件

01.版本说明

Node版本：22+

Vite版本：6+

React版本：18.3.1

02.创建Git仓库，并拉取项目

在git托管服务（如gitee，github或私有仓库）创建用于保存模板的仓库，并clone下来

03.获取适配React18的package.json文件

由于使用最新版的vite（2025-03-26）创建的react项目是基于react19的，因此我们可以通过查看vite模板仓库，找到之前的最后一个react18版本的模板，将其拷贝出来

地址：https://github.com/vitejs/vite.git

路径：packages\create-vite\template-react-ts

借助GitExt等工具，可以发现最后一个react18版本的commit id 提交于

Tue Jan 7 11:04:25 2025

8639538e6498d1109da583ad942c1472098b5919

运行以下命令，切换到该提交日期

git reset --hard 8639538e6498d1109da583ad942c1472098b5919

进入路径 packages\create-vite\template-react-ts 将文件拷贝出来，复制到第二步创建的Git仓库目录

此时的 package.json 文件内容如下：

{
  "name": "vite-react-typescript-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.17.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "globals": "^15.14.0",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.19.1",
    "vite": "^6.0.7"
  }
}

04.gitignore配置

将 _gitignore 文件修改为 .gitignore

文件内容如下：

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

05.tsconfig.app.json配置

修改后内容如下：

{
  "compilerOptions": {
    /* 是否编译构建引用项目  */
    "composite": true,
    /* 是否启用增量编译*/
    "incremental": true, 
    /* 指定文件用来存储增量编译信息 */
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    /* target用于指定编译之后的版本目标: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020' or 'ESNEXT'. */
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    /* 用来指定要使用的模块标准: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "module": "ESNext",
    "skipLibCheck": true,
    /* baseUrl用于设置解析非相对模块名称的基本目录，相对模块不会受baseUrl的影响 */
    "baseUrl": ".",
    /* 用于设置模块名称到基于baseUrl的路径映射 */
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    /* 用于选择模块解析策略 */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    /* 指定是否将每个文件作为单独的模块，默认为true，它不可以和declaration同时设定 */
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    /* 指定jsx代码用于的开发环境: 'preserve', 'react-native', or 'react'. */
    "jsx": "react-jsx",
    /* 用于指定是否启动所有类型检查，如果设为true则会同时开启下面这几个严格类型检查，默认为false */
    "strict": true,
    /* strictNullChecks为true时，null和undefined值不能赋给非这两种类型的值，别的类型也不能赋给他们，除了any类型。还有个例外就是undefined可以赋值给void类型 */
    "strictNullChecks": true,
    /* strictFunctionTypes的值为true或false，用于指定是否使用函数参数双向协变检查 */
    "strictFunctionTypes": true,
    /* 设为true后会对bind、call和apply绑定的方法的参数的检测是严格检测的 */
    "strictBindCallApply": true,
    /* 设为true后会检查类的非undefined属性是否已经在构造函数里初始化，如果要开启这项，需要同时开启strictNullChecks，默认为false */
    "strictPropertyInitialization": true,
    /* 用于检查是否有定义了但是没有使用的变量，对于这一点的检测，使用eslint可以在你书写代码的时候做提示，你可以配合使用。它的默认值为false */
    "noUnusedLocals": true,
    /* 用于检查是否有在函数体中没有使用的参数，这个也可以配合eslint来做检查，默认为false */
    "noUnusedParameters": true,
    /* 用于检查switch中是否有case没有使用break跳出switch，默认为false */
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

06.tsconfig.node.json配置

该文件的配置项和tsconfig.app.json类型，修改后内容如下：

{
  "compilerOptions": {
    "composite": true,
    "incremental": true, 
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
}

07.prettierrc文件配置

Prettier 是一个流行的代码格式化工具，通过 .prettierrc 文件可以自定义格式化规则。

安装依赖

npm install --save-dev prettier

以下是常用配置项说明和典型配置示例。

配置说明

{
  "printWidth": 80,          // 每行最大字符数
  "tabWidth": 2,             // 缩进空格数
  "useTabs": false,          // 使用空格而非制表符
  "semi": true,              // 语句末尾添加分号
  "singleQuote": true,       // 使用单引号而非双引号
  "quoteProps": "as-needed", // 对象属性引号使用方式(as-needed|consistent|preserve)
  "jsxSingleQuote": false,   // JSX中使用单引号
  "trailingComma": "es5",    // 尾随逗号(es5|none|all)
  "bracketSpacing": true,    // 对象字面量括号间空格
  "bracketSameLine": false,  // HTML/JSX标签闭合括号换行(旧版: jsxBracketSameLine)
  "arrowParens": "avoid"     // 箭头函数参数括号(avoid|always)
}

创建 .prettierrc 文件，并将其内容修改为：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

配置arrowParens说明：

当为 avoid 时，当箭头函数只有一个参数时省略括号
x => x * 2;
当为 always 时，总是为箭头函数参数保留括号，即使只有一个参数
(x) => x * 2;

08.eslint.config.js配置

ESLint 是一个开源的 JavaScript/TypeScript 代码检查工具，用于代码质量检查，发现潜在错误和不良模式，代码风格统一，强制执行一致的编码风格等

创建 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'

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'react/jsx-no-target-blank': 'off',
      // 设置未使用变量的检查规则
      'no-unused-vars': [
        'warn',
        { vars: 'all', args: 'none', ignoreRestSiblings: false },
      ],
      // 取消对react prop传参的检查
      'react/prop-types': 'off',
      // 取消对自定义HTML属性的检查 react/no-unknown-property
      'react/no-unknown-property': 'off',
      // 允许空代码块
      'no-empty': 'off',
      // 允许定义或导入未使用的变量
      'no-unused-vars': 'off',
      '@typescript-eslint/no-unused-vars': 'off',
      // 允许使用any类型
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
)

09.vite配置文件

修改 vite.config.ts 文件，修改后的内容如下：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
import checker from "vite-plugin-checker";

// https://vite.dev/config/
export default defineConfig({
  // 静态资源引用路径，默认为"/"
  base: "./",
  // 构建配置
  build: {
    // build目录名称，默认为"dist"
    outDir: "dist",
    // 静态资源存放目录名称，默认为"assets"
    assetsDir: "static",
  },
  // 服务器配置
  server: {
    // 监听所有IP地址
    host: "0.0.0.0",
    // 指定dev sever的端口号，默认为5173
    port: 3000,
    // 自动打开浏览器运行以下路径的页面
    // open: '/',
    // 设置反向代理
    proxy: {
      // 以下示例表示：请求URL中含有"/api"，则反向代理到http://localhost
      // 例如: http://localhost:3000/api/login -> http://localhost/api/login
      "/api": {
        target: "http://localhost/",
        changeOrigin: true,
      },
    },
  },
  resolve: {
    // 路径别名配置
    alias: {
      "@": path.resolve(import.meta.dirname, "src"),
    },
  },
  plugins: [
    react(),
    checker({
      eslint: {
        // useFlatConfig: true 表示使用扁平模式配置（eslint.config.js）
        // useFlatConfig: false 表示使用传统模式配置（如.eslintrc.json、.eslintrc.cjs）
        useFlatConfig: true,
        lintCommand: 'eslint "./src/**/*.{js,jsx,ts,tsx}"',
      },
    }),
  ],
});

修改后该文件会报错，运行以下命令可解决错误

安装 @types/node

npm install @types/node --save-dev

安装 vite-plugin-checker

npm install --save-dev vite-plugin-checker

10.删除多余文件，修改文件名

删除 index.css， app.css 文件，由于本项目文件命名规则按帕斯卡命名规则，故修改 App.tsx 文件为 app.tsx

app.tsx

function App() {
  return (
    <>
      <h1>Vite + React</h1>
    </>
  );
}

export default App;

main.tsx

import { createRoot } from 'react-dom/client';
import App from './app.tsx';

createRoot(document.getElementById('root')!).render(<App />);

11.提交模板到仓库

打开命令行，运行以下命令，测试项目是否可以成功运行

npm install
npm run dev

最后，将所修改的内容提交到仓库

git add .
git commit -m "init"
git push