Improving VSCode Workflow on Mac For Beginners: Part 2
I wrote an article a couple weeks ago about some of the commands and shortcuts that can help improve workflow for those of us using VSCode as our editor. Since then, I have found some more tricks, and figured a ‘Part 2’ was in order! Be sure to check my first post as well as this one, you can find it here.
I said it in the other post, and it is relevant in this one, some of the tips I’ll be discussing may be available in other editors, but I personally am not 100% sure so I don’t want to put any misinformation out there. If I discover they work with other editors, I will come back edit/add info to each tip about which ones they work with.
Nonetheless, this post will add some new Mac shortcuts and will also focus on a new topic which has a ton of value when trying to save keystrokes and time, a plugin called Emmet.
Let’s get right to it!
Keyboard Shortcuts
Toggle Sidebar
Toggling the sidebar is something I always clicked to minimize, with the shortcut ⌘ + B, I won’t have to click anymore.
I just discovered this one and I have already used it a ton, the less I can use my mouse/touchpad to click things the better. Little time savers like this don’t seem like much individually, but if we had a way to add it up over , I think we would be surprised how much time something like toggling a sidebar can save us in the long run.
Toggle Bottom Panel / Terminal
So I actually mentioned how to toggle the terminal in the last post, except I used the command control + `. This time, I wanted to show a different command which does the same thing, and could be potentially easier for you depending on which you like more; ⌘ + J.
Nothing actually new this time, just a different option I found that I might like more. Decide for yourself which works best for you!
Format Document
I have an extension called Prettier with my VSCode editor, but even if you don’t, this command should still work to format the document you currently have active: shift + ⌥ + F
This shortcut comes in handy for me especially when I’m unsure of the formatting for JS frameworks I’m learning. I’m human, like you (I hope), and make formatting mistakes in plain HTML too, so being able to use this shortcut and then know everything will be acceptable to look at is awesome for me.
Emmet Plugin Magic
Emmet comes built into VSCode, and let me tell you, I was sleeping on using this. There is a whole lot you can do with this, and this cheat sheet for everything you can do with it is probably the best source to learn about it, but I want to share a couple of ways I have been using it that have been saving me so much time and so many keystrokes.
HTML
Let’s say you are in an HTML document, and you want to create a <div> with a class of ‘container’, and then inside that you want to create an <h1> with an id of ‘title’ followed by a <ul> with 5 <li>’s inside of it. Sounds like a decent amount of typing, right?
Would you be surprised to know you could type div.container>h1#title+ul>li*5 and hit tab or enter to achieve that result? I definitely was. Still don’t believe me? Check it out for yourself:
In this case that’s 30 characters typed vs. 138. Massive improvement! The cheat sheet I mentioned above shows all the different syntax and shortcuts possible, and the time saving possibilities are endless. This is only one way to use it with HTML!
CSS
For this example, let’s say we want to style our new <div> which has a class of container. We want it to have display: flex;, align-items: center;,padding: 20px;, and background-color: red;.
Once again, would it surprise you to know that I could achieve each of these properties with the following abbreviations? d:f, ai:c, p:20, and bc:red
Pretty wild right? Watch it in action!
Similar to using Emmet with HTML, with CSS, you can save a ton of keystrokes by learning the abbreviations. Honestly, a lot of the abbreviations are easily guessed, and d:f for display: flex; is a perfect example of that!
Conclusion
I want to continue learning ways to improve my workflow in the text editor I’m using, which for now is VSCode. Especially because of how many keystrokes these shortcuts and tips have already saved me in such a short period of time.
Someone might even take it as far as to say that these tips and tricks are saving your hands from carpal tunnel!
I hope this article has provided you with some value. As always, I hope you enjoyed reading and wish you happy hacking!
