vue - 自定义块 - 语法高亮

Posted 2023-02-23

【中文标题】vue - 自定义块 - 语法高亮

【英文标题】：vue - custom blocks - syntax highlighting

【发布时间】：2020-07-24 14:31:54

【问题描述】：

Vue 单文件组件可以创建自定义块（除了众所周知的脚本、模板和风格）。官方文档：https://vue-loader.vuejs.org/guide/custom-blocks.html#example 但是有没有办法让语法高亮在这样的自定义块中工作？我尝试插入 JS 代码以及其他语言类型，但没有语法高亮显示。

【问题讨论】：

语法高亮取决于您的 IDE，不是吗？您安装的扩展程序/插件可能无法识别自定义块。

【参考方案1】：

Vetur 支持 custom block 中的语法高亮显示：

Vetur 提供了一个设置vetur.grammar.customBlocks，默认为：

"vetur.grammar.customBlocks": 
  "docs": "md",
  "i18n": "json"

你可以

更改vetur.grammar.customBlocks，例如：

"vetur.grammar.customBlocks": 
  "docs": "md",
  "i18n": "json",
  "page-query": "graphql",
  "static-query": "graphql"

从vetur.grammar.customBlocks 运行命令Vetur: Generate grammar（通过Command Palette）

重启 VS Code 以获得自定义 > 块的语法高亮显示。

自定义块的有效语言值：

支持表中的所有语言值。 md | yaml | json | php | graphql

【讨论】：

你能在 VScode 的终端上运行Vetur: Generate grammar 命令吗？我不断收到“找不到命令：Vetur”错误，我已经检查过 Vue 语言服务器确实在运行....（Mac OS）

@songololo 该命令需要从Command Palette 运行，而不是从终端/shell。