GB/T28181 全栈开发日记[4]：使用 ESlint 辅助开发
- 服务端源代码 github.com/gowvp/gb281…
- 前端源代码 github.com/gowvp/gb281…
介绍
GoWVP (Golang Web Video Platfrom) 是一个 Go 语言实现的，基于 GB28181-2022 标准实现的网络视频平台，负责实现核心信令与设备管理后台部分，支持海康、大华、宇视等品牌的IPC、NVR、DVR接入。支持国标级联，支持rtsp/rtmp等视频流转发到国标平台，支持rtsp/rtmp等推流转发到国标平台。
技术栈
Golang v1.23, Goweb v1.x, Gin v1.10, Gorm v1.25 ...
React 19, Vite 6.x, Typescript, React-Router v7, React-Query v5, shadcn/ui ...
ESLint
将 vite 更新到 v6.0.7 后，发现代码做出的修改，浏览器不会快速刷新。
提示了错误
hmr invalidate /app/routes/device/device.tsx Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports
为了使 React 刷新正常工作，您的文件应该只导出 React 组件。
我们可以使用 eslint 发现错误并获得更详细的警告。
安装 eslint
ESLint 是一种用于识别和报告 ECMAScript/JavaScript 代码问题的工具，其目标是使代码更加一致并避免错误。
ESLint 是完全可插入的。每个规则都是一个插件，可以在运行时添加更多规则。还可以添加社区插件、配置和解析器来扩展 ESLint 的功能。
在 vscode 扩展中搜索 eslint，选择第一个安装。 macbook 打开扩展的快捷键是 shift+command+x。
快捷键 f1 打开命令，输入 eslint，选择 create eslint configuration
按照引导一步步设置即可，注意别全一路回车了。
最终会在项目根目录，生成 eslint.config.js 文件。
默认生成的文件打开查看，会提示类型错误，可以无视错误，也可以指定类型为 tseslint.config，就不会报错了。
安装 eslint 插件: react-refresh
接下来安装 react-refresh，通过此 eslint 能够让我们发现 hmr invalidate 更多错误信息。
npm i -D eslint-plugin-react-refresh
在 eslint.config.js 文件增加
import reactRefresh from "eslint-plugin-react-refresh";
export default [
/* Main config */
reactRefresh.configs.vite,
];
最终的文件内容大概长这样:
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import reactRefresh from "eslint-plugin-react-refresh";
export default tseslint.config(
{ files: ["**/*.{jsx,tsx}"] },
{ languageOptions: { globals: globals.browser } },
pluginJs.configs.recommended,
...tseslint.configs.recommended,
pluginReact.configs.flat.recommended,
reactRefresh.configs.vite
);
解决 hmr invalidate 问题
打开 device.tsx ，eslint 提示出了问题，快速刷新仅在文件仅导出组件时有效。
这里的对象确实也不需要导出，删除 export，此时对文件修改，浏览器页面就实时更新啦。
可以查看官方文档了解更多配置相关的说明，建议新手使用默认配置，先了解存在这些问题，再使用高级高能，自动格式化修复等等。
总结
"千淘万漉虽辛苦，吹尽狂沙始到金" ，解决问题要不急不躁，抽丝剥茧。
