react+ts+eslint+prettier 配置教程
1.创建项目
npx create-react-app my-app --template typescript2.安装依赖
-
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-plugin3.配置 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，可以通过以下配置自动格式化代码：
安装插件
-
ESLint 插件：自动检查代码质量。
-
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 . --write7. 配置 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：提交前自动格式化和修复代码（可选）