How to use Emmet in Sublime Text?
Emmet is a plugin for Sublime Text that accelerates HTML and CSS coding through abbreviations. 2. Install it via Package Control by opening the Command Palette, selecting "Install Package," searching for Emmet, and installing it. 3. After installation, use abbreviations in HTML files and press Tab to expand them into full code, such as div.container becoming
. 4. In CSS, shorthand like m10 expands to margin: 10px; with Tab. 5. Ensure the file syntax is set to HTML or CSS, and if Tab doesn’t work, try Enter or use Ctrl E to manually expand. 6. Emmet supports nested structures like header>nav>ul>li*3>a, enabling rapid generation of complex code blocks. 7. It significantly reduces typing effort, making coding faster and more efficient.
Emmet is a powerful plugin for Sublime Text that speeds up HTML and CSS coding with abbreviations. Once installed, you can write shorthand syntax and expand it into full code instantly.
Install Emmet in Sublime Text
Emmet doesn’t come built-in, so you need to install it via Package Control:
- Make sure Package Control is installed in Sublime Text.
- Press Ctrl Shift P (or Cmd Shift P on Mac) to open the Command Palette.
- Type Install Package and select "Package Control: Install Package".
- Search for Emmet, click to install it.
- Restart Sublime Text if needed.
Use Emmet Abbreviations in HTML
Once installed, Emmet works in HTML files automatically. Type an abbreviation and press Tab to expand it.
- Type div.container Tab → becomes
- Type ul>li*5 Tab → creates an unordered list with 5 list items.
- Type a[href=#] Tab → expands to an anchor tag with an href attribute.
Use Emmet in CSS
Emmet also helps with CSS properties. Start typing a shorthand and hit Tab.
- Type m10 Tab → expands to margin: 10px;
- Type p10 Tab → becomes padding: 10px;
- Type fz14 Tab → expands to font-size: 14px;
Common Tips and Shortcuts
Get the most out of Emmet with these handy tips:
- Make sure your file is set to HTML or CSS syntax (bottom-right corner of Sublime Text).
- If Tab doesn’t work, try Enter — some setups use Enter for expansion.
- Use Ctrl E to expand the current abbreviation manually.
- Emmet supports nested structures like header>nav>ul>li*3>a — press Tab to build a full block.
Basically, just type fast abbreviations and press Tab. Emmet does the rest. It’s a small tool that saves a lot of typing time.
The above is the detailed content of How to use Emmet in Sublime Text?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
How to use Sublime Text as a diff tool for Git?
Sep 21, 2025 am 01:06 AM
Configure Git to use SublimeText as the difference comparison tool. You need to set gitconfig to specify sublime as the default diff tool and define the call command; 2. Install the command line tool to make subl available in the terminal, and configure gitdifftool.sublime.cmd to use subl-w--wait--diff"$LOCAL""$REMOTE" to open the difference file; 3. Use the gitdifftool command to view changes between temporary storage or submissions in SublimeText in a double column view; 4. This method depends on the --d of SublimeText4
How to use the GitGutter plugin in Sublime Text?
Sep 17, 2025 am 05:12 AM
GitGutterdisplaysreal-timelinechangesinSublimeTextusingicons: foradded,~formodified,-fordeleted,▶/↺formovedlines;installviaPackageControl,ensureGitisinPATH,enablefeatureslikelivemodeoruntrackedfilemarkersinsettings,anduseright-clickcommandstonavigate
How to use Emmet in Sublime Text?
Sep 21, 2025 am 03:38 AM
EmmetisapluginforSublimeTextthatacceleratesHTMLandCSScodingthroughabbreviations.2.InstallitviaPackageControlbyopeningtheCommandPalette,selecting"InstallPackage,"searchingforEmmet,andinstallingit.3.Afterinstallation,useabbreviationsinHTMLfil
How to set up a build system for Java in Sublime Text?
Sep 20, 2025 am 12:33 AM
Answer: To configure the Java build system for SublimeText, you need to install JDK and create a custom build file. 1. Make sure that the JDK is installed and the environment variables are correct; 2. Build a new build system in Sublime and use a JSON configuration containing javac and java commands; 3. Save as Java.sublime-build; 4. Select the build system and compile and run with Ctrl B. The output and errors will be displayed in the bottom panel, suitable for small projects or learning.
How to highlight matching tags in Sublime Text?
Sep 16, 2025 am 01:11 AM
SublimeText automatically highlights matching HTML or XML tag pairs, and puts the cursor on the tag to display; if it does not take effect, check whether the syntax settings are correct. 1. Tag highlighting is supported by default to ensure that the file syntax is HTML or XML. 2. Optionally install the BracketHighlighter plug-in to enhance the effect. After searching and installing through the command panel, you can get clearer icons and underline prompts. 3. Adjust the highlight style through preferences, such as modifying it to solid, outline or underscore, and confirm that the label type is enabled.
How to reset Sublime Text to its default settings?
Sep 16, 2025 am 12:29 AM
ResettingSublimeTexttodefaultsettingsinvolvesclosingtheapp,locatingthedatadirectory(Windows:C:\Users\YourUsername\AppData\Roaming\SublimeText;macOS:~/Library/ApplicationSupport/SublimeText;Linux:~/.config/sublime-text),thendeletingorrenamingthefolder
How to sort lines alphabetically in Sublime Text?
Sep 14, 2025 am 03:04 AM
SelectLlinesNoseEdit → Sortlinestosortalphabetically (Atoz) Oredit → Sortlines (Reverse) forzta; optionally, addcustomKeyboardSviapurance → keybindingsforfasteraccess.
How to use multiple cursors in Sublime Text?
Sep 17, 2025 am 01:44 AM
UseCtrl Alt Up/Downtoaddcursorsaboveorbelow.2.PressCtrl DtoselectwordinstancesonebyoneorCtrl Alt Gtoselectallatonce.3.HoldCtrlandclicktoplacemultiplecursorsmanually.4.UseShift Altanddragforcolumnselectiontoeditmultiplelinesvertically.Thesemethodsenab
