ESLint代码规范（二）

通过配置文件来忽略对指定文件的代码检查ESLint低于7.0.0.eslintignore/config src/utils/**.prettierignore避免代码被 Prettier 的通用规则修改.eslintcache *.lock yarn-error.log src/utils/**ESLint大于7.0.0.eslintrc.jsignorePatterns: [src/utils/**]no-access-state-in-setstateUse callback in setState when referencing the previous state. react/no-access-state-in-setstate当你需要在setState中基于“之前的状态”previous state来计算“新的状态”时不要直接读取this.state或 React Hooks 中的 state 变量而应该使用setState的函数式更新形式回调形式。为什么会有这个报错在 React 中setState是异步的在 React 18 及并发模式下更是如此更新可能会被批量处理或中断。如果你直接读取当前的state来计算新值可能会遇到以下问题竞态条件Race Condition如果你在极短时间内连续调用多次setState或者在事件回调、定时器中调用this.state可能还没有更新到最新值。这会导致你基于一个“过时”的状态进行计算从而丢失更新。数据不一致最终渲染的状态可能不是你预期的累加结果。错误的写法// Class Component 示例 class Counter extends React.Component { constructor(props) { super(props); this.state { count: 0 }; } increment () { // 错误直接引用了 this.state // 如果此时 setState 还没执行完this.state.count 还是旧值 this.setState({ count: this.state.count 1 }); }; render() { return div{this.state.count}/div; } }React 为了性能不会每次调用setState都立即更新界面和this.state而是会把多次更新批量处理Batching。第 1 次点击代码执行读取this.state.count。此时内存里还是 0。计算0 1 1。任务队列放入任务{ count: 1 }。注意此时this.state.count仍然是 0还没变第 2 次点击紧接着发生第 1 次还没处理完代码执行读取this.state.count。因为还没更新它依然是 0计算0 1 1。任务队列放入任务{ count: 1 }。第 3 次点击代码执行读取this.state.count。依然是 0计算0 1 1。任务队列放入任务{ count: 1 }。React 开始处理队列React 合并这些更新。由于你传入的都是对象{ count: 1 }后面的会覆盖前面的或者它们基于同一个旧值计算。最终结果count 变成了 1。预期结果应该是 3。正确写法this.setState((prevState) ({ count: prevState.count 1 }));第 1 次点击放入任务函数f1(prevState) prevState.count 1。第 2 次点击放入任务函数f2(prevState) prevState.count 1。第 3 次点击放入任务函数f3(prevState) prevState.count 1。React 开始处理队列串行执行执行f1传入当前状态0。返回0 1 1。状态更新为1。执行f2传入最新的状态 1React 会自动把上一步的结果传进来。返回1 1 2。状态更新为2。执行f3传入最新的状态 2。返回2 1 3。状态更新为3。最终结果count变成了3。符合预期no-useless-constructor在 React 的类组件中如果你的构造函数中除了调用 super(props) 之外没有其他逻辑例如没有初始化 state或没有绑定 this那么整个构造函数是可以删除的。class operateWith extends Component { constructor(props) { super(props); } }如果不写构造函数React 类组件会有一个默认的构造函数它会自动调用super(props)。不能删除情况constructor(props) { super(props); this.state { count: 0 }; // 必须保留 }现代写法建议class operateWith extends Component { // 直接初始化 state state { count: 0 }; // 自动绑定 this无需在 constructor 中 bind handleClick () { console.log(this.state.count); }; render() { return div onClick{this.handleClick}{this.state.count}/div; } }no-case-declarationsUnexpected lexical declaration in case block. no-case-declarations禁止在switch语句的case或default子句中直接声明变量使用let、const、class或function。为什么会报错这是由 JavaScript 的作用域提升Hoisting和switch 语句的特殊执行机制导致的潜在 Bug。在 switch 语句中所有的 case 标签共享同一个块级作用域。如果你在某个 case 中用 let 或 const 声明了一个变量这个变量在整个 switch 块中都是“存在”的虽然还没初始化这会导致以下问题暂时性死区TDZ错误如果代码执行流跳过了声明该变量的 case例如进入了另一个 case但后续代码试图访问该变量就会抛出 ReferenceError。重复声明错误如果有多个 case 都声明了同名的变量会报错。错误示例switch (foo) { case 1: let x 1; // ❌ 报错Unexpected lexical declaration in case block. break; case 2: console.log(x); // 即使这里没声明 x但因为作用域共享x 在这里也是存在的但在未初始化状态 break; }如何修复最标准的修复方法是给每个需要声明变量的case添加一个大括号{}从而创建一个新的块级作用域。✅ 正确写法switch (foo) { case 1: { // 添加大括号创建独立作用域 let x 1; console.log(x); break; } case 2: { // 这里也可以声明同名的 x不会冲突 let x 2; console.log(x); break; } default: { const y default; break; } }加上{}后let x的作用域就被限制在这个大括号内部了。其他的case无法访问到这个x也不会发生变量提升导致的冲突或暂时性死区问题。no-return-assign禁止在 return 语句中使用赋值表达式目的是防止开发者在 return 时意外地执行了赋值操作而不是进行比较或返回预期的值。这通常是因为混淆了 (赋值) 和 / (比较)。为什么要禁止 意图不明确可读性差当你看到return foo bar 2;时阅读代码的人需要停下来思考这个函数的真正目的是计算并返回bar 2的结果还是为了产生副作用即更新foo的值或者这只是一个笔误原本想写的是比较运算符或这种歧义增加了代码维护的认知负担。⚠️ 容易掩盖错误在 JavaScript 中赋值和/比较非常相似。如果在return中误用了赋值符号代码依然能正常运行不会报错但逻辑却完全错了。禁止这种写法可以从源头杜绝这类难以察觉的 Bug。 违反单一职责原则函数应该专注于做一件事。如果一个函数既负责“修改外部状态赋值”又负责“返回结果”这就混淆了命令做某事和查询获取某事的界限。// ❌ 错误示例本意是比较结果变成了赋值并返回 true/false (取决于语言特性JS中返回赋值后的值) function check(a, b) { return a b; // 报错应该是 return a b; } ref{node (this.input node)} // ✅ 推荐写法清晰表明目的是副作用而非返回值 ref{node { this.input node; // 不需要 return或者显式 return undefined }}import/extensionsUnexpected use of file extension js for video.js/dist/video.jsESLint认为在导入语句中显式书写.js文件扩展名是不规范的这条规则旨在保持导入路径的整洁和一致性。通常模块打包工具如Webpack可以自动解析不带扩展名的文件因此 ESLint 建议省略它们。import videojs from video.js/dist/video.js; // ❌ ESLint 报错 import videojs from video.js/dist/video; // ✅ 正确import/no-webpack-loader-syntaxrequire(!style-loader!css-loader!video.js/dist/video-js.css); // ❌ ESLint 报错 import video.js/dist/video-js.css; // ✅ 正确代码使用了Webpack的“内联 Loader 语法”即 ! 符号但 ESLint 的规则 import/no-webpack-loader-syntax 禁止了这种做法。在现代前端开发中最佳实践是将 Loader 配置在 webpack.config.js 文件中而不是写在业务代码里。这样可以让代码更干净且与构建配置解耦。jsx-a11y/media-has-captionMedia elements such as audio and video must have a track for captions.核心目的是强制要求为多媒体元素提供字幕以确保听障人士或无法听到声音的用户也能获取内容信息。规则要求audio和video标签必须包含一个track子元素且该track的kind属性必须设置为captions。Captions (隐藏式字幕)不仅包含对话还包含非语言的声音信息如[音乐]、[笑声]、[脚步声]这对于听障用户至关重要。// 音频元素 audio controls srcsound.mp3 track kindcaptions srccaptions.vtt srcLangen labelEnglish Captions / /audio // 视频元素 video controls srcmovie.mp4 track kindcaptions srccaptions.vtt srcLangzh label中文字幕 default / /video属性说明示例值kind必须项。设置为captions以满足无障碍要求。captionssrc字幕文件的路径通常是 WebVTT (.vtt) 格式。./subs.vttsrcLang字幕文本的语言代码。zh,enlabel用户可见的轨道标签用于切换字幕。中文,Englishdefault(可选) 指定该轨道为默认显示。defaultcaptionsvssubtitlesSubtitles假设观众能听到声音但听不懂语言主要用于翻译。Captions假设观众听不到声音因此需要描述背景音、语气和音效这是jsx-a11y规则强制要求的。关于audio标签的特殊性虽然 HTML 标准允许audio嵌套track但浏览器对audio的原生字幕支持非常有限通常不显示。为了满足 ESLint 规则你依然需要在代码中写上track kindcaptions ... /这样可以通过静态代码检查。为了实际用户体验如果要在音频播放时显示字幕通常需要使用 JavaScript 库如 WebVTT 解析器来监听轨道并动态渲染文本或者使用video标签来播放纯音频配合一张静态海报图因为video对字幕的原生支持更好。class-methods-use-this在类中定义的onPanelChange方法没有使用this关键字class MyComponent extends React.Component { // ... 其他代码 onPanelChange(value) { console.log(面板值改变了:, value); // 这个方法里没有用到 this } // ... 其他代码 }方法一将方法改为静态方法如果onPanelChange方法确实不需要访问或修改当前组件实例的任何属性或方法那么最合适的做法就是将其声明为静态方法。class MyComponent extends React.Component { // ... 其他代码 static onPanelChange(value) { // 加上 static 关键字 console.log(面板值改变了:, value); } // ... 其他代码 }方法二在规则中排除该方法在某些特定场景下比如作为回调函数传递给第三方库的组件时你可能必须将它定义为实例方法即使它内部没有使用 this。这时你可以通过配置 ESLint 规则来忽略这个警告。你需要修改项目的 ESLint 配置文件如 .eslintrc.js 或 .eslintrc.json为 class-methods-use-this 规则添加 exceptMethods 选项// .eslintrc.js module.exports { // ... 其他配置 rules: { class-methods-use-this: [error, { exceptMethods: [onPanelChange] }] } };方法三使用箭头函数Strings must use singlequote.字符串必须使用单引号也可以向下面这样改为强制使用双引号// .eslintrc.js module.exports { rules: { quotes: [error, double] // 强制使用双引号 } }Block must not be padded by blank lines.代码块内部的首尾不应有多余的空行错误示例function login() { console.log(登录逻辑); // ...其他代码 }正确写法function login() { console.log(登录逻辑); // ...其他代码 }