Podcast Episode

492 – Customize VSCode to Work For You – Customizations

Announcements

Is there a plugin for that?

With more than 50,000 plugins in the WordPress repository, it’s hard to find the perfect one. Each week, I will highlight an interesting plugin form the repository.

For more great plugins, download my 50 Most Useful Plugins eBook.

Sticky Add To Cart Bar For WooCommerce is used to add a sticky bar that has the add to cart button with product information.

Customize VSCode to Work For You – Customizations

Silence the Noise

  • Hide the Activity Bar (left side)
    • Keyboard shortcuts:
      • Cmd+K+E (E for Explorer)
      • Cmd+K+V (V for Version Control)
      • Cmd+K+D (D for Debugger)
      • Cmd+K+X (X for eXtensions)
  • Hiding tabs bar
  • Clearing the clutter with the File Explorer
  • Add keybindings for renaming, new files, refresh
  • Hide the sidebar, status bar and mini map
  • Auto save when you navigate away

A lot of these suggestions are from Caleb P at https://learn-vscode.com/

Thank You!

Thank you to those who use my affiliate links. As you know I make a small commission when someone uses my link and I want to say thank you to the following people. For all my recommended resources, go to my Resources Page

Full Transcript

Business Transcription is provided by GMR Transcription.

On today’s episode, we are going to continue talking about VSCode and how to make it work for you with some modifications and some customizations to it right here on Your Website Engineer podcast, episode No. 492.

Hello and welcome to another episode of Your Website Engineer podcast. My name is Dustin Hartzler. I’m excited to be here with you today because we’re gonna be talking about a VSCode again. And I’ve been listening to lots of podcasts on VSCode. There’s been internal discussions at Automatic. And just, I’m trying to soak in as much as I can to try to make this code editor optimized for developing. And it doesn’t mean it’s gonna make me a better developer. It’s just going to get rid of some of the distractions and some of the things that I don’t need to think about when I’m working on a new theme or customizing a theme or whatnot. So, that’s what we’re gonna talk about today.

I do have some announcements to share with you and then a plugin to share. So, a first announcement is WooCommerce Blocks is now in Version 2.7, and the release notes are listed in the show notes here for episode No. 492. And there’s some cool things that are happening in there now. Check out in Cart Blocks, and there’s some improvements to this. And so, they are faster to load, and they load – The size has been really significantly decreased. So, the assets are gzipped in size, and they are twice as small – so, or half as small – or however you say that. And so, those pages – the Cart and the Checkout pages will load that much faster, which is really cool. And there’s also some other things that’s been changed – some of the improvements to styles of blocks under the default WordPress theme. The Carts, the Checkout, all of those things work faster. And there’s been a bunch of bugs that have been fixed, as well.

So, if you’re interested in seeing a new, compact look for – I guess, the WooCommerce Blocks, I should have explained, is a plugin that is bringing some new features that will eventually be into WooCommerce Core, kind of like the Gutenberg plugin now is going to be the testing ground for what’s gonna be in the block editor, very similar to WooCommerce Blocks. And so in the past, WooCommerce Blocks has all been about adding short codes – not short codes – but blocks to the editor. So, when you go to a post, you can add all your featured products, or you can easily list products with different categories and things like that. Well now, they’re bringing it into the – WooCommerce Blocks is now bringing into the section for Checkout and Cart. And so, that’s really gonna optimize the experience. I’m gonna take a look at this a little bit later too for one of my wife’s websites just to see if we can optimize that and use that to make the checkout flow that much simpler and that much faster. So, that is something to look at if you are interested in seeing the latest and greatest in what’s coming with WooCommerce.

And then moving along with the same kind of thought there is WooCommerce 4.3 Beta 1 is now available. The release is going to be sometime in July for WooCommerce 4.3. And it’s bringing a new homepage experience, and that’s a homepage inside of the dashboard. And so, if you go into your WordPress, your WP Admin, and then click on WooCommerce, there’s gonna be a homepage section, and it’s going to have inbox messages. It’s going to have a quick overview of core metrics for your store and shortcuts pointing out things in most-used settings – so, things like shipping and set-up taxes and things along those lines. And then there’s been some block updates, like I just mentioned. Some of those things that are in the blocks plugin will be moving into WooCommerce 4.3.

All right, that’s enough on the WooCommerce front. A few other things happening in the WordPress space this week. And one is Flywheel releases – or relaunches – Local Pro with their new, revamped, live-linked, and new host-agnostic pre-launch tools. And so, if you’ve been following along for a while, I really like Local as a development tool. You can install Local on your computer, and then you can have WordPress running on your computer. You can develop locally. That’s a different topic for a different time.

