Emmet in BBEdit

Code HTML faster in BBEdit

March 11, 2022 by cryan.com

Emmet is an easy way for Web Developers to generate code from a series of shortcuts. It's a good tool for raw HTML and CSS developers.

Emmit support was include in BBEdit v.14 which was released in the summer of 2021.

Sample Emmet Command

Using Emmit expands to:

<div>
	<ul>
		<li><# $1 #></li>
		<li><# $2 #></li>
	</ul>
</div>

Setting up Emmet in BBEdit

To use Emmet in BBEdit you need to install it. You use Node Package Manager (NPM) to install the files. ( Emmet NPM page)

Got NPM?

If you haven't installed NPM before, or don't know if you have it installed - you can always download the node installer from Nodejs.org

Download the NodeJS installer from Nodejs.org website: https://nodejs.org/

After doing the NPS install, you will need to run the NPM install command to install Emmet:

Why not run the install command in BBEdit's Shell Worksheet?

Using Emmet in BBEdit

The important thing about using Emmet in BBEdit is that you use the "Expand Emmet Abbreviation" on the same line that you have type the abbreviation.

You do not select the text and then use the "Expand Emmet Abbreviation" command.

Copy the following into any BBEdit window:

At the end of the line use the keyboard shortcut Shift F5 or select "Expand Emmet Abbreviation" from the Edit menu.

If your into Bootstrap, this is a good one to know:

Output:

<card class="mt-3">
	<div class="card-header">
		<div class="card-body"><# $1 #></div>
	</div>
</card>

That created the basic card area in the Bootstrap universe.

Learn More Emmet Snippets

You can learn more about Emmet commands from there website: https://docs.emmet.io/