如何快速从零开始搭建一个前端项目_快速开发一个前端程序-CSDN博客

本文链接：https://blog.csdn.net/web2022050901/article/details/127864474

本文介绍了如何从零开始快速搭建一个前端React项目，包括使用pnpm安装环境，通过create-react-app创建项目，配置ESLint、Prettier、Husky和lint-staged，设置Vitest单元测试，以及GitHub Workflow自动化流程。此外，还提供了一个一键创建预配置项目的小工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2022 年了，如何快速从零开始搭建一个合适的前端项目？

准备工作

首先本地需要安装好 node 环境以及包管理工具，推荐直接使用 pnpm，也可以通过 pnpm 来直接管理 nodejs 版本。

pnpm 安装：

# Mac or Linux
curl -fsSL https://get.pnpm.io/install.sh | sh -

# Windows
iwr https://get.pnpm.io/install.ps1 -useb | iex

使用 pnpm 安装 nodejs 的 LTS 版本：

pnpm env use --global lts

项目搭建

这里我们以搭建一个 React + TypeScript 项目为例

脚手架

脚手架方面，新项目可以考虑直接使用 vite，我们通过以下命令创建一个基于 vite 的初始化项目：

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

进入目录可以看到如下的结构：

.
├── public
├── src
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

ESLint

ESLint 可以通过静态分析，来审查你代码中的错误，对于前端项目也是不可或缺的存在，这里我们选择社区比较流行的 airbnb 风格的 ESLint 规则，通过以下命令安装基础的配置与插件：

pnpm add eslint eslint-config-airbnb-base eslint-plugin-import -D

然后在项目根目录中添加 .eslintrc.json 文件：

{"extends": ["eslint:recommended","airbnb-base",],"plugins": ["import"],
}

支持 TS 和 React

对于 TypeScript 以及 React 项目，还需要额外的 parser 和 plugin 来支持：

# TypeScirpt eslint parser
pnpm add @typescript-eslint/parser @typescript-eslint/eslint-plugin -D