Sublime Text配置Stylus样式开发环境_Sublime Text自动补全设置【前端】-sublime-PHP中文网

stylus文件无高亮需手动绑定语法；保存不生成css需全局安装stylus并配置user settings；vue中style标签需vue syntax highlight插件支持；css属性补全需正确设置auto_complete_selector和triggers。

sublime text配置stylus样式开发环境_sublime text自动补全设置【前端】

装完 Stylus 插件后打开 style.styl，代码全是灰色、无缩进、右下角显示“Plain Text”——这不是插件坏了，是 Sublime 根本没把 .styl 后缀和 Stylus 语法关联起来。

右键编辑器空白处 → Set Syntax → Stylus → Stylus（注意不是 Stylus (Deprecated)）
或按 Ctrl+Shift+P 输入 Set Syntax: Stylus 回车
检查 Preferences → Package Settings 里是否有 Stylus 条目；没有则重装：先 Package Control: Remove Package，再 Install Package 重装
若仍无选项，去 Preferences → Package Control → Disable Package 列表里确认 Stylus 没被禁用

Stylus 插件默认关闭编译，且完全依赖系统级 stylus 命令行工具。只改语法、不配配置，保存后零输出。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

填入最小可用配置（路径按项目结构调整）：

{
  "compileOnSave": true,
  "compress": false,
  "compileDir": "css",
  "compilePaths": {
    "": "css/"
  }
}

Stylus 插件只处理独立 .styl 文件，对 .vue 里的内联块完全无感知。高亮和编译是两套机制，不能互相替代。

必须安装 Vue Syntax Highlight 插件，并确保它启用 stylus 子语法支持
检查插件加载顺序：在 Preferences → Package Settings → Vue Syntax Highlight → Settings – User 中确认 "enable_stylus": true
<style lang="stylus"></style> 不会被 Stylus 插件编译；实时效果需靠 Vite/HMR 等开发服务器，不是靠 Sublime

Sublime 原生 CSS 补全默认不监听冒号后场景，display: 后不会自动提示 flex 或 grid，必须显式配置作用域与触发字符。

打开 Preferences → Settings – User，确保含以下三项：

"auto_complete": true,
"auto_complete_selector": "source.css -comment",
"auto_complete_triggers": [{"selector": "source.css", "characters": ":"}]

auto_complete_selector 必须精确为 source.css -comment，写成 source.css 会包含注释区域，导致补全错乱
新建 .css 文件后，右下角必须显示 CSS（非 Plain Text），否则补全逻辑压根不启动
若仍无效，检查是否误装了冲突插件（如旧版 CSS3），或控制台有 error loading syntax 报错