基于Sublime Text的SolidJS组件开发提效-sublime-PHP中文网

答案：sublime需安装babel插件并手动将.tsx文件语法设为javascript (babel)，才能正确高亮solidjs特有标识符和事件绑定；再通过自定义snippet（scope限定为source.tsx）实现solidcomp快捷生成组件结构。

基于sublime text的solidjs组件开发提效

Sublime 里怎么让 SolidJS 语法高亮和补全正常工作

默认 Sublime 不认识 SolidJS 的 JSX 语法，.tsx 文件会按 TypeScript 渲染，但 createSignal、<for></for> 等标识符没语义高亮，Emmet 也不触发。这不是“不支持”，而是没配对语言语法定义。

实操建议：

安装 JavaScript (Babel) 插件（通过 Package Control），它比原生 JS 语法包更兼容现代 JSX 和响应式写法
右键 → Change Syntax → 选 JavaScript (Babel)，而非 TypeScript 或 HTML
对 .tsx 文件，手动在底部状态栏点击语法名，切换成 Babel → JavaScript (Babel)；否则 createEffect 会被当成普通函数，不加粗、无悬停提示
重启 Sublime 后，on:click、use:directive 这类 Solid 特有事件绑定会获得 HTML 层级的语法识别，避免误标为错误

如何在 Sublime 中快速生成 SolidJS 基础组件结构

手敲 import { createSignal } from "solid-js" 太慢，且容易漏掉 createEffect 或 onCleanup 的典型组合。Sublime 的 snippet 功能能解决这个问题，但必须适配 SolidJS 的响应式习惯。

实操建议：

菜单 → Tools → Developer → New Snippet...，粘贴以下内容并保存为 solid-component.sublime-snippet：

<snippet><content>function ${1:ComponentName}(${2:props}) {
const [${3:state}, set${4:State}] = createSignal(${5:initial});<p>createEffect(() => {
console.log("${3:state} changed:", ${3:state}());
});</p>
<p>return (
</p>
<div>
${6:/<em> your JSX here </em>/} 
</div>
);
}<p>export default ${1:ComponentName};
]]></p></content><tabtrigger>solidcomp</tabtrigger><scope>source.tsx</scope></snippet>

保存后，在 .tsx 文件中输入 solidcomp + Tab，即可展开完整结构
注意：不要用 js 或 jsx 作为 <scope></scope>，SolidJS 组件几乎都用 .tsx，否则 snippet 不触发
若需带 <for></for> 或 createStore 的 snippet，单独建新文件，避免一个 snippet 过于臃肿

为什么 Live Server 刷新后 SolidJS 页面空白或报错

常见现象是浏览器控制台报 Uncaught ReferenceError: solid_js_1 is not defined 或白屏，不是代码写错，而是 Sublime 没参与构建流程 —— 它只管编辑，不打包、不解析 import。

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

实操建议：

别直接用 Live Server 打开 src/App.tsx；SolidJS 项目必须经 vite 或 solid-start 构建才能运行
正确做法：终端进项目根目录，运行 npm run dev（或 pnpm dev），Vite 启服务后，再用 Live Server 打开 http://localhost:5173（不是本地文件路径）
Sublime 里改完文件保存，Vite 自动热更新；Live Server 此时只起“刷新快捷键”作用，别让它接管服务
如果非要双击打开 HTML，得先 npm run build，再用 Live Server 打开 dist/index.html，否则模块路径全错

调试 SolidJS 时怎么让 debugger; 真正停住

在 Sublime 里写 debugger; 很方便，但常遇到“断点没生效”或“停在 bundle.js 里找不到源码”。这不是 Sublime 的问题，而是 sourcemap 链路没对齐。

实操建议：

确保 vite.config.ts 中 build.sourcemap 设为 true（默认开发模式已开启）
Chrome DevTools → Settings → Preferences → Sources → Enable JavaScript source maps 必须勾选
在 Sublime 中编辑的 App.tsx 里加 debugger;，保存后刷新页面，DevTools 的 Sources 面板应显示原始 TSX 文件（非 chunk-xxx.js）
如果仍跳转到混淆代码，右键该文件 → Map to file system resource...，手动指向 Sublime 编辑的本地路径
别依赖 Sublime 的“跳转到定义”：SolidJS 的 createSignal 类型定义在 node_modules 里，SublimeCodeIntel 可能解析不准，以 VS Code 或 WebStorm 为准