先搞懂：为什么“noUnusedLocals”会找上门？
要解决问题，得先知道它为啥会出现。你可能会说：“我就定义个变量不用，至于报错吗？” 还真至于。“noUnusedLocals”其实是ESLint（JavaScript代码检查工具）和TypeScript内置的一条规则，直译过来就是“禁止未使用的局部变量”。它的作用就像你写文章时的“错别字检查”，帮你找出代码里的“废话”——那些定义了却没派上用场的变量。
为啥工具非要管这事？你想想，未使用变量就像你衣柜里从来不穿的衣服，一件两件还好，多了就会占地方、乱糟糟。代码里的未使用变量也是同理：一方面，它会让代码变臃肿，其他开发者看你的代码时，看到一堆没用到的变量，根本搞不清你原本想实现什么逻辑，维护起来头都大； 有些未使用变量可能是你写代码时的“思维残留”，比如你一开始想定义个变量存数据，后来改了思路忘了删，结果后面的人接手时，可能会误以为这个变量有特殊用途，跟着你的“错误思路”走，最后越改越乱。所以ESLint和TypeScript才会把这条规则设为默认开启，本质是帮我们养成“写干净代码”的习惯。
这规则也不是“一刀切”的，不同场景下报错的原因还不一样。我 了三种最常见的“踩坑”情况，你可以对照看看自己属于哪一种：
第一种，是“真·无用变量”。就是你定义了变量，后面从头到尾没用到过，比如这样：
function getUser() {
const name = '张三'; // 定义了name变量
const age = 25; // 定义了age变量
return { id: 1 }; // 但只返回了id，name和age完全没用到
}
这种情况ESLint直接就会报错：“’name’ is assigned a value but never used. (no-unused-locals)”，没商量。
第二种，是“看似无用，实则被隐藏”。去年我帮一个朋友看代码时，他就遇到过这种情况：他定义了个变量list，然后在下面写了段注释掉的代码console.log(list)，结果ESLint还是报了“noUnusedLocals”。他当时很纳闷：“我明明用了啊，只是注释掉了而已！” 但工具可不认注释——在ESLint眼里，被注释的代码等于不存在，所以变量只要没在“活代码”里出现，就算未使用。
第三种，是“函数参数未使用”。比如你写了个事件处理函数：
const handleClick = (e: React.MouseEvent) => {
console.log('点击了按钮'); // 没用到e参数
};
这时候TypeScript就会报错：“’e’ is declared but its value is never read. (6133)”，这里的6133就是TypeScript里和“noUnusedLocals”对应的错误码。很多新手会忽略函数参数，觉得“我不需要这个参数，但定义一下没关系”，结果就触发了报错。
可能你会好奇，这些工具是怎么判断变量有没有被使用的？简单说，它们会扫描你的代码，追踪每个变量的“引用”——如果一个变量在定义后，没有被赋值给其他变量、没有作为参数传给函数、也没有用在条件判断或循环里，那就会被判定为“未使用”。比如你写const a = 10;，后面只写了// a + 1，这不算使用；但只要写了const b = a;或者if (a > 5) {}，工具就会认为a被使用了。
这里要注意，ESLint和TypeScript的检查逻辑还有点不一样。ESLint更关注JavaScript代码，规则配置更灵活；TypeScript则是在类型检查阶段进行判断，对变量类型的追踪更严格。所以有时候你可能会遇到“ESLint没报错，但TypeScript报错”的情况，这很正常，因为它们是两套独立的检查系统。如果你想了解更详细的规则，可以看看ESLint官方文档对no-unused-locals的说明，里面有完整的判断标准。
三步实操：从报错到解决，我带实习生踩过的坑都在这
知道了“noUnusedLocals”为啥会出现，接下来就是最关键的：怎么解决。我带过5个实习生，他们几乎都踩过这个坑，后来我 了一套“三步排查法”，现在团队里遇到这类问题，基本5分钟内就能搞定。你跟着做，保准管用。
第一步：先别急着删，判断变量是不是“真·无用”
遇到报错，很多人的第一反应是“删了再说”，但这可能会埋下隐患。去年有个实习生就是这样：看到“noUnusedLocals”报错，直接把变量删了，结果第二天测试时发现，那个变量其实是后端接口返回的一个重要字段，只是当时接口还没联调，所以暂时没用到。最后只能再把变量加回去，白折腾半天。所以第一步，一定要先判断这个变量是不是“真的没用”。
怎么判断？教你两个小技巧。第一个技巧：全局搜索变量名。在VSCode里按Ctrl+Shift+F（Mac是Cmd+Shift+F），输入变量名，看看除了定义的那一行，其他地方有没有引用。比如你定义了const userInfo = {};，搜索“userInfo”后，发现下面有一行被注释掉的setUser(userInfo);，那这个变量可能只是“暂时没用”，后面联调接口时会用到，这时候就别删。
第二个技巧：想想“变量的使命”。有时候变量没被直接使用，但可能是你“计划中”要用的。比如你写了个表单，定义了const [formData, setFormData] = useState({});，然后只写了姓名和电话的输入框，还没来得及写地址输入框，这时候formData里的address字段可能暂时没被使用，但它是表单的必要字段，后面肯定会用到。这种情况，变量就不是“无用”的，而是“未完成的工作”。
那怎么区分“暂时没用”和“真·无用”？有个简单的标准：如果这个变量在你当前开发的功能里，3天内都不会用到，或者你根本想不起来当初为什么定义它，那大概率就是无用变量，可以删； 如果你能明确说出“这个变量后面要用来做XX”，那就先留着，或者用个注释标一下“// 后续接口联调时使用”，避免自己忘了。
第二步：用对方法处理未使用变量，别破坏代码规范
判断完变量是不是真的无用，接下来就可以处理了。这里有三个处理方法，按“推荐程度”排序，你可以根据情况选：
最推荐：直接删除冗余变量
如果确定变量真的没用，删了是最干脆的办法。比如你定义了const a = 1; const b = 2;，结果只用到了b，那就直接把const a = 1;这行删掉。去年我优化一个老项目时，光是删除未使用变量就精简了300多行代码，整个文件看起来清爽多了。不过删之前最好确认一下：这个变量是不是在其他文件里被引用了？特别是在React或Vue的组件里，有时候变量会通过props或context传给子组件，这时候全局搜索就很重要，别删了父组件的变量，导致子组件报错。
次推荐：用下划线前缀标记“临时变量”
有时候你可能需要定义一个变量，但暂时用不上，比如调试时打印日志，或者接口返回的数据里有个暂时用不到的字段。这时候直接删了怕后面忘了，留着又报错，怎么办？可以在变量名前加个下划线_，比如const _tempData = res.data;。ESLint和TypeScript默认会忽略以下划线开头的变量，认为这是“有意为之的临时变量”。不过要注意，这个方法只适合“短期临时”使用，比如调试完就应该删掉，别让下划线变量在代码里堆积，不然时间长了又会变乱。
万不得已：用注释忽略特定行
如果上面两种方法都不适用，比如你在写一个工具函数，需要兼容旧版本API，必须保留某个未使用的参数，这时候可以用注释让工具“闭嘴”。ESLint可以用// eslint-disable-line no-unused-locals，TypeScript可以用// @ts-ignore。比如：
function oldApi(param1, param2 / eslint-disable-line no-unused-locals /) {
// param2是旧API的参数，现在已废弃但必须保留
return param1;
}
不过我要提醒你，这招千万别滥用！去年有个同事为了省事，把所有未使用变量都用// @ts-ignore注释掉，结果半年后代码里堆了十几个下划线变量和忽略注释，接手的人根本看不懂哪些是有用的，哪些是无用的，最后花了两天才理清楚。所以忽略注释只能是“应急方案”，用完一定要记得处理，或者在注释里写清楚“为什么要忽略”，比如// @ts-ignore: 兼容v1.0版本API，后续会移除。
第三步：微调配置，让工具“聪明”一点（避免误报）
如果你的项目里经常出现“误报”——比如有些场景下变量确实需要定义但暂时不用，每次都删或注释太麻烦，这时候可以微调工具的配置，让它更“懂”你的代码。
先看ESLint的配置。你的项目根目录下应该有个.eslintrc.js（或.eslintrc.json）文件，打开它，找到rules字段，添加或修改"no-unused-locals": "warn"。默认情况下，这个规则是"error"级别，会导致项目编译失败；改成"warn"后，工具只会在控制台警告，但不会阻止项目运行。适合什么场景呢？比如你在开发一个新功能，变量定义好了但还没写完使用逻辑，这时候先设为warn，等功能写完再改回error。
如果你用的是TypeScript，可以在tsconfig.json里调整。找到compilerOptions，添加"noUnusedLocals": false（默认是true）。不过TypeScript的这个配置是“全局开关”，关掉后所有未使用变量都不检查了，不太推荐。更好的办法是用"noUnusedLocals": true，但配合"allowUnusedLabels": true，允许未使用的标签（不过这个用得少）。
还有个更精细的配置：忽略特定文件或目录。比如测试文件里经常会有临时变量，你可以在.eslintignore文件里添加/.test.js，让ESLint跳过测试文件的检查。或者在.eslintrc.js里用overrides字段针对特定文件设置规则：
module.exports = {
rules: {
"no-unused-locals": "error" // 全局默认error
},
overrides: [
{
files: ["/.test.js"], // 测试文件
rules: {
"no-unused-locals": "warn" // 测试文件设为warn
}
}
]
};
这样既能保证业务代码的严格检查，又能避免测试文件的误报。具体的配置可以参考TypeScript官方文档的compilerOptions说明，里面有详细的参数解释。
最后提醒你，改完配置后一定要重启开发服务器（比如npm start或yarn dev），不然配置可能不生效。如果你不确定配置有没有改对，可以在终端运行npx eslint print-config .eslintrc.js，查看当前生效的规则，确认no-unused-locals的级别是不是你设置的。
按这三步操作，90%的“noUnusedLocals”报错都能解决。不过我要多说一句，工具是为了帮我们写更好的代码，而不是限制我们。所以遇到报错时，别烦躁，把它当成一个“优化代码”的信号——每次解决一个未使用变量，你的代码就干净一分，长期下来，不仅项目维护成本会降低，你自己的编码习惯也会越来越好。
如果你按这三步做了，欢迎在评论区告诉我你的报错有没有解决，或者你还有什么处理未使用变量的小技巧？毕竟写代码这事儿，互相分享经验才能进步更快嘛。
你有没有遇到过这种情况？写个点击事件处理函数，比如handleClick，定义参数的时候顺手写了个e（事件对象），结果函数里就打印了一句“按钮点击了”，根本没用到e，结果ESLint直接红了，报个noUnusedLocals。当时我还纳闷呢，这参数是函数定义里的，又不是我单独声明的变量，怎么也算未使用变量？后来查了文档才明白，函数参数本质上就是“局部变量”的一种——你在函数括号里声明的每个参数，和函数内部用let/const定义的变量一样，都属于函数作用域内的局部变量，所以ESLint和TypeScript肯定会管。之前带实习生的时候，他写了个表单提交函数，参数里列了name、age、address三个，结果后面只用到了name和age，address参数忘了删，整个函数就报错了，当时他还以为是参数名写错了，排查半天发现是address没被使用，就是这个道理。
那遇到这种函数参数未使用的情况怎么办呢？分两种情况看。如果这个参数确实是多余的，比如你写函数的时候手滑多写了，或者后面改逻辑用不到了，那就直接删掉，最干脆。但如果参数必须保留呢？比如对接后端接口的时候，旧版本接口要求传这个参数，虽然你现在没用到，但删了接口会报错，这时候就可以在参数名前面加个下划线，比如把address改成_address，工具看到下划线前缀，就知道这是你有意保留的临时参数，不会再报错。我之前对接一个第三方登录SDK的时候，回调函数必须传code、state两个参数，但我们项目暂时只用到code，state参数就用_state标记，既符合接口要求，又不会触发noUnusedLocals，亲测管用。 如果这种情况特别多，也可以在ESLint配置里单独设置，不过一般小场景用下划线就够了，简单方便。
为什么函数参数未使用也会触发noUnusedLocals报错？
函数参数本质上属于“局部变量”的一种，ESLint和TypeScript会将其纳入noUnusedLocals规则的检查范围。例如定义函数时声明了参数但未在函数体内使用，如“const handleChange = (e) => { console.log(‘点击’); }”，此时参数“e”会被判定为未使用变量。处理方法与普通变量类似：若确定参数无用可直接删除；若需保留（如兼容旧接口），可在参数名前加下划线（如“_e”）或通过工具配置忽略特定函数参数检查。
ESLint和TypeScript的noUnusedLocals规则有什么区别？
两者核心目标一致（检查未使用局部变量），但检查逻辑和场景略有不同。ESLint的no-unused-locals规则更关注JavaScript代码，可通过配置灵活调整检查级别（error/warn/off）或忽略特定文件；TypeScript的noUnusedLocals规则集成在类型检查中，对变量类型追踪更严格，默认会检查函数参数、解构变量等场景。实际开发中两者可能同时生效，需分别在.eslintrc和tsconfig.json中配置。
用下划线前缀（_变量名）忽略未使用变量，会影响代码质量吗？
下划线前缀（如“_temp”）是业内常用的“临时标记方案”，用于告知工具和其他开发者“该变量暂时未使用但有意保留”，短期使用（如开发中调试、接口联调阶段）不会影响代码质量。但需注意：这属于临时解决方案，功能开发完成后应及时清理或补充使用逻辑，避免长期保留大量下划线变量导致代码可读性下降。
修改ESLint配置后，为什么noUnusedLocals报错还是存在？
可能原因包括：
可以完全关闭noUnusedLocals规则吗？
不 完全关闭。noUnusedLocals规则的核心价值是帮助开发者减少冗余代码、提升可维护性，长期关闭可能导致代码中堆积大量无用变量，增加后续维护成本。若确需减少干扰，可将规则级别从“error”调整为“warn”（仅警告不阻断编译），或通过.eslintrc的“overrides”配置针对特定文件（如测试文件、临时脚本）放宽检查，兼顾规范与开发效率。
