跳到主要内容

React 学习之旅 4 - 集成 TypeScript、ESLint、Prettier

概述​

本文将介绍如何在 React 项目中集成 TypeScript、ESLint 和 Prettier。这些工具将帮助我们在开发过程中提升代码质量、保持代码风格一致性，并减少潜在的错误。

集成类型系统 TypeScript​

首先，按上一节使用 Vite 创建应用：

npm create vite@latest my-app -- --template react-swc

然后，我们按 官方文档 在项目中添加 TypeScript：

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

接着，我们把项目中的 .jsx 文件改名为 .tsx，会发现很多代码行报错了，下面我们一个个修复：

问题 1：找不到模块“./assets/react.svg”或其相应的类型声明

要解决这个问题，我们需要添加类型声明文件 type.d.ts：

// type.d.ts
declare module '*.svg'

还有 Vite 项目中存放类型声明文件 vite-env.d.ts：

// vite-env.d.ts
declare module '*.svg'

这样就解决了 SVG 文件的类型声明问题，这个声明文件告诉 TypeScript 所有的 .svg 文件都可以被导入，并且它们会被视为字符串类型。

问题 2：“React”指 UMD 全局，但当前文件是模块。请考虑改为添加导入

这个错误是因为我们需要在文件中显式导入 React：

import { useState } from 'react'
// 改为
import React, { useState } from 'react'

这样解决了 React UMD 全局的错误。这个修改添加了必要的 React 导入，同时避免了重复导入的问题。

问题 3：类型“HTMLElement | null”的参数不能赋给类型“Container”的参数，不能将类型“null”分配给类型“Container”

这个错误是因为 getElementById 可能返回 null。我们需要添加一个非空断言或者条件检查：

// 添加了非空断言操作符 `!`
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

修改完全部错误， 重新执行 “npm run build”，即可看到上一节结果运行的界面。

DEMO: xiezipei/react-journey/04/my-app-ts/

集成代码检查 ESLint、格式化工具 Prettier​

第 1 步：安装 ESLint 及相关依赖

# 基础 ESLint + React 支持
npm install eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --save-dev

# TypeScript 支持（如果是 TS 项目）
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

# 可选：使用 Airbnb/Standard 等流行规则集
npm install eslint-config-airbnb --save-dev

第 2 步：初始化 ESLint 配置

npx eslint --init

按提示选择配置，完成后会生成 eslint.config.js 文件。

第 3 步：手动调整 ESLint 配置

import { defineConfig } from 'eslint/config'
import globals from 'globals'
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import pluginReact from 'eslint-plugin-react'
import prettier from 'eslint-plugin-prettier'

export default defineConfig([
  // 配置适用于所有 JavaScript 和 TypeScript 文件
  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },

  // 配置适用于所有 JavaScript 和 TypeScript 文件，并设置全局变量为浏览器环境
  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'], languageOptions: { globals: globals.browser } },

  // 配置适用于所有 JavaScript 和 TypeScript 文件，使用 JavaScript 推荐的规则集
  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'], plugins: { js }, extends: ['js/recommended'] },

  // 使用 TypeScript 推荐的 ESLint 配置
  tseslint.configs.recommended,

  // 使用 React 推荐的扁平化配置
  pluginReact.configs.flat.recommended,

  // 设置 React 相关配置，自动检测 React 版本
  {
    settings: {
      react: {
        version: 'detect', // 自动检测 React 版本
      },
    },
  },

  // 配置适用于所有 JavaScript 和 TypeScript 文件，使用 Prettier 插件和相关规则
  {
    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
    plugins: {
      prettier, // 使用 Prettier 插件
    },
    rules: {
      'prettier/prettier': ['error', { semi: false }], // 使用 Prettier 格式化规则，禁用分号
      'no-unused-vars': 'error', // 禁止未使用的变量
      '@typescript-eslint/no-unused-vars': 'error', // 禁止 TypeScript 中未使用的变量
      semi: ['error', 'never'], // 禁用分号
    },
  },
])

第 4 步：添加忽略文件 .eslintignore

node_modules
dist
*.config.js
public

第 6 步：添加 Prettier

npm install prettier --save-dev

第 7 步：解决 Prettier 与 ESlint 的冲突

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

第 5 步：集成到开发流程

在 package.json 中添加脚本：

{
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
  "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,md}\"",
  "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css,md}\""
}

保存时自动修复（VSCode）：

// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

DEMO: xiezipei/react-journey/04/my-app-ts-eslint-prettier/

资源​

参考​