Atom编辑器如何配置自定义HTML模板实现通用代码快捷填充

你可以通过两种方案实现需求，操作都比较简单：

方案1：原生Snippets功能（无需额外安装插件） #

Atom自带代码片段功能，是最稳定的实现方式，操作步骤如下：

• 点击Atom顶部菜单栏的Atom > 配置 > Snippets（Windows系统为文件 > 配置 > Snippets），会自动打开snippets.cson配置文件
• 在配置文件末尾追加对应HTML文件类型的自定义片段，参考格式如下：

'.text.html.basic':
  '自定义HTML公共模板':
    'prefix': 'myhtml' # 自定义触发关键词，可自行修改
    'body': """
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title></title>
      <!-- 此处替换为你自己的通用头部代码、公共样式引用等 -->
    </head>
    <body>
      <!-- 此处替换为你自己的通用导航栏代码 -->
      <nav class="common-nav"></nav>
      
      <!-- 页面主体占位，可添加${1:内容}格式的占位符，插入后按Tab可快速切换填充位置 -->
      <main>
        ${1:页面主体内容}
      </main>
      
      <!-- 此处替换为你自己的通用页脚代码 -->
      <footer class="common-footer"></footer>
    </body>
    </html>
    """

• 保存配置文件后重启Atom即可生效。后续在HTML文件中输入你设置的触发关键词（比如上面示例的myhtml），按Tab键就会自动插入整套预设代码。如果需要绑定快捷键触发，可以在Atom的快捷键配置页面，给snippets:expand命令绑定你习惯的快捷键组合。

如果只需要单独插入导航、页脚等单个公共模块，可以分别为每个模块单独配置Snippets片段，设置不同的触发关键词即可。

方案2：Emmet插件扩展（适合已安装Emmet的用户） #

如果你已经安装了前端常用的Emmet补全插件，可以直接扩展Emmet的自定义片段：

• 打开Atom的Emmet插件配置页，找到扩展路径对应的本地目录
• 在该目录下新建snippets.json文件，按照Emmet的片段规则写入你的自定义模板即可，使用逻辑和原生Snippets一致。

内容的提问来源于stack exchange，提问作者Sean