But they’ve relaunched a pro-version of this, and it’s a commercial upgrade from its free, local development tool. And the pro-version launched way back in June of 2019, or July of 2019, and it was geared towards Flywheel customers. But the tool has gradually evolved and now is optimized for any type of web host. And so, if you are a – not necessarily just a Flywheel host – or you host your websites elsewhere, and you want to try a new tool, I do recommend checking out this new Flywheel Pro. It has a live links revamped, which means that you can do a live link. You can create a live link from a site on your computer, so you can send it to somebody else, and then they can took a look at what you’ve been developing and what you’re working on. So, I think that’s really cool, and there’s some other notes here in the WP Tavern article that you can read.

Smash Balloon joins Awesome Motive. And Awesome Motive is the team behind WP Beginner, OptinMonster – All of those properties are what Awesome Motive is. And it acquired Smash Balloon. Smash Balloon is a family of social-feed plugins for WordPress. The developer, John Brackett, is now a partner at Awesome Motive through the deal, and his entire team will stay on, as part of the larger company. They have about – all of the plugins combined is around 1.3 million WordPress-powered sites, and they build social-feed plugins for Twitter, YouTube, Facebook, and Instagram. And so, that’s a cool thing that’s happening and is brought into the umbrella of Awesome Motive. So, that is what I want to share.

And then lastly, Gutenberg adds image editing, includes multi-block controls, and enables block directory search. So, some of the cool features in Gutenberg, like I said, Gutenberg – I can’t believe it’s on Version 8.4, but that’s the version that they’re working on. They’ll get all those features ironed out, and then they’ll move them into WordPress Core. But Gutenberg 8.4 has those changes.

And the big thing is you can change the aspect ratio of an image, which I think is kind of cool. So, you can do landscape mode or portrait mode, or you can do square, so you can choose all of that. You can choose how much you can zoom in on an image, which is pretty neat. And then you can also customize multiple blocks at once. So, say you highlight two or three text boxes at a time, then you can change the text color, the background color, all at one time. And then there’s a search area now to find new blocks. And so, if you’re interested in trying to find a block, you can use the search feature in the Gutenberg plugin, and it will highlight some of those blocks that are out there.

So, those are the news items of the week. And then I want to tell you about the plugin that I found this week. It’s by Add-Ons Plus, and it is called Sticky Add to Cart Bar for WooCommerce. And it’s basically a plugin that you can install on your WordPress site. It’s free, of course, because it is in the WordPress repository. They do have a pro-version. And what it is is it basically will allow you to add a bar across the bottom of your website that will allow you to have a Sticky Cart page. And so, if you’re on a product page, it will show at the bottom – like, here’s what’s in your – add this to your cart right away. So, as people are scrolling past the Add to Cart button, you can still see it everywhere. So, I think it’s pretty cool. It’s got cart animations and AJAX add to cart. You can use it for variable products. It’s mobile responsive. It looks like it’s a really cool plugin.

It’s just been released. So, if you have an interest in this, it works, like I said, on mobile. And it looks really good on desktop. It spans that full width. I think it’s a really neat way to add an easy call to action for your customers to add a product to the cart. You can add that with Sticky Add to Cart Bar for WooCommerce.

All right, let’s go ahead and continue talking about the main topic here, and that is going to be customizing VSCode to make it work for you and do some customizations. And so, if you’ve ever used a VSCode and you’ve opened it up, you can tell there are a ton of things going on. There’s just stuff everywhere. There’s sidebars, there’s bottom bars, there’s sidebars on the left and the right, and there’s colors, and there’s all kinds of things going on.

And so, I ended up, a few – I don’t know. This was probably – Let’s see, I can actually look here. Back in March, it looks like, I subscribed to a website that’s learn-vscode.com. And I recommend – If you find this podcast episode extremely useful, and you want to know all the nitty-gritties of how to do this, I recommend going over there and put in your email box. Caleb is his name. He’s the one that went through, and he ended up creating a seven-week course where it just emails you every week and tells you some cool things to add or change or modify to VSCode to make it a more simplistic code editor. And I followed a lot of those.

And so, we’re gonna talk through a couple of those today. But if you want to know how to set these all up, I recommend signing up for this. It looks like he has turned into writing a book with everything in it. And it’s just one of those things that it’s overwhelming at first, so I want to recommend you make one of these changes at a time. And then each week, maybe add a new thing. I wasn’t using the VSCode that often, so I made a bunch of these changes, and I’m like, “Oh, crap. How do I do this?” So, then I went through – I made notes on what I did, and I saved those in Simplenote. So, if I forget a keyboard shortcut, I can reference my Simplenote real quick and see – Oh, okay, that’s what I did, and that’s how I went ahead and changed that. So, let’s go ahead and dive in for a couple of these things.

