VS Code未灰化未使用变量问题求助

我在Stack Overflow上试过各种相关解决方案都没用。现在我的VS Code没法把代码里未使用的Component导入和happy常量灰化，已经尝试启用javascript.showUnused.enabled等相关设置，重置用户设置、禁用扩展后问题依然存在。

代码示例 #

import { Component } from 'react'
import './search-box.styles.css'

const happy = ''

const SearchBox = ({ className, placeholder, onChangeHandler }) => {
  return (
    <input
      className={`search-box ${className}`}
      type='search'
      placeholder={placeholder}
      onChange={onChangeHandler}
    />
  )
}

export default SearchBox

已尝试的设置 #

"javascript.validate.enable": true,
"javascript.showUnused.enabled": true,
"typescript.showUnused.enabled": true,
"editor.showUnused": true,

VS Code版本信息 #

Version: 1.82.2 (Universal)
Commit: abd2f3db4bdb28f9e95536dfa84d8479f1eb312d
Date: 2023-09-14T05:59:47.790Z
Electron: 25.8.1
ElectronBuildId: 23779380
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Darwin arm64 22.6.0

已安装扩展 #

Babel ES6/ES7
Better Comments
colorize
crates
Docker
DotENV
Emmet commands and keybindings
ES7+ React/Redux/React-Native snippets
Even Better TOML
GitHub Theme
GitLens
GraphQL
IntelliCode
IntelliCode API Usage Examples
Live Server
Markdown All in One
Material Icon Theme
Mithril Emmet
One Dark Pro
Path Autocomplete
Prettier - Code formatter
rust-analyzer
Snazzy Operator
Spirted Away Color Theme
Stylelint
Tailwind CSS intelliSense
vsode-icons
vscode-styled-components

问题截图 #

解决方案尝试 #

1. 重启语言服务
   打开命令面板（Cmd/Ctrl + Shift + P），输入TypeScript: Restart TS Server执行重启——JavaScript文件默认也依赖该语言服务处理代码检查。

2. 排查工作区设置覆盖
   查看项目根目录下的.vscode/settings.json，确认没有禁用editor.showUnused或相关JS/TS未使用代码高亮的配置。

3. 检查主题样式冲突
   切换到VS Code默认主题（如Light+或Dark+）测试，如果灰化生效，说明当前主题未定义未使用代码的高亮样式。可以手动添加自定义样式：

   "editor.tokenColorCustomizations": {
     "textMateRules": [
       {
         "scope": "variable.other.unused",
         "settings": {
           "foreground": "#808080"
         }
       },
       {
         "scope": "meta.import.unused",
         "settings": {
           "foreground": "#808080"
         }
       }
     ]
   }
   

4. 配置项目检查规则
   在项目根目录创建或修改jsconfig.json，启用JS代码检查：

   {
     "compilerOptions": {
       "checkJs": true
     }
   }
   

5. 彻底重置VS Code
   关闭VS Code后删除用户配置文件夹：

   • Mac：~/Library/Application Support/Code
   • Windows：%APPDATA%\Code
   • Linux：~/.config/Code
     重启后仅安装必要扩展测试问题是否解决。

内容的提问来源于stack exchange，提问作者Leon Gaban