Atom CSS IntelliSense

一个为项目中的原子样式文件（默认 atom.scss/atom.css/atom.less）提供智能 CSS 类名自动补全的 VS Code 扩展。

快速开始（必看）

• 必需设置（否则在字符串里可能不弹出补全）：

  {
    "editor.quickSuggestions": { "strings": true },
    "editor.suggestOnTriggerCharacters": true
  }
  

• 样式文件匹配（默认搜 **/atom.scss、**/atom.css、**/atom.less，若你的项目命名不同请配置）：

  {
    "atomCssIntellisense.atomFileGlobs": [
      "**/atom.scss",
      "**/atom.css",
      "**/atom.less",
      "src/styles/**/*.scss",
      "src/**/*.css",
      "src/**/*.less"
    ]
  }
  

• 修改配置后建议执行：Developer: Reload Window

功能特性

• 🎯 精准补全: 只提示项目中样式文件实际定义的 CSS 类名
• 🔄 实时更新: 当样式文件变化时自动刷新类名缓存
• 🌐 多语言支持: 支持 Vue、HTML、JavaScript、TypeScript、JSX、TSX 文件
• ⚡ 智能过滤: 根据输入前缀智能过滤相关类名

支持的文件类型

• .vue - Vue 单文件组件
• .html - HTML 文件
• .js/.jsx - JavaScript / React JSX
• .ts/.tsx - TypeScript / React TSX

使用方法

1. 在支持的文件中，开始输入 CSS 类名：
   • 在 class=""、:class=""、className=""、反引号字符串或 class={...} 中输入
   • 若未自动弹出建议，按 Ctrl+Space 触发
2. 确保工作区中存在与 atomCssIntellisense.atomFileGlobs 匹配的样式文件（默认 **/atom.scss、**/atom.css、**/atom.less）

示例

<template>
  <div>
    <!-- 输入 "mg-b-" 会提示所有 margin-bottom 相关的类名 -->
    <div class="mg-b-8"></div>

    <!-- 输入 "flex" 会提示所有 flex 相关的类名 -->
    <div :class="'flex align-center'"></div>

    <!-- 输入 "font" 会提示所有字体相关的类名 -->
    <span className="font-600"></span>
  </div>
  
</template>

工作原理

1. 扩展激活时根据 atomCssIntellisense.atomFileGlobs 扫描工作区样式文件
2. 使用正则表达式解析文件中定义的 CSS 类名
3. 将类名缓存在内存中用于快速补全
4. 监听文件变化，自动重新加载

安装方法

打包安装（本地 VSIX）

npx @vscode/vsce package
code --install-extension atom-css-intellisense-<version>.vsix

调试信息

• 打开开发者工具查看日志：
  • "Atom CSS IntelliSense extension is now active!"
  • "Loaded X CSS classes from Y file(s)"
• 扩展不生效时自检：
  • 是否已开启字符串内建议（见“必需设置”）
  • 样式文件是否被 atomFileGlobs 匹配
  • 执行 Developer: Reload Window

更新日志

见 CHANGELOG.md。

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request！