基于Sublime Text与Riot.js的轻量级组件化前端页面极速编写-sublime-PHP中文网

sublime text 默认不支持 riot.js 的 .tag 文件语法，需手动设为 html 语法并配置 syntax_profiles 启用 emmet；保存后需通过 index.html 入口加载并调用 riot.mount() 才能实时渲染，配合 live-server 可实现自动刷新。

基于sublime text与riot.js的轻量级组件化前端页面极速编写

Sublime Text 本身不识别 Riot.js 的自定义标签语法（如 <my-tag></my-tag>、<script type="riot"></script>），直接打开 .tag 文件会丢失高亮、缩进错乱、Emmet 失效——这不是 Sublime 不行，是它默认没加载对应语法定义。

怎么让 .tag 文件正确高亮和缩进

Sublime 默认不带 Riot.js 语法支持，必须手动绑定文件扩展名到 HTML 或自定义语法。最稳妥的做法是把 .tag 当作 HTML 处理：

右键打开任意 .tag 文件 → 选择 “Set Syntax” → “HTML”
再按 Ctrl+Shift+P 调出命令面板，输入 Preferences: Settings – Syntax Specific，回车

在弹出的右侧用户设置中填入：

{"tab_size": 2, "translate_tabs_to_spaces": true, "detect_indentation": false}

保存后，该类型文件就固定用 2 空格缩进，且不会被自动覆盖

注意：不要装网上流传的老旧 RiotJS 插件（如 2015 年版），它们早已停止维护，会导致 View In Browser 插件无法识别文件路径或报 Unable to find file 错误。

Emmet 在 .tag 文件里为什么不能用 tab 展开

Emmet 默认只在 HTML、CSS、JavaScript 等白名单语法下激活。即使你手动设了 HTML 语法，Sublime 仍可能因文件后缀不是 .html 而禁用 Emmet。

打开 Preferences → Package Settings → Emmet → Settings
在右侧用户设置中加入：
```
"syntax_profiles": {"HTML": "html|tag"}
```
同时确保 abbreviations 下的 html 配置存在（默认就有，不用改）
重启 Sublime 或执行 Emmet: Refresh Syntax List 命令（Ctrl+Shift+P 输入即可）

之后在 .tag 文件里写 div.my-comp>p{hello}+span + Tab 就能正常展开，且 <script type="riot"></script> 内部写 const 也能触发 JS 补全（前提是已装 ES6 Syntax 或 JavaScript Next 插件）。

根据ui图生成前端页面

将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。

下载

保存时自动刷新浏览器，但 riot.mount() 报错

用 View In Browser 打开 .tag 文件会直接读取源码，浏览器无法解析自定义标签；必须通过一个 .html 入口加载编译后的 JS。常见错误是：

直接双击 my-component.tag → 浏览器显示原始文本，控制台报 Uncaught ReferenceError: riot is not defined
写了 <script src="riot+compiler.min.js"></script> 但忘了加 <script type="riot"></script> 标签或漏掉 riot.mount()
View In Browser 设置里浏览器路径写错，比如 Windows 下用了正斜杠 C:/Program Files/...，实际要写成双反斜杠 C:\Program Files\...

正确做法：建一个 index.html，内容包含 <my-component></my-component>，引入 riot+compiler.min.js，并在 <script></script> 中调用 riot.mount('my-component')；然后右键 index.html → View In Browser。这样每次保存 .tag 后，手动刷新页面就能看到更新效果。

想边写边看 riot 组件实时渲染，但不想手动刷新

Sublime 没有内置 Live Server，但可借助外部工具实现「保存即刷新」：

全局安装 live-server：npm install -g live-server
终端进入项目根目录，运行：live-server --watch="*.tag,*.html"
它会自动监听 .tag 和 .html 变更，并触发浏览器刷新（需配合 riot.compile() 或构建脚本）
关键点：必须在 index.html 中用 <script type="riot"></script> 引入组件，或用 fetch() 动态加载 .tag 字符串再 riot.compile()，否则 live-server 刷新后组件仍不生效