QA Graphic

Emmet in BBEdit

Code HTML faster in BBEdit

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

div>ul>li*2

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:

npm install emmet

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

npm Install

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:

h2.card-title>h5.card-subtitle>p*3

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:

card.mt-3>.card-header>.card-body

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/

 

Comments

Add Comments

Name:
Comment:

 

About

As someone who has worked on Macs since 1989, I will use my experience to share tips and tricks with you on Fridays. As a Mac user since 1989, I have seen the evolution of Mac software and hardware, and I know how Mac computers work. I also know how to troubleshoot and fix Mac problems that can arise.

Schedule

WednesdaySnagIt for QA
ThursdayPython
FridayMacintosh
SaturdayInternet Tools
SundayOpen Topic
Monday Media Monday
TuesdayQA