react+ts+eslint+prettier 配置教程_react 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 --fixnpx 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 [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：提交前自动格式化和修复代码（可选）

工商注册知识