0

0

Sublime如何配置Vue语法高亮_Sublime安装Vue插件教程【插件】

尼克

尼克

发布时间:2026-02-04 16:09:25

|

623人浏览过

|

来源于php中文网

原创

Sublime Text需安装Vue Syntax Highlight插件并手动绑定.vue语法,配置enable_vue_blocks等选项启用区块内高亮,设默认编码为UTF-8,为Emmet添加vue语法作用域,最后重启编辑器。

sublime如何配置vue语法高亮_sublime安装vue插件教程【插件】

Vue单文件组件(.vue)不识别语法怎么办

Sublime Text 默认不支持 .vue 文件的语法高亮,打开后全是纯文本。这不是插件没装对,而是 Sublime 没把 .vue 后缀和 Vue 语法关联起来。

解决方法分两步:先装插件,再手动设置语法绑定。

  • 推荐安装 Vue Syntax Highlight(比老牌的 Vuejs 插件更轻量、更新勤、无 Python 依赖)
  • 通过 Package Control → Install Package → Vue Syntax Highlight 安装
  • 安装后不会自动生效——右键编辑区 → Set Syntax → Vue Syntax Highlight → Vue
  • 为避免每次手动设置,可点击 View → Syntax → Open all with current extension as... → Vue,这样所有 .vue 文件都会默认用该语法

template/script/style 块内语法高亮失效

即使绑定了 .vue 文件,也常出现 里没 JS 高亮、 里没 HTML 高亮的情况。这是因为 Vue 语法包本身不嵌套解析子语言,需额外配置作用域。

打开 Preferences → Package Settings → Vue Syntax Highlight → Settings,在用户配置中加入:

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

{
  "enable_vue_blocks": true,
  "enable_html_in_template": true,
  "enable_js_in_script": true,
  "enable_css_in_style": true
}

注意:enable_vue_blocks 是开关,必须设为 true;其余三项控制各区块是否启用对应语言高亮。若你用 TypeScript,把 enable_js_in_script 改成 enable_ts_in_script 并确保已装 JavaScriptNext - ES6 SyntaxTypeScript 插件。

智谱AI开放平台
智谱AI开放平台

智谱AI大模型开放平台-新一代国产自主通用AI开放平台

下载

中文注释乱码或标点显示异常

部分老版本 Sublime(尤其是 Windows 下未改编码的)读取 .vue 文件时会误判为 GBK,导致中文注释变方块或标点错位。这不是 Vue 插件的问题,是文件编码没统一。

  • 打开文件后,右下角查看当前编码(如显示 UTF-8Western (Windows 1252)
  • 若非 UTF-8,点击右下角编码名 → Reopen with Encoding → UTF-8
  • 之后保存前务必确认右下角是 UTF-8,再按 Ctrl+S,否则下次打开仍可能回退
  • 一劳永逸:进 Preferences → Settings,在右侧用户设置加一行:"default_encoding": "UTF-8"

Emmet 在

Emmet 默认只在 HTML、JSX 等语法下激活, 块虽是 HTML 结构,但 Sublime 不会自动继承父语法上下文。需要显式告诉 Emmet:这里支持 HTML 缩写。

打开 Preferences → Package Settings → Emmet → Settings,在用户配置中添加:

{
  "syntax_scopes": {
    "vue": ["text.html.vue", "source.vue"]
  }
}

其中 text.html.vueVue Syntax Highlight 插件为 块定义的作用域名(可通过 Tools → Developer → Show Scope Name 在模板内光标处验证)。如果换用其他 Vue 插件,作用域名可能不同,得对应调整。

别漏掉重启 Sublime——有些插件配置变更需完全重启才生效,热重载不一定管用。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
es6新特性
es6新特性

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

106

2023.07.17

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

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

196

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

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

224

2025.12.24

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

516

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

307

2023.07.28

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

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

381

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

5425

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

483

2023.09.01

抖音网页版入口与视频观看指南 抖音官网视频在线访问
抖音网页版入口与视频观看指南 抖音官网视频在线访问

本专题汇总了抖音网页版的入口链接、官方登录页面以及视频观看入口,帮助用户快速访问抖音网页版,提供免登录访问方式和直接进入视频播放页面的方法,确保顺利浏览和观看抖音视频。

22

2026.02.04

热门下载

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

精品课程

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

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.2万人学习

CSS教程
CSS教程

共754课时 | 27.3万人学习

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

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