如何在Vite+React项目中集成ESLint？

Question

当我使用 Create React App 创建 React 应用程序时，默认情况下包含 ESLint。这就是为什么我们不想手动集成 ESLint。但是，当我使用Vite创建 React 应用程序时，不存在任何类型的 linting，如ESLint或JSLint。

如何在Vite+React项目中安装ESLint？

Answer 1

create-react-app已将他们的 eslint 规则放入专用包中：

https://www.npmjs.com/package/eslint-config-react-app

按照他们的说明进行设置：

npm install --save-dev eslint-config-react-app eslint@^8.0.0

或者

yarn add -D eslint-config-react-app eslint@^8.0.0

然后创建一个.eslintrc.json包含以下内容的：

npm install --save-dev eslint-config-react-app eslint@^8.0.0

这已经足以让 VSCode 在编辑器中开始 linting。（前提是你安装了 eslint 插件）

要手动触发 linting 过程，您可以将其添加到以下scripts部分package.json：

yarn add -D eslint-config-react-app eslint@^8.0.0

npm run lint并通过或运行它yarn lint。

您还可以vite-plugin-eslint让 vite 在控制台中向您提供反馈。

Answer 2

如果你想在你的机器上全局安装 eslint，你可以打开一个控制台并添加npm istall -g eslint，这将允许你使用 eslint cli 来初始化项目中的 eslint 配置文件（你仍然可以使用 eslint cli 而无需全局安装它） ，所以这一步是可选的）

要在 React 项目中安装它，如果您之前从未这样做过，可以按照以下步骤操作：执行npm istall eslint --save-dev或yarn add -D eslint，然后使用npm install eslint-plugin-react --save-dev或为 React 安装 eslint 插件yarn add -D eslint-plugin-react。

安装两个依赖项后，只需在项目根目录中打开一个终端并运行命令eslint --init（如果您之前全局安装了 eslint，如果没有，则使用npx eslint --init），这将执行 eslint cli 并在项目中创建一个 .eslintrc.json 文件已经添加了基本配置。您可以查看 eslint-plugin-react 包的文档，以更好地了解如何向文件添加更多规则以及该插件支持的规则。 https://www.npmjs.com/package/eslint-plugin-react

这篇文章也应该对你有帮助https://medium.com/@RossWhitehouse/setting-up-eslint-in-react-c20015ef35f7