JsHint检测到侧边栏JS代码存在未使用变量告警但功能正常如何修复

报错原因 #

JsHint 属于静态代码检查工具，只会扫描当前 JS 文件内部的函数调用记录。你定义的 openFunction 和 closeFunction 是在 HTML 的 onclick 行内属性中调用的，没有在 JS 文件内显式调用，因此 JsHint 无法识别到调用关系，就会误判为未使用变量，属于正常的误报，不会影响实际功能运行。

修复方案 #

方案1：快速消除误报（改动最小） #

直接在 JS 文件的最顶部添加一行 JsHint 识别的注释，告诉工具这两个函数是对外暴露给外部调用的，无需标记为未使用：

/* exported openFunction, closeFunction */
// 后面接你原来的JS代码即可
function openFunction(){
  document.getElementById('sidebar-cont').style.width = "220px";
  document.getElementById('bg-sidenav').style.width = "100%";
}
function closeFunction() {
  document.getElementById('sidebar-cont').style.width = "0";
  document.getElementById('bg-sidenav').style.width = "0";
}

方案2：更规范的最佳实践（推荐） #

不要使用行内 onclick 属性绑定事件，改成在 JS 中通过事件监听绑定，既符合HTML结构和JS行为分离的开发规范，也能让 JsHint 正常识别到函数的调用关系，不会再报错。

第一步：修改HTML代码，删掉行内onclick属性

<div class="hamburger">
 <a href="javascript:void(0)"><i id="bars" class="fas fa-bars" aria-hidden="true"></i></a>
   </div>
<!---------------------Sidebar--------------------------->
<div id="bg-sidenav" class="bg-sidebar">
</div>
<div id="sidebar-cont" class="sidebar-content">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</div>

第二步：修改JS代码，添加事件绑定逻辑

// 提前获取DOM元素，避免重复查询
const barsBtn = document.getElementById('bars');
const sidenavBg = document.getElementById('bg-sidenav');
const sidebarCont = document.getElementById('sidebar-cont');

function openFunction(){
  sidebarCont.style.width = "220px";
  sidenavBg.style.width = "100%";
}
function closeFunction() {
  sidebarCont.style.width = "0";
  sidenavBg.style.width = "0";
}

// 绑定点击事件
barsBtn.addEventListener('click', openFunction);
sidenavBg.addEventListener('click', closeFunction);

不推荐的方案 #

不要直接关闭 JsHint 的 unused 检查规则，否则后续真的存在未使用的无效变量时，工具也无法给出提示，失去了代码检查的意义。

内容的提问来源于stack exchange，提问作者Rishabh Raj