搞定react+ts+vite项目的eslint和prettier冲突
2023-10-30 21:17:08
解决 React + TypeScript + Vite 项目中 ESLint 和 Prettier 冲突
问题
如果你在 React + TypeScript + Vite 项目中遇到代码变红的烦恼，不要担心，你并非孤军奋战。这通常是由于 ESLint 和 Prettier 之间的冲突引起的。本文将手把手教你如何解决这一问题。
步骤详解
1. 安装 ESLint
npm install --save-dev eslint
2. 创建 .eslintrc.js
在项目根目录创建 .eslintrc.js 文件并填写以下内容：
module.exports = {
extends: ['eslint:recommended', 'plugin:react/recommended'],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2020,
sourceType: 'module',
},
plugins: ['react', '@typescript-eslint'],
rules: {
// ... 你的规则配置
},
};
3. 安装 Prettier
npm install --save-dev prettier
4. 创建 .prettierrc.js
在项目根目录创建 .prettierrc.js 文件并填写以下内容：
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 80,
tabWidth: 2,
};
5. 安装 ESLint 和 Prettier 插件
npm install --save-dev eslint-plugin-prettier
npm install --save-dev eslint-config-prettier
6. 更新 .eslintrc.js
在 .eslintrc.js 中添加以下配置：
extends: ['plugin:prettier/recommended'],
7. 更新 package.json
在 package.json 中添加以下脚本：
"scripts": {
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"format": "prettier --write .",
"lint-fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
},
8. 重启 Vite 服务器
现在，重启 Vite 服务器，你就能看到代码不再变红了，ESLint 和 Prettier 也相安无事。
自动修复代码
如果你希望在保存时自动修复代码，请按照以下步骤操作：
1. 创建 .vscode 文件夹
2. 创建 settings.json
在 .vscode 文件夹中创建 settings.json 文件并填写以下内容：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
3. 重启 Vite 服务器
重启 Vite 服务器后，保存代码时就会自动格式化，省时又省心。
结论
通过遵循这些步骤，你就可以解决 React + TypeScript + Vite 项目中 ESLint 和 Prettier 的冲突，让你的代码重拾光彩。
常见问题解答
-
为什么 ESLint 和 Prettier 会冲突？
ESLint 是一个用于检查代码风格的工具，而 Prettier 是一个用于自动格式化代码的工具。有时，这两者会因不同的代码风格设置而冲突。 -
我能自定义 ESLint 和 Prettier 的配置吗？
当然可以。在.eslintrc.js和.prettierrc.js文件中，你可以根据自己的偏好自定义规则和设置。 -
如何修复现有的代码中的问题？
可以使用eslint --fix命令自动修复大多数 ESLint 问题。对于 Prettier 问题，可以使用prettier --write .命令自动格式化代码。 -
有哪些替代 Prettier 的代码格式化器？
除了 Prettier，还有其他代码格式化器，如 StandardJS 和 Beautify。 -
如何防止冲突再次发生？
定期检查和更新 ESLint 和 Prettier 的版本，并确保他们的规则和设置保持一致。
