Sublime开发Vue3前端项目_配置Vite构建工具与TSX语法支持

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Sublime开发Vue3前端项目_配置Vite构建工具与TSX语法支持

2025-12-14

浏览次数：次

返回列表

Sublime Text 可通过配置插件和复用 Vite/TypeScript 工具链实现高效 Vue3 + TSX 开发：安装 Vue Syntax Highlight、TypeScriptSyntax、SublimeLinter-eslint 等插件，配合 Vite 脚手架、tsconfig.json 正确配置及语法切换，即可获得语法高亮、错误提示、跳转定义等核心功能。

sublime开发vue3前端项目_配置vite构建工具与tsx语法支持

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 模板默认已配好）。

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

185

查看详情

让 Sublime 正确识别 .tsx 和

默认情况下 Sublime 可能用 JS 语法高亮 .tsx 文件。手动切换：

打开任意 .tsx 文件 → 右下角点击当前语法（如 “J*aScript”）→ 选择 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_s*e": 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>