The first thing that I did was I removed the activity bar. And the activity bar is the one that’s on the left-hand side. There’s about four icons there, I think, and it is the way to see the Explorer, the version control, the debugger, and the extensions and the settings – the general settings for VSCode. And so, I just went ahead and removed that. I’m just trying to make it a little bit more streamlined and a little bit more – That’s stuff that you don’t really need to see, and it takes up space. And so, you can – This one’s pretty simple. You can open it in the command palette, and that’s pressing Command+Shift+P or Ctrl+Shift+P. And then you can search and click activity or toggle activity bar, and that will just turn it right off.

Now, you may be saying, “Okay, Dustin, you’ve turned this off. Now, how do I get to this stuff?” Now, what I did was I created shortcut keys, and you have to do this by using the keyboard.json preference files. And, again, all of this will be in the – If you sign up for his email list, you can get the step-by-step instructions on how to do this. But basically what I did is I changed them so I can go Command+K+E will get me to the Explorer. Command+K+V, for version control, will get me to version control. Command+K+D. D is for debugger – will get me to the debugger. And Command+K+X will get me to extensions.

And so, those weren’t the keybindings that came with VSCode out of the box, so I had to add those and make those work. But the logic behind this is to get rid of the activity bar to clear up space ‘cause all space is valuable. And you need a place to focus. And so, if you see all that stuff in your peripheral vision, it’s gonna make it hard to focus on what you’re doing. Also, the keyboard shortcuts – A lot of the things that I did are optimizing to get rid of or to use and utilize keyboard shortcuts because you’re using a code editor. Everything you’re doing in a code editor revolves around the keyboard, so let’s go ahead and use the keyboard for a lot of things. So, that’s where I went with that.

The next email that Caleb sent was to get rid of the tabs bar. And I wasn’t sure about this one. This one was one – You have tabs across the top, and it shows you what files you have open and whatnot. And I was like, “Man, I don’t know if I can do this.” And so, I’m like, “Okay, I’m gonna go ahead and just dive in and just do this and see what happens.” And I ended up – I guess my thought process here was if you have tabs open and then all of a sudden, you have lots of tabs open, and then it’s hard to find things, and then you’re just trying to search for the tab that you need. And so, if I don’t display any tabs, then maybe it’ll make things more clean and more streamlined, I guess.

And when I’m developing and working on a WordPress theme or something, I always have 40 tabs open. So, let’s have no tabs, and let’s see how that works. And so, what I ended up doing is there’s an option in VSCode called – It’s Command+P. And the Command+P will do a fuzzy search for the files. And so, right now how I have my code set up is I’ve got two screens. Usually one is something I’m referencing, and the other one is where I’m actually writing code or vice versa. Or sometimes I’m adding some things, and then I need to have CSS open as well. So, I’ve got two windows open at the top. But I do Command+P, and then I start typing the file that I have. And then, one of the extensions that we talked about last week – the one that brings the sublime text features to VSCode – that’s called Sublime Text Keymap and Settings Importer – that one will allow you to say Command+P, and then if you hit Enter immediately, it will toggle you back to the previous file that you had open, which is really, really handy.

So, that worked out really, really well. So, I have that installed, and that just makes it super, super easy. So, now I have no tabs going across the top bar, which makes it really, really nice. And it seems way, way, way less distracting.

Okay, the next thing that we talked about – or the next thing Caleb talked about was getting rid of the File Explorer or cleaning up the File Explorer. And so, to clear up the clutter there, there’s a section at the top that’s got Open Editor, so that shows what files are open in different instances. You can go ahead and get rid of that. There’s an outline, a timeline, and an NPM Scripts. Now, maybe you have use for some of these, but I went ahead and got rid of all of them. You can just right-click on one of the headings and deselect them to make them go away. So, that was pretty simple to do that.

And then he also recommended to get rid of the icons. So, if you didn’t want to see the little icon for – Oh, this is an HTML file or a CSS file or JavaScript file. I like those, so I went ahead, and I kept those there. So, that adds a little bit of a distraction, but not too bad. And then the other one in that same section – and we talked about this last week – was the duplicate action plugin or extension. We added that one. And that allows you to set up and easily curate and duplicate files.

And then there’s some keyboard shortcuts that you can add to that section, as well. So, you can do Command+D when you’re on a file to duplicate it. You can do Command+Backspace to move it to trash. Or you can do Enter to rename it. So, those are some keybindings that you can add to your JSON file, as well. Let’s see what else we can do. That’s pretty much all we did there with the File Explorer – in the File, yeah, Explorer.

