005 ESLint插件配置与启动开发服务器

ESLint插件集成

为规范代码编写、提前捕获语法与逻辑错误，提升开发效率，我们还需要安装 ESLint 插件。该插件可在开发阶段实时检测 JavaScript 与 JSX 代码的规范问题，帮助开发者编写标准化、无隐患的代码。要将 ESLint 插件作为开发依赖（devDependencies）安装到项目中，请执行以下命令：

npm install vite-plugin-eslint --save-dev

npm install vite-plugin-eslint --save-dev

执行以上命令安装 ESLint 插件完成后，在 VS Code中打开项目根目录下的 package.json 文件你会看到以下配置：

"vite-plugin-eslint": "^1.8.1"

"vite-plugin-eslint": "^1.8.1"

我们已将成功在项目配置的 devDependencies 字段中添加增 Vite ESLint 插件依赖。我的安装的版本是 1.8.1，你的安装的版本可能会有所不同。

ESLint插件配置

在 ESLint插件 依赖安装完成后，还需要修改项目根目录下的 vite.config.js 配置文件，完成ESLint插件的注册。 在 vite.config.js 配置文件顶部现有的 import 语句下方导入 Vite ESLint 插件。在导出的配置对象中，将导入的 ESLint 插件添加到 plugins 数组中。如下所示：

完成 ESLint 配置后，ESLint 就可以与 Vite 深度集成，在开发过程中自动校验代码规范，及时提示并修复问题。

如果 VS Code 会报错提示“无法找到模块‘vite-plugin-eslint’的声明文件…..”，是我们的项目使用JavaScript作为开发语言，但 VS Code 背后使用 TypeScript 引擎对 vite.config 做类型检查，然后发现 vite-plugin-eslint@1.8.1 的类型导出有问题而因此报错。这个报错不影响项目运行，你完全可以忽略。