Sublime编写Vue代码_Sublime安装Vue语法高亮插件详细步骤
作者:SunnyJourney
时间:2026-05-22
浏览:0
SublimeText默认不支持.vue文件,需安装VueSyntaxHighlight插件。安装后需手动将.vue文件关联至VueComponent语法,并在插件设置中启用嵌套语法高亮以正确显示各代码区块。该插件仅提供语法高亮,格式化、补全等功能需额外配置其他工具。
先明确一个核心问题:Sublime Text 默认完全不识别 .vue 文件,打开就是纯文本。这并非你遗漏了某个步骤,而是编辑器本身就没有内置支持。目前,唯一持续维护、兼容 ST4、并能正确高亮 、、 等区块的插件,只有 Vue Syntax Highlight。

如何正确安装 Vue Syntax Highlight?关键在于名字
很多开发者会误装旧插件,例如早已停更的 vue-component(仅支持 ST2)或名字少一个 s 的 Vue Syntax Highlight。这些都会导致安装失败或报错,例如 ImportError: No module named 'sublime_plugin'。正确的安装流程如下:
- 确保已安装
Package Control(若未安装,可通过Ctrl+`打开控制台,粘贴官方安装脚本)。 - 按下
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS),调出命令面板。 - 输入
Package Control: Install Package并回车。 - 等待列表加载完毕后,输入
Vue Syntax Highlight(注意:首字母大写、中间有空格、且是带s的Highlight),然后回车安装。 - 安装完成后通常无需重启,但如果此时打开
.vue文件,右下角仍显示为Plain Text,说明文件后缀尚未与语法关联——这是下一步要解决的核心问题。
为什么插件装了,代码还是白底黑字?必须手动绑定 .vue 后缀
插件只提供了语法定义,并不会自动将 .vue 后缀的文件与其关联。这是最容易被忽略的一步。即便你重装十遍插件,不执行此操作,所有 .vue 文件仍会被视为纯文本。
- 打开任意一个
.vue文件。 - 查看编辑器右下角,点击当前语法标识(例如显示为
Plain Text的地方)。 - 在弹出的菜单中,选择
Open all with current extension as…。 - 在展开的语法列表里,找到并点击
Vue Component。 - 此设置保存在用户配置目录中,若更换电脑或重装 Sublime Text,需要重新绑定一次。
