Sublime怎么配置Vue开发环境_Sublime高亮显示Vue语法与代码片段-sublime-PHP中文网

Sublime怎么配置Vue开发环境_Sublime高亮显示Vue语法与代码片段

冰火之心

发布： 2025-12-12 15:52:03

原创

794人浏览过

安装Package Control后，通过插件库安装Vue Syntax Highlight实现语法高亮，再创建自定义代码片段vuecomp快速生成组件模板，配合Emmet、Babel等插件提升开发效率。

sublime怎么配置vue开发环境_sublime高亮显示vue语法与代码片段

要让 Sublime Text 支持 Vue 开发，实现语法高亮和代码片段补全，不需要安装复杂的 IDE，只需简单配置插件即可。下面一步步教你如何设置。

安装 Package Control

如果还没安装 Package Control，先手动安装：

1. 打开 Sublime Text，按 Ctrl + `（反引号）打开控制台。
2. 粘贴以下代码并回车：

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e8404c' + '8bc59f4b038aad7772686b'; 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('http://packagecontrol.io/' + pf).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)

登录后复制

3. 重启 Sublime Text，就能在 Preferences 菜单下看到 Package Control 了。

安装 Vue 语法高亮

推荐使用 Vetur 风格的 Vue 支持插件：

1. 按 Ctrl + Shift + P 打开命令面板。
2. 输入 “Install Package”，选择 “Package Control: Install Package”。
3. 搜索并安装：Vue Syntax Highlight 或 VueJS。
4. 安装完成后，打开 .vue 文件，右下角语言模式选择 “Vue” 即可启用高亮。

该插件支持

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

微软爱写作

微软出品的免费英文写作/辅助/批改/评分工具

130

查看详情

配置代码片段（Snippets）

你可以自定义或导入常用的 Vue 代码片段，比如快速生成一个组件模板。

1. 点击菜单 Tools → Developer → New Snippet…
2. 替换内容如下，保存为 VueComponent.sublime-snippet：

<snippet>
  <content><![CDATA[
<template>
  <div class="$1">
    $2
  </div>
</template>

<script>
export default {
  name: '$3',
  data() {
    return {
      $4
    }
  },
  methods: {
    $5
  }
}
</script>

<style scoped>
$6
</style>
]]></content>
  <tabTrigger>vuecomp</tabTrigger>
  <scope>text.html.vue</scope>
  <description>Vue Component Template</description>
</snippet>

登录后复制

3. 保存路径默认即可（Packages/User/）。

使用时，在 .vue 文件中输入 vuecomp + Tab 键，就能快速生成标准组件结构。