So, another one that we talked about – or the other one that I really enjoy – and I didn’t think I was going to enjoy it – was going in and getting rid of some of the other panels. So, like the sidebar. So, since you are using Command+P for everything, you’re not really relying on the sidebar as often. So, you don’t need to go in and try to find that file. If you know that you want to go to the functions.php file, you hit Command+P and start typing functions.php, and it automatically finds it. You don’t have to go over to your sidebar and scroll up and down and try to figure out where that is. His recommendation was to keep it hidden, unless you absolutely need it.

And so, there’s a keyboard shortcut that is Command+K, and then Command+B. You hold down Command, and then you hit K and then B, and that will toggle the sidebar. I also went ahead and moved the sidebar to the right side of the screen. And, at first, I was like – Why would I do that? But Caleb had a really great point in every time that you open the sidebar up, your code is gonna move from where it is over to the right. It’s gonna move to the right, as the sidebar opens and moves over to the right. And it causes a jarring experience. So, if you have it open to the right, and if you’re looking, maybe, on your left-hand side of the screen – You open it. It’s over on the right. It just slides over, and your code stays exactly the same place, instead of getting pushed over. So, you can do that with a simple line or a simple snippet in your settings.json file. So, that was the recommendation is to move it to the right.

And then the other recommendation was to make it ridiculously big. So, when you get attached to this clean workspace without all of these things going on, then it’ll feel good, and you’ll want to get rid of any other distractions. So, his recommendation was to make it huge. So, I made it – I mean, huge. You can drag and drop it how wide you want it. So then, once you’re done with it, you want to put it away and get it out of there ‘cause it’s taking up so much real estate. And I thought that was a neat tip. But I did it, and I seem to have it put away most of the time.

The next thing in his message was to hide the status bar. So, I went ahead and changed that. It’s thin. It’s obnoxiously blue at the beginning, unless your theme has changed the colors. But there’s not a lot of time – or the only thing that I really ever used in there was changing the language mode on a file. But you can also do this with Command+Shift+P and change a language mode. So, you can do that right with a keyboard shortcut. So, you don’t even need it. And this is another line that you can add to the settings.json file.

And then the mini-map. This was one that it’s a no-brainer. It’s useless. You can probably count on the number of times that you’ve actually used it. It’s a novelty. It’s a fun thing. It just clutters things up. So, go ahead and remove that, as well. That’s a line to the settings.json file, as well.

So, you’ve gone from something that’s noisy with changing a few things. You got rid of the sidebar. You’ve hidden the sidebar. You’ve gotten rid of the bottom bar. You’ve gotten rid of the mini-map. And you’ve got rid of the extensions bar over there on the very, very left side. And it just makes things look so much cleaner and so much more succinct, I guess. And it just makes you feel like – Wow! I feel like once you have a lot of those things missing, then you can make your code a little bit bigger.

I have a huge, 34” monitor, and it just – I make the text bigger that I normally would, just because – so it fills up the screen a little bit more, and I can really get immersed into what I’m doing. And I really enjoy that. And it just feels like a much better experience. And I think what was also very helpful is last week when I was out of town, I was only with my 16” MacBook, and I didn’t have a lot of real estate, but yet I was still working on a few web projects. And to have that – to get rid of all that stuff. I didn’t have the sidebar – or the sidebar was closed. I didn’t have all these other distractions. I was still able to run side-by-side code view, so I could have two panels. And it worked out really, really well.

And so, if you’re interested in checking out and working through some of these things, I highly, highly, highly recommend signing up for the email newsletter at learn-vscode.com. And I’m excited he’s putting together a product, and that could be something that will be very beneficial in the near future to really optimize and figure out how the best way is to set up this code editor.

It’s super powerful. I don’t have any limitations. Everything that I want to do, I’m able to do. The only tricky part is once you do some of these things, it takes a while to memorize and remember what these keyboard shortcuts are. So, note somewhere where you can find them easily. Especially, the hardest part is trying to figure out how to get to the extensions toolbar – Command+K+X. Okay, that’s the way to get to it. And get back to the Explorer view, and that is Command+K+E. So, some of those are really hard to get to, and it just is kinda a pain to remember those, but once you have them, then you’ll never go back. I’m never gonna go back to the tabs bar ‘cause it’s just so much cleaner without a ton of tabs running across the page.

So, that’s how I’ve optimized and customized VSCode, and I hope this was helpful to you. And if you’re not using VSCode, it’s free. I recommend checking it out and spending some time configuring it. Until next week, take care, and we’ll talk to you again soon. Bye-bye.