25 VS Code Productivity Tips and Speed Hacks

visual studio code is like a knife it's only as good as the hands that wield it but unfortunately it has more knobs than a fighter jet and requires the steady hand of a surgeon to the untrained eye vs code is just a simple text editor like microsoft word with code highlighting but in reality it contains a ton of productivity boosting features that you're probably not using yet in today's video we'll compare amateur vs code techniques to the ones used by professionals allowing you to write and analyze your code faster because the most valuable thing you own in this world is your time if you're new here like and subscribe then leave your best vs code pro tip in the comments i'll choose one of them to win this free t-shirt next week and now let's jump right into things by installing vs code once installed you'll want to open up a directory with some files in it maybe you just generated a new astro project from the command line then to open it in your editor you pull up the file explorer and click open with vs code that works but it would have been much quicker had you done it from the command line if you're in the terminal and want to open a directory or edit a file you can do that quickly with the vs code cli using the code command but keep in mind if you're on mac or linux you need to first add the binary to your path now that we have the editor opened it's tempting to go around two different windows with the mouse and click on buttons to run commands just like we would with any other software but here's a little productivity secret the less you rely on the mouse the better vs code allows you to use the mouse for everything making the tool approachable but that's really the most efficient way to get things done you don't have to go crazy and learn something like vim or emax but it's important to understand that anything you do with your mouse can likely be done quicker with the keyboard virtually every command you see in the vs code window can be done with a keyboard shortcut you don't need to memorize them all but knowing about 10 to 20 will literally change your life letting go of the mouse may not feel natural at first but mastering the keyboard is a lot like learning to play an instrument it takes a lot of practice but eventually it becomes second nature the first shortcut you'll want to memorize is control papa which brings up the command palette the beauty of the command palette is that it gives you all the power of vs code from the keyboard without having to memorize a bunch of key bindings by default it will give you a list of recently opened files in addition you can start typing a file name to find it in your project and that's obviously much quicker than trying to find a file by clicking through a bunch of directories in the file explorer but the command palette can do a lot more if you type a right angle bracket it will give you access to virtually any command that you can run in vs code along with the commands for the extensions that you use for example you may want to toggle the minimap or one thing that you'll notice in some of my videos is that i execute javascript directly in the file itself and that's made possible by an extension called quoca which is a tool that i can start and stop in any file via the command palette the extension itself is really cool it automatically runs your javascript code in the background then appends the output directly in your editor which can facilitate rapid prototyping when your goal is to just write some plain javascript code now another really awesome thing we can do here is find pieces of code or symbols throughout our project when working in a really big file it's easy to get lost the worst thing you can do is scroll around the page looking for the function or interface that you need you could do control foxtrot to find that text on the page but an even better approach is to use the at symbol from the command palette that'll list out every symbol in the code so you can quickly navigate to it and if you want you can bypass the command palette altogether by entering ctrl shift period to do the same thing directly in the file itself now in other cases you may want to find a symbol throughout the entire project including all of your dependencies like node modules use a hashtag followed by the name of the symbol you're looking for to find that interface in your own code or your dependencies code another really awesome bonus tip here is that if you have a really long class name you don't even have to type the whole thing out just the first character in each camel cased word and it will work just as well the command palette is awesome but it doesn't really help you write your code faster when you see a line of code that you want to edit the natural approach is to take the mouse and then highlight that line a developer might do this hundreds if not thousands of times per day a faster way to get to where you need to go is to hit control golf followed by the line number that you want to focus on from there use the arrow keys to go character by character and hold down the shift key if you want to highlight something or use ctrl arrow to move word by word when your cursor lands on a word that you want to edit hit ctrl delta to highlight it so you can then delete it or replace it but here's where things get really mind blowing if those characters appear multiple times in the code and you want to edit them all at the same time just hit ctrl d again and again and you're now a 3x developer editing three lines of code at the same time in some cases you may want to use the mouse for multi-line editing holding down alt while you click on different parts of the editor will set up cursors in multiple places that can be really useful for writing repetitive css properties one place you might use this often is with opening and closing html tags but you can actually make your life even easier by installing the auto rename tag extension this will automatically rename the closing tag when you edit the opening tag and it can work in other languages beyond just html now in other cases you may just want to delete or move a line the amateur approach is to highlight that line do a right click with the mouse and find cut then do another right click with the mouse and find paste here's the faster approach if your cursor is already on a line all you have to do is hit ctrl x to cut it no highlighting is necessary but if your goal is to move the line somewhere else then there's an even better approach use alt followed by the up or down arrows to move the line somewhere else quickly and if you want to copy that line as you move it use alt shift followed by the arrows now one other thing that you likely often do in your code is comment it out to disable it the worst possible thing you can do is go line by line adding the comment syntax to each line if this is how you currently do comments you'll want to pay attention to this next shortcut first highlight the code using your mouse or by using the control l command to highlight line by line once highlighted use ctrl forward slash to toggle comments on that code now when speaking of code comments it's often important to format them properly in javascript that typically means following the js docs standard and there's an extension called add js.com once installed it allows us to highlight a function then use the command palette to add a comment to it automatically bonus tip in your js dot comments you can use the link tag to link to other symbols in your source code when you hover over that symbol it will give you the comment that if you click the link it will take you to that part of the code automatically that makes writing comments much easier but what if we could also make them easier to read by also installing the better comment extension we'll get automatic highlighting in our comment text any line that starts with a bang is now red and all of our to-do's are highlighted orange but now let's switch gears into a very important topic the terminal you can open a new terminal session directly in vs code in your current working directory using control backtick when you start a new terminal it uses your default shell which in my case is bash if you click the caret you can use a different shell if needed like powershell or wsl what often happens though is you need multiple terminal sessions running at the same time like one for your test runner one for your dev server and so on to keep things organized click on the icon then change the name or the color of that session and now you don't have to fumble between different terminals to figure out what each one is doing now when you type out an actual command in the terminal and you screw it up you can use ctrl arrows to quickly navigate to a different part of the actual text because your mouse won't even work here but if you already hit enter and got an error message you can use ctrl k to clear out the terminal then use the up arrow to go to the last command in your history and just rerun it instantly but what if there is a way where you didn't have to write the same terminal command over and over again like how many times have you written npm run build or npm run test to simplify things you can create a vs code task which is just a json configuration that contains a command that you want to run in the terminal now instead of pulling up the terminal and writing out a command you can just use the command palette to run it automatically and it will show the name of that task in the terminal sidebar here speaking of the terminal one of the most common things you'll do here is execute commands for version control using get not only are git commands hard to remember but it can be very dangerous and painful when you mess them up the standard procedure for get ups is to go to stack overflow and look at the top questions there because they're almost all related to get the funny thing though is that i think this is an area where it actually makes more sense to use your mouse as opposed to the keyboard in the source control tab in vs code we get a breakdown of all the changes in our current working directory we can just point and click at files that we want to stage and also notice the icon next to each file which will tell us if that file has been modified added or removed now from the drop down menu we get a list of all the possible git commands most often we're just committing files but vs code will give us a breakdown of all the possible commands without having to look them up in the documentation if you're working on a big complex project with other developers i'd highly recommend installing the git lens extension it provides a bunch of extra ways to visualize and explore your code and most importantly it will tell you exactly who to blame when your code stops working it's a really great extension but now we're going to look at another extension that's brand new and even crazier normally when you want to work with a git repo on github you need to clone it to your local system but now thanks to the monopoly that microsoft has on the developer ecosystem this process can now be streamlined with remote repositories install the extension then click on this icon in the bottom left corner to open up a remote repository it'll have you log in with your github account then you can start contributing to any repo on github without needing to worry about complex git commands you can create a new branch edit some code and then submit a pull request without ever having to leave bs code in addition to remote repositories you should also know about remote ssh to connect to a remote server and also remote containers to use a docker container as your development environment instead of your local system these extensions are managed by microsoft and can turn your basic text editor into a full-blown integrated development environment but let's get back to our actual code in many projects you may find yourself writing the same boilerplate code over and over again if you find yourself doing that an easy way to improve your productivity is to create a custom snippet from the command palette run the configure user snippets command you can create global snippets to use across all of your projects or scope them to an individual workspace basically you just modify this json file with the code that you want to insert then when you go back to your main project you can use the insert snippet command to quickly add your own custom boilerplate but if you work with a popular framework there's a good chance that somebody already did this work for you before you go building your own check out the extensions panel to see if there are any pre-built snippets out there that already meet your needs oh and here's a cool random thing if you need to create a new file in the file explorer but it lives in a directory that doesn't exist yet you can create that file along with any nested directories on top of it automatically by just putting a slash in front of the file name and vs code will automatically create those directories now yet another awesome tool that i want to mention is the pace json as code extension if you work with typescript one extremely tedious thing you might have to do is take a json object and convert it to a bunch of types to represent some kind of schema this extension will take your json and automatically infer types using a tool called quick type and in some cases that can save you hours of work but the final thing i want to leave you with is a quote you've probably heard before there are only two hard things in computer science cash invalidation and naming things naming your code is hard which means that you'll often be renaming things when you name something poorly your first idea might be to do a find and replace across your whole project but that can be kind of dangerous a better idea is to find the thing you want to rename then if you right click it you can find all of its references or implementations then from there you can use the rename symbol option to safely rename it across all of your files i'm going to go ahead and wrap things up there but make sure to share your own vsco pro tips in the comments and if you want to support my work consider sponsoring me on github or becoming a pro member at fireship io thanks for watching and i will see you in the next one

Channel: Fireship

Views: 1,469,328

Keywords: webdev, app development, lesson, tutorial, vscode, visual studio code, typescript, js, learn to code, 100 days of code, programming, productivity

Id: ifTF3ags0XI

Length: 11min 35sec (695 seconds)

Published: Mon Jun 14 2021