sublime的Vue语法高亮怎么装_sublime配置Vue.js开发插件

安装vue Syntax Highlight插件可实现Vue文件高亮，首先通过控制台安装Package Control，再用命令面板搜索并安装插件，最后设置.vue文件默认打开方式为Vue Component即可完成配置。

要在 sublime Text 中配置 Vue 语法高亮，需要安装支持 Vue.js 文件的插件。Vue 文件（.vue）是包含 template、script 和 style 的单文件组件，Sublime 默认不支持高亮，需手动添加插件。

1. 安装 Package Control（如未安装）

Package Control 是 Sublime 的插件管理工具，绝大多数插件都通过它安装。

• 打开 sublime text，按下 Ctrl+`（反引号）打开控制台
• 粘贴以下代码并回车：

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e8404c'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'https://packagecontrol.io/' + pf.replace(' ', '%20') ).read(); dh = hashlib.sha256(by).hexdigest(); print('Error Validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

安装完成后重启 Sublime。

立即学习“前端免费学习笔记（深入）”；

2. 安装 Vue Syntax Highlight 插件

推荐使用 Vue Syntax Highlight 或 Vuejs 插件，提供完整的 .vue 文件语法高亮和片段支持。

TabTab AI

首个全链路 Data Agent，让数据搜集、处理到深度分析一步到位。

326

查看详情

• 按下 Ctrl+Shift+P 打开命令面板
• 输入 “Install Package”，选择 “Package Control: Install Package”
• 等待列表加载后，搜索 “Vue Syntax Highlight” 并点击安装

安装完成后，所有 .vue 文件将自动启用语法高亮。

3. 设置默认打开方式（可选）

确保 .vue 文件默认用 Vue 语法打开：

• 打开一个 .vue 文件
• 点击右下角的语法标识（如 “Plain Text”）
• 选择 “Open all with current extension as…” → “Vue Component”

4. 可选增强插件

提升开发体验，可额外安装：

• Emmet：支持在 template 中使用缩写快速生成 html
• Babel：增强 javaScript 语法高亮（尤其 es6+）
• AutoFileName：自动补全文件路径

基本上就这些。安装完 Vue Syntax Highlight 后，template、script、style 三部分都能正确高亮，开发体验明显提升。