Atom需手动配置插件才能实现CSS高亮、补全与格式化：通过设置语法识别、安装autocomplete-css和atom-beautify等插件，并正确配置文件类型、补全触发时机及格式化引擎。
Atom 本身不“写 CSS”，它只是个文本编辑器；真正写 CSS 靠的是你手动输入、语法高亮、自动补全和插件辅助——而这些能力默认很弱，必须手动配。
怎么让 Atom 正确识别并高亮 CSS 文件
Atom 默认能识别 .css 后缀，但如果你打开的是内联样式、.html 里的 <style> 块，或自定义后缀（比如 .pcss），就可能不触发 CSS 语法高亮。
- 右下角状态栏点击当前语法名（如 “Plain Text”），选 “CSS” 手动切换
- 永久绑定后缀：进入
Settings → Core → File Icon Suffixes，把css加入列表；再进Settings → Packages → language-css → Settings，在File Types里添加.pcss、.module.css等 - 对 HTML 中的
<style lang="scss">这类，需额外装language-sass或language-postcss插件，并确保它们优先级高于language-html
怎么开启 CSS 属性/值自动补全
Atom 自带的 autocomplete-plus 对 CSS 支持有限，默认只补标签名和部分属性，不补值（比如 display: flex 的 flex）、不识别自定义变量、不支持 CSS-in-JS 语法。
- 必须装
autocomplete-css插件（注意不是atom-autocomplete-css，后者已弃用） - 该插件依赖项目根目录下的
node_modules或全局postcss配置才能识别custom-properties和nesting - 补全触发时机是输入冒号后按
Tab或Enter，不是输入属性名就弹——这点和 VS Code 不同，容易误以为没生效 - 若补全不出现，检查
Settings → Packages → autocomplete-css → Settings中 “Enable Autocomplete” 是否开启，且 “Show Vendor Prefixes” 按需勾选（否则-webkit-类前缀不会出现）
怎么快速格式化 CSS 代码
Atom 没有内置格式化功能，Ctrl+Shift+I 是 HTML 格式化快捷键，对 CSS 无效。强行用会破坏缩进或合并声明。
立即学习“前端免费学习笔记（深入）”；
- 推荐装
atom-beautify，安装后进其设置页，在 “CSS” 选项卡中指定格式化引擎为prettier（需本地项目装prettier）或csscomb（更轻量） - 关键配置项：
Indent Size设为 2（匹配主流规范），End With Newline开启，Remove Trailing Whitespace勾选 - 格式化快捷键默认是
Ctrl+Alt+B，可在Keymap里改成Shift+Alt+F保持跨编辑器一致 - 注意：如果 CSS 里混写了
@apply（Tailwind）或composes（CSS Modules），csscomb会报错跳过，此时必须切到prettier并确保prettier-plugin-css-grid等插件已安装
Atom 的 CSS 编辑体验高度依赖插件组合和手动配置，不像现代编辑器开箱即用；最常被忽略的是插件之间的冲突——比如 emeraldwalk-js-refactor 会劫持 Ctrl+Click 跳转，导致无法跳转到 CSS 变量定义处，这类细节得一个个关掉试。
