讲师中心 微信公众号

工具推荐

视频效率加速
updream

一键生成高质量推广成片

AniShort
AniShort

AI短剧协同制作平台

Laper
Laper

剧本策划到成片协作

立刻MV
立刻MV

低成本歌曲 MV、视频生成

Sublime怎么编写Vue Sublime怎么安装Vue代码高亮【前端】

轻婷酱_5672

轻婷酱_5672

发布时间:2026-02-28 11:12:14

|

884人浏览过

|

来源于php中文网

原创

Sublime Text需安装Vuejs Complete Package插件实现.vue文件语法高亮,手动切换语法为Vue Component;对支持有限,可改用Babel插件配合Vue Component语法;补全能力弱,不支持语义级智能提示;启动慢可禁用自动扫描并排除node_modules等目录。

sublime怎么编写vue sublime怎么安装vue代码高亮【前端】

Vue 单文件组件(.vue)在 Sublime Text 里不识别语法?

Sublime Text 默认不支持 .vue 文件语法高亮,打开后全是白底黑字,标签、<script></script> 和 <style></style> 块全无颜色区分——这不是你配置错了,是它压根没内置 Vue 支持。

解决方法很简单:装一个社区维护的语法包。别用“Vue Syntax Highlight”这种老掉牙、已停止更新的插件;推荐用 Vue Syntax Highlight 的继任者:Vuejs Complete Package(注意名字带 Complete),它同时支持语法高亮、Emmet、片段补全和基础指令提示。

  • 通过 Package Control 安装:Ctrl+Shift+P(Win/Linux)或 Cmd+Shift+P(Mac)→ 输入 Package Control: Install Package → 搜索并安装 Vuejs Complete Package
  • 安装后,手动触发一次语法切换:右下角点击当前语法名(比如 “Plain Text”)→ 选择 Vue Component
  • 如果仍不生效,检查文件扩展名是否为 .vue(不是 .html 或 .js);某些脚手架生成的 .vue 文件开头有 BOM,可能干扰识别,可用编辑器另存为 UTF-8 无 BOM 格式

Sublime 中 <script setup></script> 语法高亮失效或报错?

这是常见兼容性问题:Vuejs Complete Package 当前最新版(v2023.12.x)对 <script setup></script> 的支持有限,尤其遇到 defineProps、defineEmits 或 TypeScript 泛型写法时,会把 defineProps() 里的尖括号当成 HTML 标签解析,导致高亮断掉、括号配对错乱。

HISUI 前端框架开发指南(IRIS版)
HISUI 前端框架开发指南(IRIS版)

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库,专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考,支持声明式与编程式两种初始化方式,提供 $cm/$m 数据访问方法。

下载
  • 临时缓解:把 <script setup lang="ts"></script> 改成 <script lang="ts"></script>(去掉 setup),虽然失去组合式 API 的便捷,但语法高亮能稳住
  • 更优解:配合使用 Babel 语法(通过 Package Control 安装 Babel 插件),然后将 .vue 文件的语法手动设为 Babel → Vue Component,它对 TS + setup 的解析比原生 Vue 包更鲁棒
  • 注意:不要同时启用 Vuejs Complete Package 和 Babel 的 Vue 语法,二者冲突会导致高亮闪烁或崩溃

为什么装了插件,<template></template> 里 class 名没智能补全?

Sublime 的补全能力远弱于 VS Code,Vuejs Complete Package 提供的是静态片段(如输入 v-if 按 Tab 补全整行),不是基于项目上下文的语义补全。它不会读取 components/ 目录、不会分析 defineComponent 返回值,更不会推导 props 类型。

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

  • 能补全的只有预置指令:v-if、v-for、v-model 等,以及常用事件修饰符(@click.stop)
  • class 名、组件名、prop key 这些动态内容,Sublime 本身不支持 LSP(语言服务器协议),也没法对接 Volar;想获得这类能力,得换编辑器
  • 若坚持用 Sublime,可手动建 sublime-completions 文件,在 Packages/User/ 下添加自定义补全项,但维护成本高,且不随项目变化自动更新

装完插件后 Sublime 启动变慢、保存卡顿?

部分 Vue 插件(尤其是带实时校验或文件监听功能的老版本)会在后台扫描整个项目目录,遇到 node_modules 或大体积 dist 文件夹时,极易拖慢响应。这不是 Sublime 本身的问题,而是插件设计没做路径过滤。

  • 打开 Preferences → Package Settings → Vuejs Complete Package → Settings,确认 "scan_on_load" 设为 false,禁用自动扫描
  • 在项目根目录建 .sublime-project 文件,显式排除干扰路径:
    {
      "folders": [
        {
          "path": ".",
          "folder_exclude_patterns": ["node_modules", "dist", ".git"]
        }
      ]
    }
    
  • 如果用了 Babel 插件,进其设置关掉 "babel_repl" 和 "show_compile_status",这两项在保存时会触发 JS 编译模拟,纯 Vue 项目完全不需要
Vue 的语法高亮在 Sublime 里始终是“够用但有缝”的状态——它能让你看清结构、不写错标签,但没法替代现代编辑器的类型感知和工程级联动。真正卡住你的往往不是装不装得上,而是哪些特性你其实并不依赖,却误以为必须有。

热门AI工具

更多
音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

SoundView
SoundView Hot

SoundView是一款面向跨境电商的视频翻译、配音和本地化 AI 创作平台。

Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

332

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

540

2026.02.25

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

411

2026.03.13

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

326

2026.06.03

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

758

2026.06.16

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

4636

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

326

2025.12.06

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

411

2026.03.13

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

20

2026.11.12

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.5万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.6万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn