在 React 应用中设置 ESLINT 和 PRETTIER

对于初学者来说，设置ESlint和Prettier非常繁琐，我深有体会，因为我也遇到过类似的问题。你可以在网上找到很多关于设置 linting 的文章。有些文章对你有用，有些则不然，但大多数文章由于库的不断扩充已经过时了。

因此，我们不应该过度思考，而应该尝试去理解一些事情。

什么是 ESLint？

ESLint会静态分析我们的代码并找出问题所在。它存在于大多数编辑器中。ESLint 的修复功能支持语法感知，因此您不会遇到由传统查找替换算法引入的错误。

编写您自己的规则，使其与 ESLint 的内置规则兼容。您可以自定义 ESLint，使其完全按照您的项目需求运行。

Prettier 是什么？

Prettier是一款功能强大的代码格式化工具，兼容大多数编程语言。它能帮你节省大量时间。保存代码时，它还能快速缩进（取决于 VSCode/编辑器的设置）。

如何让它们协同工作？

ESLint 的格式化规则可能与 Prettier 冲突。所以我们应该谨慎配置它（听起来很难，但其实很简单😅）

让我们开始吧

步骤1：

npm install eslint --save-dev
 or
yarn add eslint --dev

第 2 步：

.eslintrc.json通过运行创建

npx eslint --init
 or
yarn run eslint --init

步骤3：

在 中React - 17.0.0，将 React 导入文件是可选的。
为了解决这个问题，我们需要在文件中添加一条规则.eslintrc。打开你的.eslintrc文件，并在规则中添加以下行："react/react-in-jsx-scope": "off"。

  "rules": {
    "react/react-in-jsx-scope": "off"
  }

步骤4：

如果你正在使用jest，你会发现它eslint给出了一个错误，即 test 或 expect 未定义。为了解决这个问题，我们需要在 env 中添加 "jest": true。

  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
  }

步骤5：

现在，添加 esling 插件使其与 react 一起工作，并对 eslint 和 prettier 进行适当的配置，这样它们就不会相互冲突

安装

npm install eslint-config-prettier eslint-plugin-prettier prettier --save-dev
or 
yarn add eslint-config-prettier eslint-plugin-prettier prettier --dev

请检查他们的每个 git 存储库。eslint
-config-prettier - 关闭所有不必要的或可能与 Prettier 冲突的规则。

eslint-plugin-prettier - 将 Prettier 作为 ESLint 规则运行

.eslintrc上述安装完成后，对文件进行更改。

 "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"]

我们可以单独运行 Prettier，但我们希望eslint它为我们运行，以便它不与eslint规则冲突。

步骤6：-

创建.prettierrc并粘贴以下代码

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "jsxBracketSameLine": true
}

现在，eslint 和 prettier 已经设置好了，让我们将脚本添加到package.json

"lint": "eslint .",
"lint:fix": "eslint --fix",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"

这应该可以工作，但在测试之前，最好重新启动 VSCode。

您已准备好编写出色的代码。

感谢你的光临🌟
如果你喜欢，请点个赞。查看我的 GitHub 个人资料，了解一些很棒的项目。GitHub请在Twitter
上关注我，支持我