Sublime Text 是轻量高效的代码编辑器,可通过插件和配置支持 Strapi+Nuxt.js 或 Gatsby 的 JAMstack 开发,但不参与实际构建流程。

Sublime Text 本身不是构建工具,而是代码编辑器,它不直接参与 JAMstack 网站的构建流程,但可以高效支持开发 Strapi + Nuxt.js 或 Gatsby 的项目。关键在于用 Sublime 搭配合适的插件、配置和工作流,让开发体验更顺滑。
用 Sublime 编辑 Strapi 后端项目
Strapi 是 Node.js 应用,Sublime 可以流畅打开整个 Strapi 项目(如 src/、config/、api/ 目录)。推荐安装以下插件提升效率:
- EditorConfig:统一团队代码风格,自动适配 Strapi 官方推荐的缩进与换行设置
- ESLint-Formatter 或 SublimeLinter-eslint:实时校验 JavaScript/TypeScript 代码,避免运行时报错
- GitGutter:在侧边栏显示文件改动状态,方便跟踪 API 接口或内容类型的修改
小技巧:在 Strapi 项目根目录运行 npm run develop 启动本地管理后台后,用 Sublime 实时编辑 src/api/article/controllers/Article.js 等文件,保存即生效(需配合 nodemon 或重启服务)。
用 Sublime 开发 Nuxt.js 前端(SSR/静态生成)
Nuxt.js 项目结构清晰,Sublime 打开后可快速定位 pages/、components/、plugins/ 和 nuxt.config.js。重点配置建议:
- 安装 Vue Syntax Highlight 插件,正确识别 .vue 单文件组件
- 启用 AutoFileName,输入 ~/assets/ 或 @/pages/ 时自动补全路径
- 在 nuxt.config.js 中配置 Strapi API 地址(如 https://localhost:1337/api),Sublime 支持 JSON5,可写注释、省略引号,便于维护
例如,在 pages/index.vue 的 asyncData() 中调用 Strapi 文章列表接口,Sublime 的括号高亮与变量跳转能显著减少拼写错误。
用 Sublime 搭配 Gatsby(静态站点生成)
Gatsby 基于 GraphQL,Sublime 需要额外支持才能高效开发:
- 安装 GraphQL 插件(来自 Package Control),获得 .graphql 文件语法高亮和基础补全
- 搭配 GraphQL Config 插件,读取 gatsby-config.js 中的 gatsby-source-strapi 配置,辅助编写查询语句
- 用 SideBarEnhancements 快速在资源管理器中右键运行 gatsby develop 或 gatsby build
常见场景:在 src/pages/index.js 中写 useStaticQuery 查询 Strapi 的 articles,Sublime 不会执行 GraphQL 验证,但清晰的结构高亮能帮你快速发现字段名大小写或嵌套层级问题。
本地联调与部署前检查
Strapi + Nuxt/Gatsby 是分离架构,Sublime 无法自动启动双服务,但可通过简单方式协同:
- 在 Sublime 中用 Terminus 插件开两个终端面板:一个运行 strapi develop,另一个运行 npm run dev(Nuxt)或 gatsby develop
- 用 AdvancedNewFile 快速创建新 API Service 文件(Nuxt)或 new page(Gatsby),路径自动补全,减少手误
- 部署前用 TrailingSpaces 插件清除多余空格,避免 Netlify/Vercel 构建时因格式问题失败
基本上就这些——Sublime 不抢 Webpack 或 Strapi CLI 的活,但它足够轻快、可控,是专注写代码时值得信赖的搭档。










