sublime Text 可通过配置插件和复用 vite/typescript 工具链实现高效 vue3 + TSX 开发：安装 Vue Syntax Highlight、TypeScriptSyntax、SublimeLinter-eslint 等插件，配合 Vite 脚手架、tsconfig.json 正确配置及语法切换，即可获得语法高亮、错误提示、跳转定义等核心功能。
sublime text 本身不内置 vue3、Vite 或 TSX 支持，但通过合理配置插件和构建流程，完全可以作为轻量高效的 Vue3 + TypeScript + JSX/TSX 开发编辑器。关键不是“让 Sublime 变成 webstorm”，而是让它专注代码编写，把构建、热更、类型检查交给 Vite 和 TypeScript 编译器。
安装必要插件（Sublime 端）
打开 Package Control（Ctrl+Shift+P → “Install Package”），依次安装：
- Vue Syntax Highlight：提供 .vue 文件基础语法高亮（支持
- TypeScriptSyntax：比默认 TS 语法更准确，支持装饰器、泛型、JSX/TSX 标签等
- SublimeLinter + SublimeLinter-tslint / eslint（推荐用 ESLint）：搭配项目中的
.eslintrc.cjs实时提示错误（需本地已装eslint和@typescript-eslint/parser） - AutoFileName：在 import 路径中自动补全文件名和扩展名（对
import xxx from './xxx.tsx'很实用）
项目初始化：用 Vite 创建 Vue3 + TSX 模板
别手动配 webpack，直接用 Vite 官方脚手架：
npm create vite@latest my-vue-app -- --template vue-ts cd my-vue-app npm install然后修改入口逻辑以启用 TSX：
立即学习“前端免费学习笔记（深入）”；
- 将
src/main.ts中的createApp(App).mount('#app')保持不变（不影响 TSX） - 在
src/components/下新建HelloWorld.tsx，内容示例：
import { defineComponent } from 'vue' <p>export default defineComponent({ name: 'HelloWorld', props: { msg: String }, setup(props) { return () => ( <div class="hello"> <h1>{props.msg}</h1> </div> ) } })确保 tsconfig.json 含 "jsx": "preserve" 和 "jsxImportSource": "vue"（Vite 模板默认已配好）。
让 Sublime 正确识别 .tsx 和
默认情况下 Sublime 可能用 JS 语法高亮 .tsx 文件。手动切换：
- 打开任意
.tsx文件 → 右下角点击当前语法（如 “javaScript”）→ 选择 TypeScriptSyntax → TypeScript JSX - 为永久生效，可设置：
Preferences → Settings – Syntax Specific，填入：
{ "syntax": "Packages/TypeScriptSyntax/TypeScript JSX.sublime-syntax" }对 <script setup lang="ts"></script> 块，Vue Syntax Highlight 插件会自动识别并嵌套使用 TypeScript JSX 语法，无需额外操作。
开发体验增强技巧
不用跑完整 ide，也能提升效率：
- 快速跳转定义：装好 SublimeLinter-tslint 或 ESLint 后，按住 Ctrl（Win/linux）或 Cmd（Mac）+ 鼠标左键，可跳转到 TS 类型/组件定义（依赖本地 tsc 类型服务，需开启
tsserver） - 保存即检查：在
Preferences → Package Settings → SublimeLinter → Settings中启用"lint_on_save": true - 终端集成：用 Terminus 插件，在 Sublime 内建终端运行
npm run dev，实时看 Vite 输出和报错 - Emmet 支持 TSX：在
Preferences → Settings – Syntax Specific中为 TypeScript JSX 添加："emmet_syntax": "html"，即可用div.my-class→<div class="my-class"></div>
基本上就这些。Sublime 不负责打包和 HMR，它只负责写得顺、看得清、错得早——Vite 负责快，tsc 负责准，你负责逻辑。不复杂但容易忽略的是：所有配置都围绕“复用项目级工具链”，而不是在编辑器里重复造轮子。