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
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)
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?
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:
<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/