Detailed explanation of the installation of Sublime plug-in Emmet and the solution to the problem of Tab completion code

Emmet is a very useful plug-in for the Web front-end development tool Sublime. It uses CSS selector-like syntax to generate code, which greatly improves the speed of writing HTML and CSS code. Just hold down the Tab key to expand an abbreviation into an HTML and CSS code block, as shown in the figure below. Most tags can be automatically generated. Below, the sublime tutorial column will introduce to you a way to install the Emmet plug-in using online installation.

Method steps:

Before installing the Emmet plug-in, we first need to install the Package Control plug-in manager on Sublime Text3, specifically Please refer to the following articles for operation.

Hold down the shortcut key Ctrl Shift P or select Perferences-->Package Control in the menu bar to open the command panel. If there is no response, wait for a while and it will pop up. The interface is as shown below.

Open the command panel and find package control install package, or enter "pcip", the first letters of these four words, in the command panel, and a new package installation panel will appear. , search for emmet and click the Enter key after finding it. It will be installed automatically later.

After the installation is completed, you can check whether it is successful through Perferences-->Package Settings-->Emmet. If Emmet indicates that the installation is successful.

After the installation is complete, we use the Emmet plug-in to quickly generate HTML code. For example, enter html:5 and hold down the Tab key to generate the complete structure of the HTML file. However, many people After the installation is complete, input html:5 and then hold down the Tab key but nothing happens. What is the reason for this? It turns out that Emmet's default shortcut key is Ctrl E, and we need to set it to the commonly used Tab key.

Select Preferences-->PackageSettings-->Emmet-->KeyBindings-->User in the menu bar and paste the following information in.

[{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}]

Restart Sublime Text3. Now we can complete the code. Enter html:5 on the newly created file and hold down the Tab key to see the following code.

Notes

The reason why the Emmet plug-in Tab key does not work is mostly due to shortcut key conflicts, and additional checks are required. Whether the installation is successful.

The above is the detailed content of Detailed explanation of the installation of Sublime plug-in Emmet and the solution to the problem of Tab completion code. For more information, please follow other related articles on the PHP Chinese website!