讲师中心 微信公众号

工具推荐

视频效率加速
剧云
剧云

中文短剧剧本制作平台

AniShort
AniShort

AI短剧协同制作平台

立刻MV
立刻MV

低成本歌曲 MV、视频生成

Laper
Laper

剧本策划到成片协作

Sublime怎么支持Vue_Sublime Vue语法高亮教程【前端】

小涛君_7177

小涛君_7177

发布时间:2026-02-27 14:21:12

|

787人浏览过

|

来源于php中文网

原创

必须安装 Vue Syntax Highlight 插件并手动绑定 .vue 扩展名为 Vue Component 语法,否则高亮不生效;还需配置 Emmet 作用域、开启 enable_ts_in_script 并安装 TypeScript 插件以支持 script 区块的 TS 高亮。

sublime怎么支持vue_sublime vue语法高亮教程【前端】

Vue Syntax Highlight 插件必须装,别选错名字

Sublime 默认完全不认识 .vue 文件,打开就是纯文本——这不是你配置错了,是它压根没语法定义。真正起作用的是 Vue Syntax Highlight(作者 vuejs-sublime-project),不是早已停更的 Vuejs 或只提供片段的 Vuejs Snippets。装错名字,高亮就永远不生效。

  • 用 Ctrl+Shift+P → Package Control: Install Package → 搜 Vue Syntax Highlight,认准 GitHub 仓库名 vuejs-sublime-project/vue-syntax-highlight
  • 装完必须重启 Sublime(2026 年 2 月最新版仍需重启才能加载 .sublime-syntax 文件)
  • 装完后进 Preferences → Package Settings,确认只有 Vue Syntax Highlight,如果还列着 Vuejs,右键禁用它,否则会冲突

手动绑定 .vue 扩展名到 Vue Component 语法

插件装了 ≠ 自动生效。Sublime 不会主动把 .vue 后缀和插件提供的 Vue Component 语法关联起来——这是最常被跳过的一步,也是 80% 用户“明明装了却没高亮”的原因。

  • 打开任意 .vue 文件,看右下角状态栏显示的是 Plain Text 还是别的
  • 点击它 → Open all with current extension as… → 搜索并选中 Vue Component(注意不是 Vue 或 HTML)
  • 如果菜单里没看到 Vue Component,说明插件没正确解压:进 Preferences → Browse Packages…,检查是否存在 Vue Syntax Highlight/ 目录(不是 vuejs/)

template 中 Emmet 不工作?要显式启用作用域

<template></template> 块本质是 HTML,但 Sublime 不会自动继承父语法上下文,Emmet 默认只在 HTML、XML 等原生语法下激活,所以在 .vue 里敲 div.my-class + Tab 没反应,不是 Emmet 没装,是它没被“告诉”该在这里干活。

HISUI 前端框架开发指南(IRIS版)
HISUI 前端框架开发指南(IRIS版)

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库,专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考,支持声明式与编程式两种初始化方式,提供 $cm/$m 数据访问方法。

下载
  • 打开 Preferences → Settings – User
  • 添加以下配置(确保 Emmet 已安装):
    {
      "emmet_syntax_scopes": {
        "vue": "html"
      }
    }
  • 保存后重启,<template></template> 内即可正常使用 Emmet 缩写

script 区块里 TypeScript 或 ES6 高亮异常?检查嵌套语言开关

Vue Syntax Highlight 支持在 <script></script> 里自动切换 JS/TS 高亮,但默认只开 JS;如果你用 setup + lang="ts",却还是灰扑扑的,大概率是 enable_ts_in_script 没开,或者缺少底层 TS 语法支持。

立即学习“前端免费学习笔记(深入)”;

  • 进 Preferences → Package Settings → Vue Syntax Highlight → Settings
  • 确认开启:
    "enable_vue_blocks": true,
    "enable_ts_in_script": true,
  • 同时确保已安装 TypeScript 插件(不是 Babel,后者会抢走作用域导致 TS 高亮失效)
  • 若仍无效,右键 <script></script> 块 → Set Syntax → TypeScript 临时验证是否是插件问题

最容易被忽略的其实是「绑定扩展名」那一步——很多人装完插件就以为结束了,结果每次打开 .vue 还得手动点右下角。还有人把 enable_vue_blocks 设为 false,以为只是个小开关,其实关了它,整个区块嵌套高亮就全崩了。

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

函子Zion

一款支持AI搭建、可视化编辑和多端发布的全栈无代码开发平台。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

332

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

540

2026.02.25

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

411

2026.03.13

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

326

2026.06.03

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

738

2026.06.16

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

305

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

406

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

395

2025.12.24

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

80

2026.11.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.5万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn