CodeMiror 6 编辑器的 Emmet 扩展名
如何使用
此扩展可以安装为正则 npm 模块 :
npm i @emmetio/codemirror6-plugin
插件 API 遵循了 CodeMiror 6 设计 : 它是一个 ES6 模块, 提供了一些导出 扩展 您应该导入并添加到您的 EditorState 举个例子.
在大多数情况下,这种包出口 包含动作 作为 StateCommand,其使用方式如下:
import { EditorState, EditorView, basicSetup } from '@codemirror/basic-setup';
import { html } from '@codemirror/lang-html';
import { keymap } from '@codemirror/view';
// Import Expand Abbreviation command
import { expandAbbreviation } from '@emmetio/codemirror6-plugin';
new EditorView({
state: EditorState.create({
extensions: [
basicSetup,
html(),
// Bind Expand Abbreviation command to keyboard shortcut
keymap.of([{
key: 'Cmd-e',
run: expandAbbreviation
}]),
]
}),
parent: document.body
});
扩展缩略语
缩写扩展名可 音轨缩写 该用户输入一些已知的语法,如HTML和CSS。 当用户输入类似 Emmet 缩写的东西时,扩展开始缩写跟踪( adds) emmet-abbreviation 分类到文本片段。 缩写变为 复数 它显示缩写预览:
要启用缩写跟踪器,请导入 abbreviationTracker 函数并将其结果添加到编辑器扩展:
import { EditorState, EditorView, basicSetup } from '@codemirror/basic-setup';
import { html } from '@codemirror/lang-html';
import { abbreviationTracker } from '@emmetio/codemirror6-plugin';
new EditorView({
state: EditorState.create({
extensions: [
basicSetup,
html(),
abbreviationTracker()
]
}),
parent: document.body
});
缩写跟踪器是 上下文意识:它检测到当前语法上下文,只在需要缩写的地方工作. 例如,在HTML语法中,它只在纯文本上下文中工作,而不起作用,例如在属性值或标记名中.
要扩展履带缩写,击出 标签 键,而 caret 在缩略语中, 或点击 英格兰 键以重置跟踪器.
缩写模式
如果无法进行缩略语跟踪, 或者您想给用户一个机会, 输入和扩展带有交互式预览的缩略语, 一个特殊的 缩写模式 已提供。 运行 enterAbbreviationMode 命令以输入此模式:所有用户类型都将作为带有预览和验证的缩写来跟踪。 要扩展履带缩写,击出 标签 键,而 caret 在缩略语中, 或点击 英格兰 键以重置跟踪器.
文件语法的说明
目前, CodeMirror API 并没有提供可行的选项来获取文档语法,让插件能够理解如何使用文档. 因此,您必须在 Emmet 插件中手动指定文档语法 。 你可以通过 emmetConfig 平面或作为选项 abbreviationTracker数字 :
import { EditorState, EditorView, basicSetup } from '@codemirror/basic-setup';
import { html } from '@codemirror/lang-html';
import { keymap } from '@codemirror/view';
import { emmetConfig, abbreviationTracker } from '@emmetio/codemirror6-plugin';
const editor1 = new EditorView({
state: EditorState.create({
extensions: [
basicSetup,
html(),
// Option 1: specify document syntax as config facet
emmetConfig.of({
syntax: 'css'
}),
// Option 2: pass syntax as config value of abbreviation tracker
abbreviationTracker({
syntax: 'jsx'
})
...
]
}),
parent: document.body
});
注意:语法是最重要的选项 Emmet:它控制文档中对缩略语的解析方式(而不是它的标记,样式表或JSX语法)和生成输出的样式(HTML或XML风格,CSS或SASS方言等).
一些常见的语法 :
html, (中文(简体) ),xml: HTML 或 XML 文档; 在html还试图检测内置的CSS碎片.jsxjSX语法。 默认情况下,需要缩写开头<为了跳过为变量和函数捕获的假阳性缩写,还修改了输出以匹配JSX的规格(例如重命名)class属性为className(例如)css, (中文(简体) ),scss, (中文(简体) ),sass, (中文(简体) ),stylus:样式表缩写和输出的各种选项.haml, (中文(简体) ),jade, (中文(简体) ),pug, (中文(简体) ),slim: 支持标记预处理器.
默认语法是 html。 。 。 .
可用命令
当前软件包中可提供以下命令:
expandAbbreviation–将左侧的缩写扩展为当前被护理位置. 与缩写跟踪器不同, 此命令在任何地方都有效, 并且不尊重当前上下文 .enterAbbreviationMode- 进来 缩写模式。 。 。 .wrapWithAbbreviation—— 说 以缩略语环绕。请注意,这不是国家命令,而是您应当调用和通过以扩展方式返回的结果的函数。 您可以选择通过键盘快捷键作为参数( NameCtrl -w (英语) (默认情况下).balanceOutward编号 :balanceInward—— 说 余额。 。 。 .toggleComment—— 说 切换注释evaluateMath—— 说 评估数学表达式goToNextEditPoint编号 :goToPreviousEditPoint—— 说 转到编辑点goToTagPair—— 说 转到匹配对等incrementNumberN编号 :decrementNumberN—— 说 增加/减少 地点N实值1, (中文(简体) ),01或者说10。 。 。 .removeTag—— 说 删除标记splitJoinTag—— 说 拆分/ 加入标记selectNextItem编号 :selectPreviousItem—— 说 选择项目