提升CSS-in-JS编写体验的VSCode常用插件配置-VSCode-PHP中文网

vscode对css-in-js支持有限，需协同配置插件与设置：styled-components需vscode-styled-components+es7+ snippets并禁用auto rename tag干扰；emotion需@emotion/react类型声明及babel插件配置；ts 5.5+下vscode-styled-components存在泛型高亮失效问题。

提升css-in-js编写体验的vscode常用插件配置

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 下划线报错。

Comprehensive Three.js 3D graphics reference

详细的 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" 手动切分作用域。