详解Sublime插件Emmet的安装及Tab补全代码问题的解决方法

1. Sublime插件Emmet的安装

Emmet是一款可以快速编写HTML和CSS代码的插件，在Sublime中使用Emmet能够更加方便熟练地进行快速编辑，提高工作效率。

1.1 安装Package Control

在安装Emmet之前，需要先安装Sublime的插件管理器Package Control。安装方法如下：

Step 1:打开Sublime控制台，方法为Ctrl + ~，或者前往菜单Tools > Developer > New Console。

Step 2:粘贴以下代码：

import urllib.request,os,hashlib;

h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88';
pf = 'Package Control.sublime-package';
ipp = sublime.installed_packages_path();
urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) );
by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read();
dh = hashlib.sha256(by).hexdigest();
print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Step 3:重启Sublime即可。

1.2 安装Emmet插件

Step 1:打开Sublime，进行Package Control的安装，方法为：前往菜单Tools > Command Palette... > Package Control: Install Package，等待一定时间后即可弹出对话框。

Step 2:输入Emmet以搜索Emmet插件，待搜到Emmet时，点击即可进行安装。

Step 3:Emmet安装完毕后，需要进行一下设置以确保正常运行。

Step 4:打开Sublime，前往菜单Preferences > Settings。

{

    "auto_complete_commit_on_tab": true,  // Tab自动补全功能，默认false需改为true
    "ignored_packages": [
        "Vintage"
    ]
}

在user配置文件中添加以上代码后，即可进行设置。

2. Tab补全代码问题的解决方法

2.1 概述

有时，使用Emmet插件进行代码补全时按下Tab键无法补全代码，需要使用Enter键来进行代码补全。这会影响工作效率，需要进行解决。

2.2 解决方法

在Sublime中，Tab键默认为前往下一个可编辑元素的快捷键，因此需要对Emmet进行设置以确保Tab键补全代码功能正常。

Step 1:打开Sublime，前往菜单Preferences > Key Bindings。

Step 2:在user配置文件中添加以下代码：

[

    { "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [
        { "operand": "source.css", "operator": "equal", "match_all": true, "key": "selector" },
        { "match_all": true, "key": "selection_empty" },
        { "operator": "equal", "operand": false, "match_all": true, "key": "has_next_field" },
        { "operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible" },
        { "match_all": true, "key": "is_emmet_action" }
    ]},
    { "keys": ["tab"], "command": "next_field", "context": [
        { "key": "has_next_field", "operator": "equal", "operand": true }
    ]},
    { "keys": ["tab"], "command": "commit_completion", "context": [
        { "key": "auto_complete_visible" },
        { "key": "setting.tab_completion", "operator": "equal", "operand": true }
    ]},
    { "keys": ["tab"], "command": "insert_best_completion", "args": { "default": "\t", "exact": true },
        "context": [
            { "key": "setting.tab_completion", "operator": "equal", "operand": true },
            { "key": "preceding_text", "operator": "regex_contains", "operand": r"^\s*$", "match_all": true },
            { "key": "following_text", "operator": "regex_contains", "operand": "^$", "match_all": true }
        ]
    }
]

添加代码后，重启Sublime，即可Tab键进行代码补全。