# @emmetio/codemirror-plugin 中文文档

规范地址：https://npmcn.com/package/%40emmetio/codemirror-plugin/

版本：1\.2\.4
npm 元数据更新时间：2022-06-12T17:33:25.015Z
中文译文更新时间：2026-11-13T15:36:07.952Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40emmetio/codemirror-plugin
原文对照：https://npmcn.com/package/%40emmetio/codemirror-plugin/?lang=original
项目主页：https://github.com/emmetio/codemirror-plugin#readme
源码仓库：https://github.com/emmetio/codemirror-plugin

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：4.8 MB，38 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2017-05-16T23:51:48.532Z
- 最新版本发布：2021-03-27T21:26:05.030Z
- 近 30 天下载量：6954（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：29（近 12 个月 0 个）

## 中文简介

CodeMiror 网络编辑器插件

## 安装

```sh
npm install @emmetio/codemirror-plugin
```

也可以使用：`pnpm add @emmetio/codemirror-plugin`、`yarn add @emmetio/codemirror-plugin`、`bun add @emmetio/codemirror-plugin`

## README

# CodeMiror 编辑器的缩写扩展名

[代码](http://codemirror.net/) 添加扩展名 [艾米特](https://emmet.io/) 支持文本编辑器.

## 如何使用

此扩展可以安装为正则 npm 模块 :

```
npm i @emmetio/codemirror-plugin
```

软件包有两种口味:一个独立的浏览器捆绑和ES/CommonJS模块,可以在您的应用中使用.

如果您正在构建应用程序, 您可以使用这样的扩展 :

```js
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` 文件进入您的页面 :

```html
<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` 分类到文本片段。 缩写变为 _复数_ 它显示缩写预览:

![Emmet abbreviation example](https://npmcn.com/package/%40emmetio/codemirror-plugin/example/emmet-expand.gif)

运行 `emmetExpandAbbreviation` 命令以扩展履带缩写或 `emmetResetAbbreviation` 重设它。 建议的关键约束 标签 页:1 `emmetExpandAbbreviation` 财务报告和审定财务报表 英格兰 页:1 `emmetResetAbbreviation`。 。 。 .

缩写跟踪器是 _上下文意识_:它检测到当前语法上下文,只在需要缩写的地方工作. 例如,在HTML语法中,它只在纯文本上下文中工作,而不起作用,例如在属性值或标记名中.

如果您在编辑器中已有缩写, 您可以 _捕获_ 继续编辑: 运行 `emmetCaptureAbbreviation` 动作( e)Ctrl 空间 默认 :

![Emmet abbreviation capturing](https://npmcn.com/package/%40emmetio/codemirror-plugin/example/emmet-capture.gif)

### 缩写模式

如果无法进行缩略语跟踪, 或者您想给用户一个机会, 输入和扩展带有交互式预览的缩略语, 一个特殊的 _缩写模式_ 已提供。 运行 `emmetEnterAbbreviationMode` 命令以输入此模式:所有用户类型都将作为带有预览和验证的缩写来跟踪。 使用 `emmetExpandAbbreviation` 命令以扩展或 `emmetResetAbbreviation` 以退出缩写模式.

### JSX 缩写

为了不以出乎意料的缩略语跟踪来分散用户的注意力,在JSX语法Emmet中,需要用前缀缩略语 `<` 提供需要JSX加价的更自然的环境.

![Emmet JSX example](https://npmcn.com/package/%40emmetio/codemirror-plugin/example/emmet-jsx.gif)

## 标记配对标记和重命名

扩展可以在编辑器中标记成对的打开并关闭 HTML 标记: 它添加 `emmet-class-tag` 财务报告和审定财务报表 `emmet-close-tag` 名称以匹配标签名称。 可选的是,当光标在近距离标记内时,扩展可以显示匹配开口标记的预览.

当标签配对标记被启用时, 当您更新打开或关闭标签时, 可以自动重命名标签配对 :

![Emmet tag pair example](https://npmcn.com/package/%40emmetio/codemirror-plugin/example/emmet-tag-pair.gif)

## 图标

软件包本身遵循了CodeMiror扩展常规,并在CodeMiror命名空间中注册了新的命令. 为了使用 Emmet, 您应该创建 CodeMiror 实例, 并提供以下 Emmet 动作的 keymap :

-   `emmetExpandAbbreviation` - 扩大 _跟踪_ 缩写自当前光标位置( 见 [扩展缩略语](https://npmcn.com/package/%40emmetio/codemirror-plugin/#readme-expanding_abbreviations)) (中文(简体) ).
-   `emmetResetAbbreviation` - 重设 _跟踪_ 编辑器中的缩写(见 [扩展缩略语](https://npmcn.com/package/%40emmetio/codemirror-plugin/#readme-expanding_abbreviations)) (中文(简体) ).
-   `emmetEnterAbbreviationMode` – 进入缩写模式.
-   `emmetInsertLineBreak` - 如果光标介于标记之间,则插入格式化的换行符.
-   `emmetExpandAbbreviationAll` – 从当前光标位置扩展缩写. 与 `emmetExpandAbbreviation`,它不需要履带式缩写:它从当前光标位置取出缩写并可用于任何文档语法.
-   `emmetWrapWithAbbreviation` —— 说 [以缩略语环绕](https://docs.emmet.io/actions/wrap-with-abbreviation/)。 。 。 .
-   `emmetBalance`编号 :`emmetBalanceInward` —— 说 [余额](https://docs.emmet.io/actions/match-pair/)。 。 。 .
-   `emmetToggleComment` —— 说 [切换注释](https://docs.emmet.io/actions/toggle-comment/)
-   `emmetEvaluateMath` —— 说 [评估数学表达式](https://docs.emmet.io/actions/evaluate-math/)
-   `emmetGoToNextEditPoint`编号 :`emmetGoToPreviousEditPoint` —— 说 [转到编辑点](https://docs.emmet.io/actions/go-to-edit-point/)
-   `emmetGoToTagPair` —— 说 [转到匹配对等](https://docs.emmet.io/actions/go-to-pair/)
-   `emmetIncrementNumberN`编号 :`emmetDecrementNumberN` —— 说 [增加/减少](https://docs.emmet.io/actions/inc-dec-number/) 地点 `N` 实值 `1`, (中文(简体) ), `01` 或者说 `10`。 。 。 .
-   `emmetRemoveTag` —— 说 [删除标记](https://docs.emmet.io/actions/remove-tag/)
-   `emmetSplitJoinTag` —— 说 [拆分/ 加入标记](https://docs.emmet.io/actions/split-join-tag/)
-   `emmetSelectNextItem`编号 :`emmetSelectPreviousItem` —— 说 [选择项目](https://docs.emmet.io/actions/select-item/)

### 选项

你可以通过 `emmet` 对象在创建 CodeMiror 编辑器实例以修改扩展行为时:

```js
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 缩写的短名: 你要么为更大的缩写指定了简称, 要么为特定元素定义形状 :

```js
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 片段](https://github.com/emmetio/emmet/tree/master/snippets)。 。 。 .

查看所有可用的配置参数 [`GlobalConfig` 类型](https://github.com/emmetio/emmet/blob/master/src/config.ts#L26)。 。 。 .

## 常见问题

### @emmetio/codemirror-plugin 是什么？

CodeMiror 网络编辑器插件

### 如何安装 @emmetio/codemirror-plugin？

在项目目录运行 npm install @emmetio/codemirror-plugin，或使用 pnpm add / yarn add / bun add。

### @emmetio/codemirror-plugin 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @emmetio/codemirror-plugin 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @emmetio/codemirror-plugin 可以商用吗？

@emmetio/codemirror-plugin 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @emmetio/codemirror-plugin 的下载量有多少？

根据 npm 官方下载统计，@emmetio/codemirror-plugin 在 2026/10/14 – 2026/11/12 这 30 天内被下载 6,954 次，日均约 232 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @emmetio/codemirror-plugin 还在维护吗？

最新版本 1\.2\.4 发布于 2021/03/28（5 年前）；至今共发布 29 个版本，其中过去 12 个月发布了 0 个；首次发布于 2017/05/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。