On today’s episode we are going to talk about how to customize VS Code, which is my code editor with some extensions right here on Your Website Engineer podcast, episode No. 491.

Hello, and welcome to Your Website Engineer podcast. My name is Dustin Hartzler. I’m excited to be with you here today and sharing some tips and some tools and some tricks, all of those things that I like to do to make my – my code editor a little bit, let’s say, more optimized and – and allow it to work for me a little bit better and a little bit faster with not as much work for me. We’ll talk about that in just a few minutes.

I do have some announcements to share with you, and a plug-in. All right, the first announcement today is all about WordPress, a 5.4.2 security and maintenance release. There were 23 fixes and enhancements, plus it adds a couple of security fixes. And there’s a link in the show notes to get to the news article there on W – or wordpress.org. And you can read all about it there. But basically the – the general consensus is up – make sure that you take some time this week to update to the latest version. Most hosts now are updating these point releases, these security and maintenance releases automatically, and so if that’s the case your site has probably already updated to WordPress 5.4.2.

All right, the next thing that I want to talk about today is about an article that I found on WP Tavern. The next one – or a couple of articles from WP Tavern. But there is now a – a way to build forms with the block editor, with Gutenberg Forms. And so, if you were interested in – it’s a – it’s just another plug-in, Gutenberg Forms. It’s designed exclusively for building forms within the block editor. And it’s version 1.4. It’s got lots of things that are in it. It’s – it’s really kind of – it’s exciting because they – it’s – it’s an early – it’s still the early stage of the plug-in. But it’s got a lot of cool things and features that are built in that make it easy to create a form without, you know, without necessarily needing an extra plug-in, which will be that case in a little bit in those few revisions. Basically, they’re going to work on this to make sure that it’s working properly and then they’ll roll it into the main block editor.

So, it started in February of this year, so it’s plug-in from February, and so, you know, just in a couple of months they’ve been able to get it going and allow you to have different forms, and you can save multiple forms, and you can have all kinds of fields. These are – the fields that are built in are calculation, check box, date picker, email, file, form button, message, name, number, phone radio button, select text, website, or yes and no.

So, if you’re looking for a simple way to add a form to your WordPress site, then I recommend checking out Gutenberg Forms, that’s – all the alternatives are out there, Gravity Forms and Ninja Forms and all of the other ones that are out there, Contact Form 7, those are there, but this one actually looks really cool and I think it will – it will allow you to add that write-in line. Like, Gravity Forms and Ninja Forms they make you create the forms elsewhere and then you can pop them into the post of a page, whereas this you can build right on the page, which I really, really like. So that is the block editor with Gutenberg or Gutenberg Forms.

There’s – theres’s an event coming up, it is – the tickets are free, it’s on June, 23rd and 24th, so it’s next week and it is OpenJS World 2020. It was forces to go virtual and it was supposed to be slated to be in Austin, Texas, but basically, they are going to talk through a bunch of different projects, through the OpenJS Foundation, so that includes Node.js webpack, jakeware and mocha, ESLand to low dash, grunt, and other popular products.

The – the – before the event was going to go virtual it was a paid event, so an early bird price started at 350 and went up to 899, and then travel expenses and all that, but now the event has moved fully online and tickets are free for those who want to attend. So, there’s a link in the show notes where you can go and you can register if you’re interested.

I’ll be on vacation next week, but this looks like a really neat event. Especially as I’m trying to dip and dive into a little bit more of the code aspect. I’d love to pick up some things there, so I will click on the link and register and maybe I’ll have a chance while the kids are napping while we’re at the beach, and to pick up a little bit of JavaScript while I’m gone

And then the last announcement today is that WordPress bumps the minimum PHP recommendation to 7.2. And so, this is another article on WP Tavern. And it looks like they’re only seeing roughly 25 percent of running a WordPress version that would get an upgrade notice, so 75 percent of people are already using 7.2 and higher, and so this is just trying to bring – make sure the WordPress is running on the latest, or more recent technology, like 7.1 was even released several years ago, and so to get those – the – the performance improvements and some of the new features in WordPress you need to make sure that you are running the latest version.

It's really simple to update on most hosting cPanels, you can go in and you can just – in the cPanel look for php version and then it’s usually a drop down box, so if you’re on 5.6 you definitely want to go and update there, but you can update to 7.2 or 7.3. And that’s – that’s the news when it comes to WordPress this week.

