react+ts+eslint+prettier 配置教程

1.创建项目

npx create-react-app my-app --template typescript

2.安装依赖

• eslint：核心代码质量工具。

• prettier：代码格式化工具。

• eslint-plugin-prettier：将 Prettier 的规则集成到 ESLint 中。

• eslint-config-prettier：禁用与 Prettier 冲突的 ESLint 规则。

• @typescript-eslint/parser：TypeScript 的 ESLint 解析器。

• @typescript-eslint/eslint-plugin：为 TypeScript 提供额外的 ESLint 规则。

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

3.配置 ESLint

在项目根目录下创建 .eslintrc.js 文件，配置 ESLint 以支持 Prettier 和 TypeScript：

module.exports = {root: true, // 确保 ESLint 不会向上查找配置文件parser: '@typescript-eslint/parser', // 使用 TypeScript 解析器parserOptions: {ecmaVersion: 2020, // 支持 ES2020 语法sourceType: 'module', // 支持 ES 模块ecmaFeatures: {jsx: true, // 支持 JSX},},env: {browser: true, // 浏览器环境node: true, // Node.js 环境es6: true, // ES6+ 语法支持},extends: ['eslint:recommended', // ESLint 推荐规则'plugin:@typescript-eslint/recommended', // TypeScript 推荐规则'plugin:react/recommended', // React 推荐规则'plugin:react/jsx-runtime', // 支持 React 17+ 的 JSX 运行时'plugin:prettier/recommended', // Prettier 推荐规则'prettier', // 禁用与 Prettier 冲突的 ESLint 规则],plugins: ['react', // React 插件'prettier', // Prettier 插件'@typescript-eslint', // TypeScript ESLint 插件],rules: {// ESLint 规则'no-unused-vars': 'warn', // 允许未使用的变量，但发出警告'no-console': 'warn', // 允许 console，但发出警告'react/react-in-jsx-scope': 'off', // React 17+ 不需要此规则'react/jsx-uses-react': 'off', // React 17+ 不需要此规则'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.jsx'] }], // 允许在 JSX 文件中使用 TS/JS// Prettier 规则'prettier/prettier': ['error',{singleQuote: true, // 使用单引号semi: true, // 使用分号trailingComma: 'all', // 在对象或数组的最后一个元素后添加逗号printWidth: 80, // 每行的最大字符数tabWidth: 2, // 缩进宽度useTabs: false, // 不使用制表符缩进endOfLine: 'auto', // 自动处理换行符},],},settings: {react: {version: 'detect', // 自动检测 React 版本},},
};

4.配置 Prettier

在项目根目录下创建 .prettierrc.js 文件，配置 Prettier 的格式化规则：

module.exports = {singleQuote: true, // 使用单引号semi: true, // 使用分号trailingComma: 'all', // 在对象或数组的最后一个元素后添加逗号printWidth: 80, // 每行的最大字符数tabWidth: 2, // 缩进宽度useTabs: false, // 不使用制表符缩进jsxSingleQuote: true, // JSX 中使用单引号bracketSpacing: true, // 对象字面量的括号是否换行jsxBracketSameLine: false, // JSX 的闭合括号是否在同一行endOfLine: 'auto' // 自动处理换行符
};

5.配置 VS Code（可选）

如果你使用的是 VS Code，可以通过以下配置自动格式化代码：

安装插件

1. ESLint 插件：自动检查代码质量。

2. Prettier 插件：自动格式化代码。

配置 .vscode/settings.json

在项目根目录下创建 .vscode 文件夹，并在其中创建 settings.json 文件：

{"editor.formatOnSave": true, // 保存时自动格式化"editor.codeActionsOnSave": {"source.fixAll.eslint": true // 保存时自动修复 ESLint 问题},"prettier.configPath": "./.prettierrc.js", // 指定 Prettier 配置文件路径"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode" // 设置 Prettier 为默认格式化工具},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
}

6.测试配置

npx eslint . --ext .ts,.tsx,.js,.jsx --fix
npx prettier . --write

7. 配置 Husky 和 Lint-staged（可选）

为了确保提交的代码符合格式要求，可以使用 husky 和 lint-staged 在提交前自动运行 ESLint 和 Prettier。

npm install --save-dev husky lint-staged

在 package.json 中添加以下配置：

{"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"*.{ts,tsx,js,jsx,json,css,scss,md}": ["eslint --fix","prettier --write","git add"]}
}

检查配置是否生效   

//都得代码在暂存区才能用下面方法测试
npx lint-staged

如果没有生效？？？？

1.用 npx husky --version  检查，如何显示如下需要安装 npx husky install

Usage:
  husky install [dir] (default: .husky)
  husky uninstall
  husky set|add <file> [cmd]

2.然后关联 npx husky add .husky/pre-commit "npx lint-staged"

8. 总结

现在，你的 React + TypeScript 项目已经配置了 ESLint 和 Prettier，所有配置文件都使用 .js 格式。你可以根据需要进一步调整规则或扩展配置。以下是配置文件的总结：

• .eslintrc.js：ESLint 配置文件。

• .prettierrc.js：Prettier 配置文件。

• .vscode/settings.json：VS Code 的自动格式化配置（可选）。

• husky 和 lint-staged：提交前自动格式化和修复代码（可选）