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

Sublime Text 可通过配置插件和复用 Vite/TypeScript 工具链实现高效 Vue3 + TSX 开发：安装 Vue Syntax Highlight、TypeScript​Syntax、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 文件基础语法高亮（支持
• TypeScript​Syntax：比默认 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 () => (
<p class="hello">
<h1>{props.msg}</h1>
</p>
)
}
})

登录后复制

确保 tsconfig.json 含 "jsx": "preserve" 和 "jsxImportSource": "vue"（Vite 模板默认已配好）。

标签： vue3 vite linux vue javascript java html sublime js 前端 json