All right. Moving on into the, is there a plug-in for that section. This one is one that I know that I’ve talked about before in the past, but it has saved my bacon that last couple of weeks while I’ve been redeveloping a website for my wife. You hear me talking about these projects and I’ve got a couple quote/unquote side projects, but they’re all for her. She’s running a couple different businesses and we’re looking at revamping her original site, that’s the blog site that she has. And we’re working on relaunching it because she is going to start doing some telehealth for pharmacists, or pharmacists are going to start doing telehealth doctor’s appointments or pharmacist appointments for those who are looking for functional medicine, so that’s kind of a – a nutshell of what we’re doing, and that’s over at farm2table.life. And we’re working on – and we’re – I mean I’m working on creating a new theme for her and getting that all set up within the next couple of days.
And there’s a plug-in that’s called, What The File, and it is one that adds in a toolbar. It’s an option up in your admin toolbar that tells you what file and template parts are being used on the page that you’re currently viewing. So, if you are looking at – oh, you know, you stumble upon a page, and you’re like, I want to change that in the template, and you’re, like, I don't know which template that’s coming from you can use What The File and you can go up to the admin bar, it’s right up next to where it says, Howdy, and then your username. You go there and you click on What The File, and it pulls down a dropdown list and – oh, you’re – right now you’re looking at the index.php. or you’re looking at page-home.php, or whatever the case may be. And it’s really – really helpful when you’re trying to modify those specific pages.

It just – it saves you a ton of time trying to figure out what somebody else might have done, or someone else might have configured a theme. So that is What The File. And you can find it in the WordPress Repository searching for that name, or you can find a link in the show notes for episode No. 491.

All right. Today I was going to talk about some of the customizations that I made within VS Code because I’ve been using the VS Code an awful lot lately, but then as I started digging in I realized I have a ton of extensions, and I can talk about the extensions first and then maybe next week we’ll talk about the – some of the different customizations that I have done to really make the text editor work well for me. And this all came from an email newsletter that I signed up for, and I’ll pop a link in the show notes for where you can sign up for this. But it had five or six auto-emails every week it had a few new tips and some of them were super – super helpful, but I’ll talk about that in the next show.

But today I want to talk about some of the extensions that I use with VS Code. And I guess, I should preface the story by, I’ve always been a – a – always isn’t the right word, but for the last – I don't know, a half dozen years or so I’ve been using Sublime Text as my code editor. I really liked Sublime Text, mainly because it was a very lightweight, very – very fast editor. So, if you opened up a – a gigantic text file you could start searching and finding the details of what you’re looking for very – very quickly. Tons of people were using Sublime Text and I just – you know, I started following tutorials and figuring out the fastest way to do different things and then all of a sudden VS Code came into play.

And at first, I was kind of hesitant to use VS Code. It is a Microsoft product, and I wasn’t thrilled about putting a Microsoft product on my Mac and I’m just not a big fan of Windows in general, but once I started seeing the power and the some of the customizations that you could do with VS Code I was all in, and I started using it probably – I don't know, I probably really got into it earlier this year, year in 2020. And I’ve listened to some different podcasts about VS Code. And I’ve – and I’ve read some blog posts about these different extensions, and these are the ones that I am currently using.

Now, granted I’m not doing a lot of JavaScript development yet, as you know I’m on a journey to try to learn more and more, but right now I am in a – I’m learning about, and trying to figure out how to be the best WordPress developer that I can. And so these are the tools that I find very helpful to develop WordPress themes, and WordPress plug-ins and so there’s probably a lot other ones that are really good when it comes to setting up an environment for JavaScript, or an environment for any of those other languages that are out there that you may be interested in learning.

So here are the extensions that I am currently using in VS Code. And there’s a link in the show notes, or in the show notes I’ll have the name of them are all written out, so basically what you can do is you can go to the extensions bar, you can open up the extensions bar and then type them in exactly as I have them in the show notes, and that will find the extension and you can – you can install them automatically from there. So, the first is Auto Close Tag, and this is super helpful. Like, I don't know – I found this one maybe for Sublime Text and I’m like, I need something like this for VS Code. And what this is, is if you’re manually typing html, maybe you’re creating a list item, maybe you’re doing some div tags or – or maybe a – a RAF or something along those lines for a link. This will auto close the tag.

So if you’re doing a div you say – you know, you start typing the div, you have the – the less than symbol, then div, and then you put the greater that symbol and then you type whatever you want and then you put the less than symbol and then the slash and it will automatically close the div for you. It saves a ton of time. If you put an h1 tag, you know, you start typing the h1 tag and then you have – you know, you just start to complete it and it will autocomplete for you. It is a wonderful – it’s really – really cool, and I really like that one. And that probably saves you the most amount of time because then you’re – it’s a lot less typing that you have to do.

The next one on my list is Beautify. I guess, these are all in alphabetical order, so we’ll – we’ll work that way. Beautify is that one. And it is a – it just basically says it’s beautify code in a place for VS Code. And so, what that does is – especially if I’m saving, like a css files, or something and they’re not properly formatting. Maybe I have two or three things on – two or three properties on the same line. When I go to save Beautify is going to line those all up. They’re going to put them on individual lines. It’s going to make sure the brackets work in the right place. It just makes your code look really – really nice. So, I like that – it’s called Beautify.

