使用CreateReactApp搭建React + TypeScript项目，配置ESLint和Prettier
6
|
|
0
|
工作日记

753 字
|
6 分钟

使用CreateReactApp搭建React+TypeScript项目并配置ESLint与Prettier指南

为什么选择这个技术栈？

在当今前端开发领域，React+TypeScript组合已成为构建企业级应用的首选方案。通过CreateReactApp脚手架工具，开发者可以在2分钟内快速搭建标准化项目结构。配合ESLint代码检查工具和Prettier自动格式化工具，能有效提升代码质量并统一团队编码风格。

环境准备

安装Node.js环境

确保已安装Node.js 14+版本（推荐使用LTS版本），在终端执行验证命令：

node -v
npm -v

创建React TypeScript项目

初始化项目脚手架

通过以下命令创建名为”react-ts-demo”的项目（耗时约1到2分钟）：

npx create-react-app react-ts-demo --template typescript

注意：该命令自动完成以下配置：

  • TypeScript编译器预设
  • React类型定义文件
  • TSLint到ESLint的平滑迁移

项目结构解析

react-ts-demo/
├── src/
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.tsx
│   └── react-app-env.d.ts
├── tsconfig.json
└── package.json

配置ESLint代码规范

安装核心依赖包

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

创建.eslintrc.json配置文件

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/no-explicit-any": "warn"
  }
}

集成Prettier自动格式化

安装格式化工具链

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

配置.prettierrc文件

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

更新ESLint配置

{
  "extends": [
    ...,
    "plugin:prettier/recommended"
  ]
}

自动化工作流配置

添加VS Code配置（.vscode/settings.json）

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["typescript", "typescriptreact"]
}

创建便捷脚本命令

{
  "scripts": {
    "lint": "eslint src//.{ts,tsx}",
    "format": "prettier --write src//.{ts,tsx}"
  }
}

项目打包与部署

生产环境构建

执行标准化打包命令：

npm run build

该命令会生成优化后的build目录，包含：

  • 经过Tree Shaking的代码
  • 自动生成的source map文件
  • 静态资源哈希命名文件

最佳实践建议

  • 团队规范：建议将ESLint/Prettier配置放入项目根目录，确保全成员配置统一
  • Git Hook：通过husky配置pre-commit钩子，自动执行lint检查
  • 持续集成：在CI/CD流程中加入npm run lint校验步骤

常见问题解决

类型定义报错处理

遇到模块类型缺失时，可通过安装@types库解决：

npm install @types/react-dom --save-dev

格式化冲突处理

如果出现ESLint与Prettier规则冲突，可：

  1. 通过eslint-config-prettier禁用冲突规则
  2. 调整规则优先级顺序
  3. 创建overrides配置特定文件规则

通过本文的配置指南，开发者可以快速搭建符合现代前端工程标准的React+TypeScript开发环境。这种配置方案不仅提升开发效率，还能保证多人协作时的代码一致性，是构建可维护大型应用的理想选择。

上一篇
下一篇