VSCode对CSS-in-JS支持有限，需协同配置插件与设置：styled-components需vscode-styled-components+ES7+ snippets并禁用Auto Rename Tag干扰；Emotion需@emotion/react类型声明及babel插件配置；TS 5.5+下vscode-styled-components存在泛型高亮失效问题。
VSCode 默认对 CSS-in-JS（如 styled-components、Emotion、Linaria）支持有限，语法高亮错乱、类名跳转失效、样式补全缺失是常见问题。直接装「CSS Peek」或「Live Sass Compiler」没用——它们不处理 JS 文件里的字符串模板。
styled-components 语法高亮和自动补全必须配 styled-components-snippets + ES7+ React/Redux/React-Native snippets
单纯依赖语言模式识别（比如把 .js 文件设为 JavaScript React）只能让 tagged template 字符串变蓝，但无法触发 CSS 属性提示。真正起作用的是这两款插件协同：
-
styled-components-snippets提供sc、scf、scs等快捷片段，生成带类型推导的 styled 组件骨架 -
ES7+ React/Redux/React-Native snippets负责在css``或styled.div``内部激活 CSS 语言服务（需配合设置） - 必须在
settings.json中启用："emeraldwalk.runonsave": {"commands": [{"match": "\.js$|\.jsx$|\.ts$|\.tsx$", "cmd": "editor.action.triggerSuggest"}]}，否则光标进入模板字面量后不会自动弹出补全
Emotion 用户别漏掉 @emotion/babel-plugin-jsx-pragmatic 对应的 VSCode 配置
Emotion v11+ 推荐用 @emotion/babel-plugin-jsx-pragmatic 替代旧版 @emotion/babel-preset-css-prop，但 VSCode 默认不认识 css prop 的类型声明。现象是：写 <div css="{{" color:></div> 时属性名没高亮，css 下划线报错。
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 先确保项目已安装
@emotion/react和@emotion/babel-plugin-jsx-pragmatic - 在
jsconfig.json或tsconfig.json中加入："compilerOptions": {"types": ["@emotion/react"]} - VSCode 插件层面需禁用
Auto Rename Tag对css属性的干扰（它会错误地尝试同步重命名css为其他属性）
vscode-styled-components 插件的坑：它不兼容 TypeScript 5.5+ 的 template string type 推导
如果你升级了 TS 到 5.5+，又用了 styled.div`...` 这种带泛型的写法，vscode-styled-components 会直接放弃语法高亮，整块模板变灰。这不是配置问题，是插件底层解析器未适配新 TS 类型系统。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：降级到 TS 5.4.x，或改用
const Button = styled('button')`...`（避免泛型紧贴styled调用） - 长期建议：切换到
styled-jsx+Next.js内置支持，或等待插件作者发布 2.0 版本（当前最新为 1.7.5，2026 年 7 月仍未修复） - 验证是否触发该 bug：打开一个含泛型 styled 组件的文件，按
Ctrl+Shift+P→ 输入Developer: Toggle Developer Tools，看 Console 是否报TypeError: Cannot read property 'kind' of undefined
真正卡住人的不是插件装不装，而是哪些插件之间会互相覆盖语言服务——比如同时启用 vscode-styled-components 和 ES7+ snippets，前者会劫持所有 styled.* 模板，后者则想接管所有 css``，结果谁都不完整生效。得靠 "files.associations" 手动切分作用域。
