I love using Brackets, and I especially love using Emmet. It makes everything faster, better and more efficient. You don’t know Emmet? You need to! Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow.
There are a few things about Emmet that I don’t love one of them being is how Emmet produces the viewport meta tag. When you use the Emmet shorthand of meta:
<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
I prefer my viewport meta tag to look like this:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
So how to resolve this. Well, it took some time but this is what I did:
- In Brackets, go to Help -> Open extensions folder.
- Once opened, open user folder and find brackets-emmet folder
- Navigate through the folders and inside of the node_modules > emmet > lib > snippets.json, open this file inside of Brackets.
- You can either search for ‘meta:
vp ‘ or navigate to line 716
Once here you’ll find this code:
“meta:vp”: “<meta name=\”viewport\” content=\”width=${1:device-width}, user-scalable=${2:no}, initial-scale=${3:1.0}, maximum-scale=${4:1.0}, minimum-scale=${5:1.0}\” />”,
What we want is to remove the following:
“meta:vp”: “<meta name=\”viewport\” content=\”width=${1:device-width}, user-scalable=${2:no}, initial-scale=${3:1.0}, maximum-scale=${4:1.0}, minimum-scale=${5:1.0}\” />”,
So you should end up with this:
“meta:vp”: “<meta name=\”viewport\” content=\”width=${1:device-width}, initial-scale=${3:1.0}\” />”,
Save the file and close and relaunch Brackets, if you use the shortcut for the meta tag you’ll see your modified code show up.
This is a time saver for me! I hope it helped you too