Editor Display Preferences1:35
So whenever I need that, I just hover over the file and then I see the full path. Next up, I have the minimap disabled. This looks cool, but I find that I don't use it. So I just turn it off. Next up, some font related choices. I'm using Fira Code and I have ligatures on. Next up is the multi-cursor modifier. So I use Command if I want multiple cursors and I'm using my mouse. So this is from Sublime Text and I just hit or hold Command and click somewhere else and I have multiple cursors.
It's a bit too thin in my opinion. And for example, you can set it to be really big, but I like it at three. Tab size, two by default, but this usually gets overwritten by plugins like Prettier or EditorConfig. Next up, format on paste. Usually this works pretty well. When I paste in a block of code, say a block of HTML, then it usually does a pretty good job at formatting. So I'll leave this on. Word wrap, pretty self-explanatory.
Prettier Formatting Settings3:38
adds that. So I have that on. So trim final new lines. Make sure there's no white space at the end. Trim white space at the end of any lines. So if I save this, it should trim it. So these are some prettier specific settings. So just use the prettier extension and format on save and some more prettier settings here. Make sure you have a config in order for prettier to run and make sure to ignore editorconfig. Next is another plugin, so NamespaceResolver, which automatically imports PHP classes.
Make sure you have a config in order for prettier to run and make sure to ignore editorconfig. Next is another plugin, so Namespace Resolver, which automatically imports PHP classes. And again, we'll go over this when I look at my extensions. But I wanted to sort alphabetically, which is the default style in Laravel. So this just turns off the suggestions in VS Code and makes use of the PHP IntelliFence package, which I installed as well. This just uses this style fixer, which again, we'll take a look at when I look at my extensions and more settings for that. And this is automatically added by the extension. This is settings for the Tailwind CSS plugin, which we'll take a look at when we get there.
Running PHPUnit Tests5:14
Next, better phpunit, great way to run your tests from within your editor. You also need key bindings for this. So I have it bound. If you go to keyboard shortcuts, and again, I'll open my JSON settings, I have it bound to as well as four shortcut keys that I use. And this is the common one where you're within a function and you want to run that test. So I have it bound to command F1 and command F2 for running the whole file and so on. Run the previous test and run the entire suite. And this control escape is what toggles the built-in terminal in VS Code because better phpunit actually makes use of it and I have to hide and show it quickly.
Reviewing Key Extensions6:44
Okay, next we have the theme, which I already took a look at. Duplicate action. I don't know why this is not default in VS Code, but if you need to duplicate a file, this plugin adds this here. Next is editorconfig. So most projects these days have an .editorconfig file, which enforces certain style rules. So this plugin allows you to respect those rules. env adds formatting to .env files. So there's a bit of color and I'm not sure why it's not opening my .env file, but I guess the env example should also be colored and it is.
So there's a bit of color and I'm not sure why it's not opening my .env file, but I guess the .env example should also be colored and it is. Next git history adds a bunch of git functionality and I don't use this too often. But for example, if I need to look at the git history of a certain file, I can do it from within here. ImportCost displays the size of an imported package. So let's take a look at a Vue project here. And if you're going to main.js, you'll see that this plugin is 26.6 kilobytes. Next up, what do I have here? Laravel Blade snippets.
Next up, what do I have here? Laravel Blade snippets. So this adds syntax highlighting and also Blade snippets. So let's take a look at this blade file, a bunch of handy snippets, which I use all the time. For example, foreach, uh, if, for else, be if, so yeah, super handy. And the syntax highlighting is essential, of course. Next up, line jumper. So this also has some keyboard shortcuts that you have to configure. So I have it bound to alt down and alt up.
Next, material icon theme we took a look at already. Path IntelliSense just tries to look at your file system and autocomplete for you whenever you're typing in a file name in your editor. php constructor, whenever you need to add a constructor with a property, then this is sort of like a snippet. So let's open a controller here. If I wanted to add a constructor here, I would just go here, command shift P, or you can set it to a keyboard shortcut, constructor property, and it does it for you and you can just type whatever. Not sure why it doesn't indent it.
just type whatever. Not sure why it doesn't indent it. So I guess you have to do that manually. Okay. What else? php-cs-fixer. So it formats your PHP based on a set of rules. And by default, it follows PSR-2, which is great because that's what Laravel uses. And there's a bunch of settings here too. So let's go back to my settings file.
And there's a bunch of settings here too. So let's go back to my settings file. And I want it to format on save. I don't want to see the output. I don't want it to fix when I type in a bracket and I want to follow PSR-2 rules. And these are automatically added by the extension. Next up, PHP IntelliFence makes PHP in VS Code much smarter. So it adds autocomplete, some red squigglies if you have some errors, and a bunch of other stuff that's super useful. So definitely install this if you're using PHP, PHP namespace resolver, again, super.
stuff that's super useful. So definitely install this if you're using php, PHP namespace resolver, again, super handy. If you need to import a class, just go ahead and bind. So the one I use is import class. So again, let's open up my keyboard shortcuts. And it's this one right here. Shift F1 is my keyboard shortcut. So if you need to quickly import a class, you can do that. So for example, if I don't have request, and I use it here, then you can go ahead and hit
Okay. What's next? Let me just remove this. Pull a code allows you to take screenshots of your code. If you're into that sort of thing and sharing it on Twitter. Next up is prettier, which is a code formatter, and automatically fixes your code. So yeah, super popular, especially within the JavaScript community. And I believe you saw some of my settings here already for prettier for, I believe, view and JavaScript. So I'm just telling it to use this extension and format on save is set to true.
view and JavaScript. So I'm just telling it to use this extension and format on save is set to true. What else? Quick and simple text selection. So what is this? Oh, yeah. So this is specifically for one keyboard shortcut that I use all the time. And I believe it's in sublime. And I had to install this extension to make it work here in VS Code. So let's go to my app.blade.php.
Selection Shortcut Workflows12:29
And I had to install this extension to make it work here in VS Code. So let's go to my app.blade.php. And all I wanted to do is select the text within the quotes, and it works for single quotes and double quotes. So if I want to select everything here, my shortcut is command shift space, and it will select everything. So super useful for things like Tailwind CSS, when I want to select everything within the quotes. So again, if I look here, you'll see some configuration. And the one I use is, I guess you can see it in my keyboard shortcuts.
So again, if I look here, you'll see some configuration. And the one I use is, I guess you can see it in my keyboard shortcuts. Right here, shift command space, select either quote. So it works for single quotes and double quotes. And if you press it twice, then it highlights the quotes as well. And I guess now that I'm here, I also have this shortcut, which I use just as often as this one. And it's shift command A, it's built into Emmet. And all I use it for is to select stuff within HTML tags. So again, let's go back to app.blade.php.
And all I use it for is to select stuff within HTML tags. So again, let's go back to app.blade.php. And for example, if I want to select everything here, command shift A, and you can keep pressing it to expand the selection. Again, super useful in HTML. Next up Sublime Text key map. So it imports all the default key bindings in Sublime into VS Code. So again, super useful if you're coming from Sublime Text like I was. Next up SVG viewer. Sometimes you just want to see the actual image instead of the code behind the SVG.
Okay, what's next? VScode. If you're working with Vue. VScode actually recommends this tool when you first open a .vue file. And the last one I have here is VScode faker, which is super useful as well for dummy data. So you can generate fake data. And what I use it a lot for is generating avatars. So say for example, I'm using Tailwind to build a design and I want some dummy data in there. So for example, if I had a bunch of image tags, say I had three or four, we can do faker
in there. So for example, if I had a bunch of image tags, say I had three or four, we can do faker image, avatar, and that will generate a real image here. So if I actually go to this, I can hit option and open that. That's a real image. And I'm not sure why it's not showing the image. So yeah, I guess that's not working now. It used to work. Let's try a different image.
Custom Snippets Overview15:48
And you can also do it on multiple cursors. So if I were to do that and do the same thing, it should generate a different image for each line. And it does. Cool. And the last thing I want to go through is my snippets. I don't have too many. So if I go to snippets, I have a few for php. And you can see them here. MET for a method signature, which I use all the time.
And you can see them here. met for a method signature, which I use all the time. And test for a test signature. And some stuff for routes as well. Route::get and Route::call. So let's take a look at those in a PHP file. So let's go here. Save my LoginController. If I need a new method. met tab.
If I need a new method, MET tab. And if I need params, I can go in there, add a param. If not, just delete it. Hit tab and I'm within the code. I can do something similar for a test. If I'm within a test file, it adds the annotation and I can name it whatever. Now the other ones are for routes, and I haven't updated yet for the new route syntax in Laravel 8. But if I go to my routes file, I have one for generating, let's go down here, a callback.
But if I go to my routes file, I have one for generating, let's go down here, a callback. So route call. And you can just add whatever you need here, URL, some params. And then the code. And I have one for controllers as well. But this is the older syntax, route get, you change it to post if you want, and so on and so forth. What else snippets do I have in here? I have a few for Blade, but that plugin handles most of them.
What else snippets do I have in here? I have a few for Blade, but that plugin handles most of them. I have a few for just a success message, which shows the session variable and one that shows the validation error messages. And I also have global snippets, and they're mostly for JavaScript. Because you can write JavaScript anywhere, not just JS files. You can write it in .vue files, .jsx files, and even in blade files as well. So I have it as a global snippet here. And CL for console.log, so I can debug properly. I use this pretty often for HTML comments.
And console for console log, so I can debug properly. I use this pretty often for HTML comments. So HCO for that. And this is older, I don't use this anymore. Not too much anymore, because I don't write too much vanilla JavaScript. So yeah, let's quickly take a look at those. So let's go into a Blade file. Again, you can write JavaScript in here. So I just made it a global function. For example, if I were to just put a script right here, I can do console log.
