如何将 EsLint 与 Vite+react 项目集成

Posted 2023-03-27

【中文标题】如何将 EsLint 与 Vite+react 项目集成

【英文标题】：How can I intregate ESLint in a Vite+React project?

【发布时间】：2021-12-18 21:23:31

【问题描述】：

当我使用 create-react-app 创建反应应用程序时，默认情况下有 Eslint。这就是我们不想手动集成的原因。但是当我使用 Vite 创建 React 应用程序时，不存在像 Eslint, jslint

这样的任何一种 Lint

请告诉我任何建议。如何在 Vite+react 项目中实现 eslint？

【参考方案1】：

首先在你的机器上全局安装 eslint 是个好主意，npm istall -g eslint 这样你就可以使用 eslint cli 在你的项目中初始化 eslint 配置文件。

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

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

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

【讨论】：

你可能不想全局安装 eslint。不同年龄的不同项目可能会使用不同版本的 eslint（在撰写本文时已经有 8 个不同的主要版本）。因此，最好使用 npx eslint 进行一次性 linting，或者为您的项目安装 eslint 并通过 package.json 中的 scripts 部分运行它。

【参考方案2】：

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：

  "extends": "react-app"

您可以将其添加到 package.json 的 scripts 部分

  "scripts": 
    "lint": "eslint --max-warnings=0 src"
  

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

您也可以使用vite-plugin-eslint 让 vite 在控制台中为您提供反馈。