Vue 语法高亮插件 - Vue-Syntax-Highlight 教程

1. 项目介绍

Vue-Syntax-Highlight 是一个专为 Sublime Text 编辑器设计的 Vue 单文件组件（SFC）的语法高亮插件。它支持 Vue.js 的模板、脚本和样式块的高亮显示，也兼容预处理器如 Jade/Pug、SASS/SCSS 和 CoffeeScript 等。此外，对于使用 JSX 的 Vue 应用，它还提供了对 Babel 风格的 JavaScript 高亮。

2. 项目快速启动

安装依赖

通过 Package Control（Sublime Text 的包管理器）来安装 Vue Syntax Highlight 插件：

1. 按 Ctrl+Shift+P 或者在菜单中找到 Command Palette。
2. 输入 "Package Control: Install Package" 并回车。
3. 在搜索框中输入 "Vue Syntax Highlight" 找到插件并点击安装。

手动安装

如果你选择手动安装，可以通过以下步骤：

1. 克隆仓库至你的 Sublime Packages 目录：git clone https://github.com/vuejs/vue-syntax-highlight.git.

2. 重启 Sublime Text，插件应该已经生效。

设置 JSX 高亮

若要启用 JSX 高亮，在默认的 JavaScript 高亮插件前，需要将 Babel JavaScript 配置为默认。你可以通过修改你的 Preferences > Settings 文件来实现：

{
    "syntax": "Babel (JSX)/JavaScript (Babel) .jsx"
}

3. 应用案例和最佳实践

使用预处理器

确保你已安装了相应的预处理器插件，例如安装了 Prettier、ESLint 等自动化工具，以获得更完整的语法支持和代码格式化。

自定义设置

你可以通过修改 Preferences > User Settings 来调整语法高亮的样式。比如增加自定义关键字的高亮或者改变颜色主题。

// 在 Preferences > User Settings 中添加以下内容
"vue_syntax_highlight":
{
  "script_lang": "javascript", // 默认语言，可以更换成 TypeScript 或其他
  "style_lang": "scss" // 样式语言，例如 SCSS 或 Less
}

4. 典型生态项目

• Vetur: Visual Studio Code 中强大的 Vue 开发扩展，提供语法高亮、智能提示、格式化等功能。
• Vue CLI: Vue.js 的官方命令行工具，用于快速初始化和构建 Vue 项目。
• Vue Router: Vue.js 的官方路由库，用于管理单页面应用中的不同视图。
• Vuex: Vue.js 的状态管理模式，用于集中管理应用的状态。

以上就是关于 Vue-Syntax-Highlight 插件的简要介绍和使用指南。通过此插件，你可以在 Sublime Text 中享受到 Vue 代码的优美呈现。祝你编码愉快！