There’s Better Comments. This one, I guess, I haven’t used a whole lot yet, but I can see where the value is, and I’m going to start – start using that so that I can really see where I need to make some improvements to my code. But this is called Better Comments, and it can improve your code by commenting or annotating with an alert, informational to do and more. And so how this one works is there’s a – there’s a certain thing, if you put an exclamation point in, that’s going to say that it is an alert. And so that you could – it’s going to be very easy. It’s going to change it to a different color. Your comment will be a different color.

And so, as you’re scrolling down, you’re, like, oh, this is something I need to fix, or you could put notes or information or anything like that, just to make your comments – it basically color codes your comments, so you can see what’s going on. And it makes a lot of sense and can make your code, as you’re searching through it, a lot easier to find the comments and to – you know, maybe if you’ve got comments in there to – I need to change this, or I’d like to re-write this, that’s a perfect thing that you can do.

And then other ones that’s really – really handy and just an amazing plug-in is called The Bracket Pair Colorizer and it’s exactly what it sounds like. It colorizers brackets and parentheses, and so, if are – if you’ve got a function that’s got a bunch of parentheses or a lot of brackets the first set if going to be a certain color, then the next set will be a color. So, looking here at some code here from my custom post types and a website, like the first set of parentheses are yellow, the first set of brackets are yellow, and then the next set of parentheses are – or purple, then the next ones are blue, and they just match up. So, if you’re looking at some code that’s got some nested sets of brackets then you can make sure that all the colors line up, and it’s really – really handy.

I’m using the cobalt theme so that’s kind of considered an extension, but this is one by Wes Bos. I did make one color modification and his is a – it’s – it’s a blue color, and then it’s got a lot of bright colors, which I really like, so the blue is not quite – I mean, it’s not dark mode, if you will, but it’s dark enough that I really like it, then I make all the rest of the colors pop out. And I basically choose and turned his yellow – Wes Bos has a yellow in all his themes, and I turned that to orange because – well, if you’ve been following me for any length of time you know that orange is my jam I love doing and playing orange – using orange whenever I can. So that is the Cobalt2 official theme.

I have Code Spellchecker in there. So, this is a spellchecker for source code. This actually works pretty well. You know how sometimes you create functions and they’ve got underlines in, or camel case and different things. Well, this will actually look at the text that’s not a function and try to make sure that you have spelled things right. So, if you are just creating a theme, or creating some sort of function that’s got some actual text in it, it will go and it will make sure that you spell it correctly. So, that’s – that’s very – very handy.

I’ve got Duplicate Action, and this will allow you to duplicate files in the VS Code. So, if you look at your – your sidebar you can right click on the sidebar and then you can create duplicate. So, if you – it’s very handy if you want to create a custom page template or something and you’ve got page.php and you want to create a new one and call it page-home.php, you can do that very – very easily with – with the plug-in duplicate action.

I’ve got ESLint in here. This is one that I’m not using a whole lot, but it – it integrates ESLint into JavaScript into VS Code. I’m sure that I saw that from Wes Bos, or somebody that writes a lot of JavaScript. I’m like, well, I’ll need that eventually, so I went ahead and just added that.

I’ve got git-history. This one’s really cool because I store all of my changes in git. I do a lot of version control. And this allows me – there’s a little button up at the top that I can click on the – the git button and I can see all the previous revisions. So, I can see exactly what’s going on and I can see what the previous version was saved or if I need to restore something from a previous version, I can do that all within a VS Code.

I’ve got Markdown All in One. This is the way to write markdown. You can do keyboard shortcuts, of table of contents. You can preview and more. So, if I wanted to use just VS Code as a text editor, write some markdown, I can get a nice preview with Markdown All in One.

I’ve got a couple more here on my list. Open in Browser, this allows you to open the current file in your default browser or application. So, this is handy if you’ve got a file open and you wanted to view it quickly into your browser you can use that.

I’ve got Open Workplace Settings. This is one that I just installed last week. It was from someone at work and they basically – it gives you the ability to customize different workplaces. So, if you are running maybe two, three, four different themes or if you’ve got different workplaces, so I’ve got yourwebsiteengineer.com, I’ve got the functional medical stuff for my life, and I’ve got her farm2table stuff, but if I wanted to – if I’ve got multiple code instances open of VS Code, if I’ve got different things open I could get a different header or different footer color. So, I can see it real quickly and real easily what’s going on and which – which page I should opening, or which code editor I should be looking at. It saves just a fraction of a bit of time, but that one’s really – really cool.

And then the last one I’m going to list here is Sublime Text Keymap and Settings Importer, and this basically brings some of the most popular features of Sublime Text and it brings them to VS Code. And so, then that way you don’t have to worry about redoing and relearning keyboard shortcuts. It just brings a bunch of those over to – into VS Code.

So, that’s what I’m using, and those are all the extensions. In the next episode I’ll talk a little bit more about how I customize VS Code to make it work a little bit easier, and faster, and some of the things I’ve really liked about it. And so, until then take care and we’ll talk again soon. Bye-bye.