# @emmetio/codemirror6-plugin 中文文档

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

版本：0\.4\.2
npm 元数据更新时间：2026-10-29T20:07:33.831Z
中文译文更新时间：2026-11-13T15:35:02.978Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40emmetio/codemirror6-plugin
原文对照：https://npmcn.com/package/%40emmetio/codemirror6-plugin/?lang=original

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

- 包体积（解压后）：1.1 MB，52 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：@codemirror/view ^6\.29\.1，@codemirror/state ^6\.4\.1，@codemirror/commands ^6\.6\.0，@codemirror/lang-css ^6\.2\.1，@codemirror/language ^6\.10\.2，@codemirror/lang-html ^6\.4\.9，@codemirror/autocomplete ^6\.17\.0，@codemirror/lang-javascript ^6\.2\.2
- 首次发布：2021-12-23T10:45:20.367Z
- 最新版本发布：2026-10-29T20:07:33.636Z
- 近 30 天下载量：153632（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 2 个）

## 中文简介

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

## 安装

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

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

## README

# CodeMiror 6 编辑器的 Emmet 扩展名

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

> 扩展开发由 [代码Pen](https://codepen.io/) 财务报告和审定财务报表 [替换](https://replit.com/)

* * *

## 如何使用

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

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

插件 API 遵循了 CodeMiror 6 设计 : 它是一个 ES6 模块, 提供了一些导出 [扩展](https://codemirror.net/6/docs/guide/#extending-codemirror) 您应该导入并添加到您的 `EditorState` 举个例子.

在大多数情况下,这种包出口 [包含动作](https://docs.emmet.io/actions/) 作为 [`StateCommand`](https://codemirror.net/6/docs/ref/#state.StateCommand),其使用方式如下:

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

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

要启用缩写跟踪器,请导入 `abbreviationTracker` 函数并将其结果添加到编辑器扩展:

```js
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`数字 :

```js
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碎片.
-   `jsx` jSX语法。 默认情况下,需要缩写开头 `<` 为了跳过为变量和函数捕获的假阳性缩写,还修改了输出以匹配JSX的规格(例如重命名) `class` 属性为 `className` (例如)
-   `css`, (中文(简体) ), `scss`, (中文(简体) ), `sass`, (中文(简体) ), `stylus`:样式表缩写和输出的各种选项.
-   `haml`, (中文(简体) ), `jade`, (中文(简体) ), `pug`, (中文(简体) ), `slim`: 支持标记预处理器.

默认语法是 `html`。 。 。 .

## 可用命令

当前软件包中可提供以下命令:

-   `expandAbbreviation` –将左侧的缩写扩展为当前被护理位置. 与缩写跟踪器不同, 此命令在任何地方都有效, 并且不尊重当前上下文 .
-   `enterAbbreviationMode` - 进来 [缩写模式](https://npmcn.com/package/%40emmetio/codemirror6-plugin/#readme-abbreviation_mode)。 。 。 .
-   `wrapWithAbbreviation` —— 说 [以缩略语环绕](https://docs.emmet.io/actions/wrap-with-abbreviation/)。请注意,这不是国家命令,而是您应当调用和通过以扩展方式返回的结果的函数。 您可以选择通过键盘快捷键作为参数( NameCtrl -w (英语) (默认情况下).
-   `balanceOutward`编号 :`balanceInward` —— 说 [余额](https://docs.emmet.io/actions/match-pair/)。 。 。 .
-   `toggleComment` —— 说 [切换注释](https://docs.emmet.io/actions/toggle-comment/)
-   `evaluateMath` —— 说 [评估数学表达式](https://docs.emmet.io/actions/evaluate-math/)
-   `goToNextEditPoint`编号 :`goToPreviousEditPoint` —— 说 [转到编辑点](https://docs.emmet.io/actions/go-to-edit-point/)
-   `goToTagPair` —— 说 [转到匹配对等](https://docs.emmet.io/actions/go-to-pair/)
-   `incrementNumberN`编号 :`decrementNumberN` —— 说 [增加/减少](https://docs.emmet.io/actions/inc-dec-number/) 地点 `N` 实值 `1`, (中文(简体) ), `01` 或者说 `10`。 。 。 .
-   `removeTag` —— 说 [删除标记](https://docs.emmet.io/actions/remove-tag/)
-   `splitJoinTag` —— 说 [拆分/ 加入标记](https://docs.emmet.io/actions/split-join-tag/)
-   `selectNextItem`编号 :`selectPreviousItem` —— 说 [选择项目](https://docs.emmet.io/actions/select-item/)

## 许可证

[麻省理工学院](https://npmcn.com/package/%40emmetio/codemirror6-plugin/LICENSE)

## 常见问题

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

代码 6 添加扩展名 艾米特 支持文本编辑器\.

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

在项目目录运行 npm install @emmetio/codemirror6-plugin，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@codemirror/view（^6\.29\.1）、@codemirror/state（^6\.4\.1）、@codemirror/commands（^6\.6\.0）、@codemirror/lang-css（^6\.2\.1）、@codemirror/language（^6\.10\.2）、@codemirror/lang-html（^6\.4\.9）、@codemirror/autocomplete（^6\.17\.0）、@codemirror/lang-javascript（^6\.2\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

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

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

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

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

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

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

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

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

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

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