上海网站开发工程师招聘网/西安网站seo厂家
1.基础环境
开发工具使用vscode，需要安装nodejs，我这里使用nvm管理node版本，相关软件如下：
| 软件 | 版本 | 描述 |
|---|---|---|
| nodejs | 18.x | Node.js 是跨平台、开源的 JavaScript 运行环境 |
| vite | 6.2.x | 前端工程脚手架 |
| react | 18.x | 前端框架，用于开发web应用 |
| typescript | 5.7.x | TypeScript 是添加了类型系统的JavaScript |
| eslint | 9.23.x | 语法语义检查，检测编写的（ JavaScript ）代码是否符合规范 |
| prettier | 3.5.x | prettier 是一个代码格式化工具 |
| husky | 9.1.x | Husky 是一个用于设置Git hooks（钩子）的工具，它允许开发者在Git 操作前或者后执行自定义的脚本 |
| git | 2.39.x | 版本管理工具 |
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].