Sublime Text 可通过插件配置支持 CSS-in-JS 开发：安装 Styled CSS 实现语法高亮，结合默认 CSS 片段和 JavaScript Completions 提供属性补全，启用括号匹配与主题优化提升可读性，并借助 SublimeLinter、ESLint 和 JsPrettier 实现 lint 与格式化。
Sublime Text 本身不原生支持 CSS-in-JS（如 styled-components 或 Emotion）的语法高亮、智能补全或错误提示，但通过合理配置插件和语法定义，可以显著提升开发体验。关键在于让 Sublime 正确识别模板字符串中的 CSS 内容，并提供类 CSS 的编辑能力。
安装并启用 CSS-in-JS 语法高亮
默认 Sublime 将 css`...` 或 styled.div`...` 视为纯 JavaScript 字符串，无法高亮 CSS。需使用社区维护的语法包：
- 推荐安装 Styled CSS 插件（Package Control 搜索即可），它为 tagged template literals（如
styled.div`...`、css`...`）提供准确的 CSS 语法着色 - 安装后，Sublime 会自动识别常见模式，如
styled.button``、css`${props => ...}`等，并启用 CSS 关键字、颜色值、选择器等高亮 - 若自动识别失效，可手动右下角点击语法名称 → Open all with current extension as… → 选择 Styled CSS
启用 CSS 片段与属性补全
仅靠语法高亮不够，还需快速输入 CSS 属性。可通过以下方式增强：
- 确保已安装 CSS 官方语言包（Sublime 默认自带），它提供完整的 CSS 属性/值片段（如输入
dis+ Tab 补全display） - 在 Styled CSS 语法激活状态下，这些 CSS 片段默认可用；若未触发，检查 Preferences → Settings – Syntax Specific，确认
"auto_complete_selector": "source.css - meta.tag - comment"存在且未被覆盖 - 对 Emotion 的
css函数，建议用对象写法（css({ display: 'flex' })）配合 JavaScript Completions 插件，获得更自然的 JS 对象属性提示
适配主题与括号匹配优化
CSS-in-JS 大量使用反引号和嵌套表达式，易出现视觉混乱：
立即学习“前端免费学习笔记（深入）”；
- 使用支持「bracket highlighting」的主题（如 Adaptive、Monokai），并在设置中开启：
"match_brackets": true、"match_brackets_content": true - 为反引号添加明显颜色区分：在主题文件（Preferences → Browse Packages → User）中自定义 scope，例如给
punctuation.definition.string.begin.css设为橙色 - 安装 BracketHighlighter 插件可进一步强化多层模板字符串的括号匹配（如
styled.div`${props => css`${props.theme.color}`}`）
调试与 lint 辅助（轻量级）
Sublime 不运行代码，但可联动外部工具提升可靠性：
- 搭配 SublimeLinter + ESLint，确保 .eslintrc 中启用了
plugin:react-hooks/recommended和plugin:emotion/recommended（对应库） - 对 styled-components，启用
styled-componentseslint 插件可捕获无效属性（如styled.div`dispaly: flex`拼写错误） - 保存时自动格式化：配置 JsPrettier 并在 prettier 配置中启用
plugins: ['prettier-plugin-styled-components']，保持 CSS-in-JS 格式统一
基本上就这些。不需要重装编辑器，也不必切换到 VS Code —— Sublime 经过这几步配置，完全能胜任 styled-components 和 Emotion 的日常开发，响应快、资源省，关键看配得准不准。
