Emmet 在 Atom 编辑器中的使用教程

Emmet 在 Atom 编辑器中的使用教程

emmet-atomEmmet support for Atom项目地址:https://gitcode.com/gh_mirrors/em/emmet-atom

1. 项目的目录结构及介绍

Emmet 是一个用于提高 HTML 和 CSS 编写效率的工具，Emmet 支持在多种编辑器中使用，其中包括 Atom 编辑器。以下是 Emmet 在 Atom 编辑器中的项目目录结构及介绍：

emmet-atom/
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── keymaps/
│   └── emmet.cson
├── lib/
│   ├── emmet-provider.coffee
│   └── main.coffee
├── menus/
│   └── emmet.cson
├── package.json
├── settings/
│   └── emmet.cson
└── snippets/
    └── emmet.cson

• CHANGELOG.md: 记录项目的更新日志。
• LICENSE.md: 项目的许可证信息。
• README.md: 项目的基本介绍和使用说明。
• keymaps/: 包含 Emmet 的快捷键配置文件。
• lib/: 包含 Emmet 的核心逻辑文件。
• menus/: 包含 Emmet 的菜单配置文件。
• package.json: 项目的元数据文件，包括依赖、脚本等信息。
• settings/: 包含 Emmet 的设置配置文件。
• snippets/: 包含 Emmet 的代码片段配置文件。

2. 项目的启动文件介绍

Emmet 在 Atom 编辑器中的启动文件是 lib/main.coffee。这个文件负责初始化 Emmet 插件，并将其集成到 Atom 编辑器中。以下是 lib/main.coffee 文件的主要内容：

module.exports =
  config: require './config'
  activate: (state) ->
    EmmetEditorView = require './emmet-editor-view'
    @provider = new EmmetEditorView()
    atom.packages.onDidActivateInitialPackages ->
      atom.workspace.observeTextEditors (editor) =>
        @provider.registerEditor(editor)
  deactivate: ->
    @provider?.dispose()
  provide: ->
    @provider

• config: 加载配置文件。
• activate: 插件激活时执行的函数，初始化 Emmet 编辑器视图并注册到 Atom 编辑器中。
• deactivate: 插件停用时执行的函数，释放资源。
• provide: 提供 Emmet 编辑器视图实例。

3. 项目的配置文件介绍

Emmet 在 Atom 编辑器中的配置文件主要位于 settings/emmet.cson 和 package.json 中。

settings/emmet.cson

这个文件包含了 Emmet 的各种设置选项，例如快捷键、代码片段等。以下是部分配置示例：

"atom-text-editor":
  "emmet:expand-abbreviation": "tab"
  "emmet:balance-outward": "ctrl-shift-."
  "emmet:balance-inward": "ctrl-shift-,"

package.json

这个文件包含了项目的元数据和依赖信息。以下是部分配置示例：

{
  "name": "emmet",
  "main": "./lib/main",
  "version": "2.1.3",
  "description": "Emmet support for Atom",
  "keywords": [
    "emmet",
    "html",
    "css",
    "snippets",
    "coding"
  ],
  "activationCommands": {
    "atom-workspace": "emmet:expand-abbreviation"
  },
  "repository": "https://github.com/emmetio/emmet-atom",
  "license": "MIT",
  "engines": {
    "atom": ">=1.0.0 <2.0.0"
  },
  "dependencies": {
    "emmet": "^2.1.3"
  }
}

• name: 项目名称。
• main: 项目的主入口文件。
• version: 项目版本。
• description: 项目描述。
• keywords: 项目关键词。
• activationCommands: 激活命令。
• repository:

emmet-atomEmmet support for Atom项目地址:https://gitcode.com/gh_mirrors/em/emmet-atom