0101-vite创建react_ts-环境准备-仿低代码平台项目

1.基础环境

开发工具使用vscode，需要安装nodejs，我这里使用nvm管理node版本，相关软件如下：

2.vite创建react项目

下面链接1为vite官网，这里我们使用yarn命令，创建react项目命令如下：

yarn create vite

当然也可以直接指定模版，命令如下：

yarn create vite react-ts-demo --template react-ts

第一步：设置项目名称 react-ts-demo

第二步：选择框架 react

第三步：选择一个变体（编程语言） typescript

项目创建完成,项目集成结构如下：

• public：入口目录
• src：源代码目录
  • assets：资源目录
  • main.tsx：程序执行入库
• .gitignore：忽略目录，代码提交
• eslint.config.js：eslint配置文件，为eslint扁平化配置
• index.html：首页
• package：脚本，依赖（版本）
• README：介绍
• tsconfig：ts配置文件
• vite.config：vite相关配置

3.指定编码规则

在团队开发中，为提供开发效率，减少出错概率，需要统一编码规范与格式。下面介绍常用的工具安装及配置。

3.1 eslint

编码规范靠是的工具和流程，不能靠自觉或者经验子类的。eslint项目安装：

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

eslint初始化：

npx eslint --init

第一步：选择使用方式，检查语法和发现问题

第二步：模块导入导出方式,import/export（ESM）

第三步：选择应用的框架，react

第四步：项目是否使用ts，yes

第五步：代码运行位置，浏览器

第六步：是否现在安装，是

第七步：选择包管理工具，yarn

在vscode插件管理中，安装eslint插件。

eslint常用配置，参考下面链接2

import globals from 'globals';
import tsEslintParser from '@typescript-eslint/parser';
import typescriptEslint from '@typescript-eslint/eslint-plugin';
import pluginReact from 'eslint-plugin-react';
import reactRefresh from 'eslint-plugin-react-refresh';
import hooksPlugin from 'eslint-plugin-react-hooks';
import eslintPluginPrettier from 'eslint-plugin-prettier';

export default [
{
  // 指定适用于哪些文件
  files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
  languageOptions: {
    // 使用 TypeScript 解析器
    parser: tsEslintParser,
    parserOptions: {
      ecmaFeatures: {
        jsx: true, // 开启 JSX 语法支持
      },
    },
    // 定义全局变量，适配浏览器环境
    globals: {
      ...globals.browser,
    },
    sourceType: 'module', // 使用模块化方式，支持 ES6 模块导入/导出
  },
  plugins: {
    // 启用 React 插件
    react: pluginReact,
    // 启用 React Hooks 插件
    'react-hooks': hooksPlugin,
    // 启用 React Refresh 插件（用于热更新）
    'react-refresh': reactRefresh,
    // 启用 TypeScript ESLint 插件
    '@typescript-eslint': typescriptEslint,
    // 启用 Prettier 插件
    prettier: eslintPluginPrettier,
  },
  rules: {
    // Prettier 规则：规范代码格式，确保一致性
    'prettier/prettier': [
      'error',
      {
        singleQuote: true, // 使用单引号
        semi: true, // 强制使用分号
        tabWidth: 2, // 使用 2 个空格作为缩进
      },
    ],

    // React 规则
    'react/jsx-indent': [1, 2], // 强制 JSX 标签使用 2 个空格缩进
    'react/jsx-uses-react': 'off', // React 17+ 开启了 JSX 自动导入，取消此规则
    'react/react-in-jsx-scope': 'off', // React 17+ 开启了 JSX 自动导入，取消此规则

    // React Hooks 规则：确保正确使用 Hooks（遵循推荐规则）
    ...hooksPlugin.configs.recommended.rules,

    // React Refresh 规则：建议仅导出 React 组件以支持热更新
    'react-refresh/only-export-components': 'warn',

    // 通用规则
    'arrow-body-style': ['error', 'as-needed'], // 推荐使用简化版箭头函数，例如直接返回值，不使用 `{}` 包裹
    'prefer-arrow-callback': 'error', // 强制使用箭头函数作为回调函数，避免使用 `function()` 语法
    'no-template-curly-in-string': 1, // 不允许在字符串中使用模板字面量（例如：'Hello ${name}'）
    '@typescript-eslint/no-explicit-any': 'warn', // 警告使用 `any` 类型，但不强制报错，鼓励使用更明确的类型
    'no-magic-numbers': 'warn', // 警告硬编码的魔法数字（例如：`const x = 3`），建议使用常量代替
  },
},
];		

3.2 prettier

安装prettier相关依赖：

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

安装vscode prettier插件：Prettier - Code formatter

3.3 husky

安装依赖：

yarn add --dev husky

初始化：

yarn husky init

配置package.json:

{
  "scripts": {
    // Yarn doesn't support prepare script
    "postinstall": "husky",
    // Include this if publishing to npmjs.com
    "prepack": "pinst --disable",
    "postpack": "pinst --enable"
  }
}

执行一次命令：

# Yarn doesn't support `prepare`
yarn run postinstall

修改.husky/pre-commit

yarn lint
yarn format
git add .

3.4 commitlint

安装命令：

yarn add --dev @commitlint/{cli,config-conventional}

配置：

echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

在.husky/commit-msg中添加：

yarn commitlint --edit \$1

也可以配置在package.json中

commitlint相关内容，查看下面链接4.

4.代码上传仓库

作为练习项目，我们上传国内的代码仓库gitee，如果是开源项目，建议上传github。具体操作步骤，自行搜索，这里不在赘述。

commitlint测试不规范代码提交，如下：

规范代码提交如下：

结语

❓QQ:806797785

⭐️仓库地址：https://gitee.com/gaogzhen

⭐️仓库地址：https://github.com/gaogzhen

[1]vite官网[CP/OL].

[2]Eslint9搭配React的扁平化配置指南[CP/OL].

[3]husky文档[CP/OL].

[4]commitlint 文档[CP/OL].