CodeMiror 编辑器的缩写扩展名
如何使用
此扩展可以安装为正则 npm 模块 :
npm i @emmetio/codemirror-plugin
软件包有两种口味:一个独立的浏览器捆绑和ES/CommonJS模块,可以在您的应用中使用.
如果您正在构建应用程序, 您可以使用这样的扩展 :
import CodeMirror from 'codemirror';
import emmet from '@emmetio/codemirror-plugin';
// Register extension on CodeMirror object
emmet(CodeMirror);
// Create editor instance and provide keymap for Emmet actions
const editor = CodeMirror.fromTextArea(document.getElementById('code'), {
mode : "text/html",
extraKeys: {
'Tab': 'emmetExpandAbbreviation',
'Esc': 'emmetResetAbbreviation',
'Enter': 'emmetInsertLineBreak'
}
});
对于独立的基本用途,只需添加 dist/browser.js 文件进入您的页面 :
<script src="./node_modules/codemirror/lib/codemirror.js"></script>
<script src="./node_modules/@emmetio/codemirror-plugin/dist/browser.js"></script>
<form>
<textarea id="code" name="code"></textarea>
</form>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode : "text/html",
extraKeys: {
'Tab': 'emmetExpandAbbreviation',
'Esc': 'emmetResetAbbreviation',
'Enter': 'emmetInsertLineBreak'
}
});
</script>
扩展缩略语
缩写扩展名可 音轨缩写 该用户输入一些已知的语法,如HTML和CSS。 当用户输入类似 Emmet 缩写的东西时,扩展开始缩写跟踪( adds) emmet-abbreviation 分类到文本片段。 缩写变为 复数 它显示缩写预览:
运行 emmetExpandAbbreviation 命令以扩展履带缩写或 emmetResetAbbreviation 重设它。 建议的关键约束 标签 页:1 emmetExpandAbbreviation 财务报告和审定财务报表 英格兰 页:1 emmetResetAbbreviation。 。 。 .
缩写跟踪器是 上下文意识:它检测到当前语法上下文,只在需要缩写的地方工作. 例如,在HTML语法中,它只在纯文本上下文中工作,而不起作用,例如在属性值或标记名中.
如果您在编辑器中已有缩写, 您可以 捕获 继续编辑: 运行 emmetCaptureAbbreviation 动作( e)Ctrl 空间 默认 :
缩写模式
如果无法进行缩略语跟踪, 或者您想给用户一个机会, 输入和扩展带有交互式预览的缩略语, 一个特殊的 缩写模式 已提供。 运行 emmetEnterAbbreviationMode 命令以输入此模式:所有用户类型都将作为带有预览和验证的缩写来跟踪。 使用 emmetExpandAbbreviation 命令以扩展或 emmetResetAbbreviation 以退出缩写模式.
JSX 缩写
为了不以出乎意料的缩略语跟踪来分散用户的注意力,在JSX语法Emmet中,需要用前缀缩略语 < 提供需要JSX加价的更自然的环境.
标记配对标记和重命名
扩展可以在编辑器中标记成对的打开并关闭 HTML 标记: 它添加 emmet-class-tag 财务报告和审定财务报表 emmet-close-tag 名称以匹配标签名称。 可选的是,当光标在近距离标记内时,扩展可以显示匹配开口标记的预览.
当标签配对标记被启用时, 当您更新打开或关闭标签时, 可以自动重命名标签配对 :
图标
软件包本身遵循了CodeMiror扩展常规,并在CodeMiror命名空间中注册了新的命令. 为了使用 Emmet, 您应该创建 CodeMiror 实例, 并提供以下 Emmet 动作的 keymap :
emmetExpandAbbreviation- 扩大 跟踪 缩写自当前光标位置( 见 扩展缩略语) (中文(简体) ).emmetResetAbbreviation- 重设 跟踪 编辑器中的缩写(见 扩展缩略语) (中文(简体) ).emmetEnterAbbreviationMode– 进入缩写模式.emmetInsertLineBreak- 如果光标介于标记之间,则插入格式化的换行符.emmetExpandAbbreviationAll– 从当前光标位置扩展缩写. 与emmetExpandAbbreviation,它不需要履带式缩写:它从当前光标位置取出缩写并可用于任何文档语法.emmetWrapWithAbbreviation—— 说 以缩略语环绕。 。 。 .emmetBalance编号 :emmetBalanceInward—— 说 余额。 。 。 .emmetToggleComment—— 说 切换注释emmetEvaluateMath—— 说 评估数学表达式emmetGoToNextEditPoint编号 :emmetGoToPreviousEditPoint—— 说 转到编辑点emmetGoToTagPair—— 说 转到匹配对等emmetIncrementNumberN编号 :emmetDecrementNumberN—— 说 增加/减少 地点N实值1, (中文(简体) ),01或者说10。 。 。 .emmetRemoveTag—— 说 删除标记emmetSplitJoinTag—— 说 拆分/ 加入标记emmetSelectNextItem编号 :emmetSelectPreviousItem—— 说 选择项目
选项
你可以通过 emmet 对象在创建 CodeMiror 编辑器实例以修改扩展行为时:
CodeMirror.fromTextArea(document.getElementById("code"), {
mode : "text/html",
lineNumbers : true,
// Pass Emmet extension options
emmet: {
mark: true,
markTagPairs: true,
previewOpenTag: false,
}
});
扩展支持以下选项:
mark(boolean或字符串[]):允许在编辑器中进行缩写跟踪和标记. 若为true它将在所有已知的语法中发挥作用。 您可以指定缩略语标记应工作的语法/模式; 数组可能包括markup或者说stylesheet关键词以启用所有已知的标记或样式表语法的选项.preview(boolean或字符串[]):启用履带缩写预览. 预览仅当缩略语在多个元素中会扩展时才会显示. 与mark选项,您可以启用用于所有语法(true)或将其限制在指定的语法或语法组.markTagPairs(boolean):在编辑器中启用 HTML 标记配对标记.previewOpenTag(boolean):当光标在其匹配的关闭标记内时显示打开的标记预览. 预览仅在打开的标签具有属性且工作时显示markTagPairs已启用autoRenameTags(boolean):在更新打开或关闭标签名时自动重命名标签配对. 只有在markTagPairs已启用.attributeQuotes(单位:千美元)'single'或者说'double':在生成的 HTML 属性值中使用的引用. 默认是'double'。 。 。 .markupStyle(单位:千美元)'html', (中文(简体) ),'xhtml'或者说'xml': 自我关闭元素的样式( 如<br>)和HTML语法中的布尔属性.comments(boolean):启用自动标签注释. 当启用时, Emmet 缩写中产生的元素id和(或)class属性会收到带有这些属性值的注释.commentsTemplate(字符串):评论模板. 默认值是\n<!-- /[#ID][.CLASS] -->中输出所有[财务报告和审定财务报表]只有在元素中存在指定的属性名(用UPPERCASE来写)时。 属性名称被实际值所取代. 使用\n以添加新行.bem(boolean):启用BEM支持. 启用时, Emmet 将首先处理类名-作为 元素 并带有_作为 修改 在 BEM 标记中。 这些类名将继承block名称来自当前或祖先元素。 例如,缩写ul.nav.nav_secondary>li.nav__item可缩短为ul.nav._secondary>li.-item当此选项启用时 .config(对象): Emmet配置有片段和高级选项.
Emmet 配置
与 config 选项(见上文)可以添加自定义缩写片段并微调 Emmet 行为.
片段按语法分组( 如 : html, (中文(简体) ), css, (中文(简体) ), pug 语法按类型分类: markup 或者说 stylesheet。您可以指定片段,这些片段只可用于组合语法或特定语法中的所有语法.
片段只是 Emmet 缩写的短名: 你要么为更大的缩写指定了简称, 要么为特定元素定义形状 :
CodeMirror.fromTextArea(document.getElementById("code"), {
mode : "text/html",
lineNumbers : true,
// Pass Emmet extension options
emmet: {
config: {
// Specify snippets for all markup syntaxes: HTML, XML, Pug etc.
markup: {
// Shorthand for larger abbreviation
foo: 'div.foo>section.bar*3',
// Define shape of element, looks like recursive abbreviation
a: 'a[href title]',
br: 'br/'
},
// Specify snippets for specific syntax only
html: {
nav: 'ul.nav>.nav-item*4>a'
}
}
}
});
注意标记和样式表片段定义不同 。 标记片段作为 Emmet 缩写( 例如, 您简单地描述元素名称及其默认属性) 来写, 而样式表片段则是 CSS 属性的别名, 有可选关键字列表, 由 | 字符键。 这些关键词用于缩写解析过程. 更多例子请查看 默认 Emmet 片段。 。 。 .
查看所有可用的配置参数 GlobalConfig 类型。 。 。 .