sublime如何配置Vue.js的语法高亮和代码提示？ (插件配置)

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

sublime如何配置Vue.js的语法高亮和代码提示？ (插件配置)

2025-12-13

浏览次数：次

返回列表

Sublime Text 需安装 Vue Syntax Highlight（语法高亮）和 Vuejs Complete Package（代码补全与 snippet）两个插件，并手动将 .vue 文件关联为 Vue 语法；可选 JS Custom 或 ESLint 提升 script 区域提示准确性，避免多插件冲突。

sublime如何配置vue.js的语法高亮和代码提示？ (插件配置)

Sublime Text 默认不支持 Vue.js 的语法高亮和智能提示，需要通过插件补全。核心是安装 Vue Syntax Highlight（高亮）和 Vuejs Complete Package（补全+ snippets），再配合简单配置即可生效。

安装 Vue 语法高亮插件

打开 Sublime Text → Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）→ 输入 Install Package → 回车 → 搜索并安装：
Vue Syntax Highlight
安装后，打开 .vue 文件会自动识别并高亮 template/script/style 三部分，支持 HTML、J*aScript、CSS/SCSS 等嵌入语法。

启用 Vue 代码提示与快捷片段

同样通过 Package Control 安装：
Vuejs Complete Package
该插件提供：
• v-for、v-if、props/data/methods 等常用指令和结构的 Tab 补全
• Vue 2/3 模板语法 snippet（如输入 vue2 + Tab 可生成完整单文件组件骨架）
• ES6 和 Vue API 方法的函数签名提示（需开启 Sublime 的 auto_complete）

确保 .vue 文件正确关联语法

有时新文件未自动识别为 Vue，可手动设置：
• 打开任意 .vue 文件 → 菜单栏 View → Syntax → Open all with current extension as… → Vue
• 或右下角点击当前语法名称（如 Plain Text）→ 选择 Vue
之后所有 .vue 后缀文件都会默认使用 Vue 语法方案。

可选：增强 JS 补全（搭配 Vue 使用更顺）

若发现 script 中的 Vue 实例属性（如 this.$refs、this.$emit）无提示，建议额外安装：
• JS Custom（支持 Vue/React 等框架的 JS 类型定义）
• 或启用 SublimeLinter-eslint + 项目根目录配好 .eslintrc.js，能间接提升语义提示准确性

基本上就这些。不需要改配置文件，也不用重启 Sublime，装完即用。注意别同时装多个 Vue 高亮插件（比如 Vue Syntax Highlight 和 VueJS 二选一），否则可能冲突。

wechat-miniprogram-plugin

wechat-miniprogram-plugin是基于JetBrains平台的微信小程序插件。主要功能wxml/wxss/wxs文件支持语法解析代码完成代码高亮wxml嵌入表达式支持wxml 标签支持wxml提取自定义组件创建微信小程序组件以及页面相关文件导航微信小程序自定义组件支持自动注册自定义组件组件配置解析重命名小程序自定义组件或页面同时移动自定义组件或页面的所有文件微信小程序配置文件支持