使用 Create React App 创建 React+TypeScript 项目并配置 ESLint 和 Prettier

本文将介绍如何使用 create-react-app 创建一个 TypeScript 项目，并配置 ESLint 和 Prettier 以实现代码规范和自动格式化。

1. 创建项目

使用 create-react-app 创建一个 TypeScript 项目：

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

cd react-ts-demo
npm start

运行成功后，项目将在 http://localhost:3000 启动。

2. 配置编码规范

为了确保代码风格一致，我们需要安装 ESLint 和 Prettier，并进行相关配置。

安装依赖

运行以下命令安装 ESLint 和 Prettier 及其相关插件：

npm install eslint prettier --save-dev
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier eslint-plugin-react --save-dev

配置 `package.json`

在 package.json 中添加以下脚本和开发依赖：

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint 'src/**/*.{js,ts,jsx,tsx}'",
    "format": "prettier --write 'src/**/*.{js,ts,jsx,tsx}'"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.50.0",
    "eslint": "^8.57.1",
    "eslint-config-prettier": "^10.0.1",
    "eslint-plugin-prettier": "^5.2.3",
    "eslint-plugin-react": "^7.37.4",
    "prettier": "^3.5.2"
  }
}

配置 ESLint

在项目根目录下创建 .eslintrc.js 文件，并添加以下配置：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint"],
  rules: {},
};

配置 Prettier

在项目根目录下创建 .prettierrc.js 文件，并添加以下配置：

module.exports = {
  // 箭头函数只有一个参数时忽略括号
  arrowParens: "avoid",
  // 括号内部不要出现空格
  bracketSpacing: true,
  // 行结束符使用 Unix 格式
  endOfLine: "lf",
  // 将 > 放在最后一行的末尾
  jsxBracketSameLine: false,
  // 行宽
  printWidth: 100,
  // 换行方式
  proseWrap: "preserve",
  // 不使用分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 缩进宽度
  tabWidth: 2,
  // 不使用 tab 缩进
  useTabs: false,
  // 多行对象、数组在最后一行增加逗号
  trailingComma: "es5",
  // 指定解析器为 TypeScript
  parser: "typescript",
};

3. 使用 ESLint 和 Prettier

手动格式化代码

运行以下命令，自动格式化项目中的代码：

npm run format

保存时自动格式化

在 VSCode 中，可以通过以下配置实现保存时自动格式化代码：

确保 VSCode 版本在 1.82.0 以上。
在 .vscode/settings.json 中添加以下配置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "eslint.enable": true,
  "prettier.enable": true
}

配置完成后，每次保存文件时，ESLint 和 Prettier 将自动修复代码格式。

总结

通过以上步骤，我们成功创建了一个 TypeScript 项目，并配置了 ESLint 和 Prettier 以实现代码规范和自动格式化。这不仅提高了代码的可读性，还减少了团队协作中的风格冲突问题。

如果你有任何问题或建议，欢迎在评论区留言！

使用 Create React App 创建 React+TypeScript 项目并配置 ESLint 和 Prettier