0

0

Sublime如何配置Vue单文件组件高亮?(前端开发)

穿越時空

穿越時空

发布时间:2026-02-25 15:20:54

|

735人浏览过

|

来源于php中文网

原创

sublime需手动绑定.vue后缀到vue component语法并安装vue syntax highlight插件,否则默认为纯文本;指令如v-if、@click需vuejs complete增强包支持,ts高亮需额外安装typescript插件。

sublime如何配置vue单文件组件高亮?(前端开发)

Vue单文件组件后缀没高亮,.vue 文件全是白底黑字

Sublime 默认不识别 .vue 文件,打开就是纯文本。这不是插件冲突或配置错,是根本没告诉编辑器“这玩意儿该用什么语法解析”。

  • 手动切换语法:右下角点击当前语法名(比如 Plain Text),选 Vue Component —— 但每次都要点,治标不治本
  • 真正解决是绑定后缀:菜单栏 View → Syntax → Open all with current extension as… → Vue Component
  • 如果列表里没有 Vue Component,说明还没装语法包(见下一条)

装了 Vue Syntax Highlight 插件,但 .vue 文件还是不生效

这个插件名字带“Syntax”,但它只提供语法定义,不自动绑定后缀,也不处理 <script setup></script><style scoped></style> 这类新写法的嵌套高亮。

  • 确认安装方式:用 Package Control 装 Vue Syntax Highlight,别手抖装成 VueJS(那个是旧版,已停止维护)
  • 装完必须重启 Sublime,否则新语法不会出现在 Open all with current extension as… 列表里
  • <script lang="ts"></script> 里的 TypeScript 高亮需要额外装 TypeScript 插件,否则只当 JS 解析

template 里写 v-if@click 没高亮,像普通 HTML 字符串

这是 Vue 语法包对指令和事件修饰符的默认支持较弱,不是你写错了,是高亮规则没覆盖到这些自定义属性。

ERMEB云盘发卡系统源码
ERMEB云盘发卡系统源码

ERMEB云盘发卡系统官方正版系统,发卡系统操作简单、方便、易懂。 系统微信小程序前端采用nuiapp后端采用think PHP6PC前端采用vue开发 使用场景:文件上传储存,适合个人/个体/中小企业使用。本系统配合微信小程序端进行使用,文件下载以及发卡商品卡密领取都需要进入小程序内获取下载码以及卡密领取,小程序内可设置积分充值以及任务获取积分,支持微信激励广告领取文件下载码以及卡密商品,可实现

下载
  • 原生 Vue Syntax Highlightv- 开头的都当普通属性,不特殊着色;@: 前缀也常被忽略
  • 可改用社区增强版:Vuejs Complete(注意名字带 Complete),它会对 v-if@click.prevent 等做独立 token 匹配
  • 但注意:它会把 <template></template> 整体当 Vue 模板处理,如果你混写了 JSX 或 HAML 片段,可能误判

保存后语法自动变回 Plain Text,或者新开 .vue 文件又失效

这是 Sublime 的“语法记忆”机制在作祟——它按文件路径模式匹配,而不是单纯看后缀。

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

  • 检查是否在项目根目录有 .sublime-project 文件,里面写了 "syntax": "Packages/Text/Plain text.tmLanguage" 这类强制覆盖项
  • 有没有用到 ApplySyntax 插件?它会基于文件内容判断语法,遇到空 <script></script> 或只有注释的 .vue,可能误判为纯文本
  • 最稳方案:删掉项目级配置,统一走 View → Syntax → Open all with current extension as… 绑定,靠后缀驱动
Vue 的语法高亮本质是多个语言层叠:HTML + JS/TS + CSS + Vue 特有指令。Sublime 不像 VS Code 那样有官方语言服务器,得靠社区语法包一层层补全。哪个环节漏了,对应部分就变灰——不是配错了,是少了一块拼图。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

40

2026.02.13

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

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

11

2026.02.25

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

830

2023.08.22

登录token无效
登录token无效

登录token无效解决方法:1、检查token的有效期限,如果token已经过期,需要重新获取一个新的token;2、检查token的签名,如果签名不正确,需要重新获取一个新的token;3、检查密钥的正确性,如果密钥不正确,需要重新获取一个新的token;4、使用HTTPS协议传输token,建议使用HTTPS协议进行传输 ;5、使用双因素认证,双因素认证可以提高账户的安全性。

6438

2023.09.14

登录token无效怎么办
登录token无效怎么办

登录token无效的解决办法有检查Token是否过期、检查Token是否正确、检查Token是否被篡改、检查Token是否与用户匹配、清除缓存或Cookie、检查网络连接和服务器状态、重新登录或请求新的Token、联系技术支持或开发人员等。本专题为大家提供token相关的文章、下载、课程内容,供大家免费下载体验。

838

2023.09.14

token怎么获取
token怎么获取

获取token值的方法:1、小程序调用“wx.login()”获取 临时登录凭证code,并回传到开发者服务器;2、开发者服务器以code换取,用户唯一标识openid和会话密钥“session_key”。想了解更详细的内容,可以阅读本专题下面的文章。

1087

2023.12.21

token什么意思
token什么意思

token是一种用于表示用户权限、记录交易信息、支付虚拟货币的数字货币。可以用来在特定的网络上进行交易,用来购买或出售特定的虚拟货币,也可以用来支付特定的服务费用。想了解更多token什么意思的相关内容可以访问本专题下面的文章。

1693

2024.03.01

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

638

2023.08.03

batoto漫画官网入口与网页版访问指南
batoto漫画官网入口与网页版访问指南

本专题系统整理batoto漫画官方网站最新可用入口,涵盖最新官网地址、网页版登录页面及防走失访问方式说明,帮助用户快速找到batoto漫画官方平台,稳定在线阅读各类漫画内容。

65

2026.02.25

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 8.8万人学习

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

共26课时 | 1.5万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号