Video Link: https://www.youtube.com/watch?v=lpc36-GMs-Y
According to the 2019 Stack Overflow survey, Visual Studio Code grew from being a nonexistent code editor to the single most used code editor by developers around the world! I personally like it because it is minimal yet so customizable. It is also free and open-source, too good to be true? Let us dive in!
I really enjoy working with it and that is why I will share the top ten PRO tips when using VS Code.
If you are new here, click subscribe for more content like this!
Tip number 10: (Navigation)
Tip number 10 is Navigation. You should know how to navigate the file system quickly. You can open VS Code from anywhere on your system by running the command: code followed by the file or folder path that you want to open.
The quickest way to move around is to use hot keys, you can click CTRL + k then CTRL + s, that will open a window that shows you all key bindings you can use!
The most important key binding to memorize is CTRL + p, which brings the command palette. We will use the command palette a lot in this video so do not forget this one. To navigate through files, you can start by typing a file name and it will automatically search through the tree to find the file you want. It is way faster than clicking multiple times for finding a file.
Tip number 9: (Snippets)
Tip number 9 is using Snippets. As you can see, I am in a Flutter project. So, I am going to install some snippets to help me generate boilerplate code and enhance my workflow speed. The one I recommend is:
Let’s say you want to create a stateful widget, you could just type in stf and press enter, and the magic happens, just type your stateful widget’s name and you’re done.
There is another extension created by me that will help you create things faster if you use Stacked architecture by FilledStacks. I will link his channel down below in the description so you can check him out. The extension is called Stacked obviously. It helps you generate boilerplate code for a project using the Stacked architecture easily from the command palette by typing: > Stacked: New Stacked Skeleton
Tip number 8: (Terminal)
Tip number 8 is VS Code’s integrated terminal. You can open it up by dragging from the bottom as shown or by clicking CTRL + ``. You can also run scripts from command palette, for example in a Node.JS project you have some scripts you run, instead of typing them in the terminal you could run them from the command palette by opening the command palette withCTRL + pand typing> npm`.
With that we can segway into the next major feature which is intellisense
Tip number 7: (Intellisense)
Intellisense is basically a fancy word for code auto-completion. And if you use languages that are strong or statically typed like Typescript, and Dart you will get incredible developer tooling in VS Code. You will see it automatically pop up as you are typing code, but you can pull it up manually with CTRL + space as well. Code completion is pretty much self-explanatory but there are some pretty cool things you can do with it. Let’s say we are going into a large dart file for the first time, and we want to see all the methods and variables in it. We can do so by opening the command palette by clicking CTRL + p and typing @ while in the file. That will give us all methods, variables, and classes defined in this file!
A cool extension by Codota called Tabnine. I really like the way it auto completes your code which makes you code faster. It also prevents bugs which to be honest are very time consuming. You can also discover code. For more information visit their website.
Tip number 6: (Peek)
In a strong typed language, another thing you might want to do is look at the definition. It can really be disruptive to have multiple files open at once looking for different type definitions. To start off, you can right-click over the definition you want to peek into, click peek and then click peek definition. It will open this handy dandy window that shows you the properties of the definition you requested!
On the flip side, you might want to look at all the places you used this definition in. You can do so by going to the original file and right-clicking over the name of the definition and clicking on Go to references. This will show you all the files that use this definition.
But let’s say I am working with a definition and don’t like the name of it, I can change it by right-clicking on the definition and clicking Rename symbol and choosing another name followed by enter. This will change the name in all the places it was referenced in, which is way better than “Find and Replace All”. Yet, another good reason to strong type your code!
Tip number 5: (Json-To-Code)
Now while we are on the topic of types, I want to show you this really cool extension called Paste JSON as Code. Almost all apps make calls to API’s that return JSON, but you might not have an easy way to strong type this response in your project. I am in the Twitter API right now, and I am going to copy this JSON response example and go to VS Code where I will create a file with the name tweet.dart which I will open and click CTRL + p to bring the command palette. In there I will type > Paste JSON as Code and it will do its thing and generate my strong typed class.
Another way of doing this, for dart at least, is using this website created by Javier Lecuona called JSON to Dart and does exactly what it says. I will leave a link below for the creator’s GitHub and for the site itself.
Tip number 4: (Zen mode)
Enough types stuff let’s chill out for a second. Toggle Zen mode by clicking CTRL + k + z. This will give us a viewport with all the distractions removed. If you do not care what your docker containers statuses are or what the git status is, you can just go into Zen mode and focus on writing code!
Tip number 3: (Debugger)
Unfortunately, we relaxed a little too hard and now our application is broken. Let’s go into the debugger panel and see how that might be able to help us out. You can get to the debugger by clicking on the bug icon or by pressing CTRL + shift + d. One way to debug your code is by adding breakpoints or red dots beside the lines of code you want the app to stop at so you can view the state at that specific point. Adding a breakpoint is as easy as clicking to the left of the number of the line as shown. I will run this app to show an example. Once it ran it will stop at the breakpoints I have set up. You can look at the state of the variables and many other things. One cool thing is the ability to execute commands from the debug console in the context of the script, and we will have access to its current state.
Tip number 2: (GitLens)
Another way that VS Code helps you out is with your git version control. Dealing with git in a large project gets hard to do from the command line. You might have noticed that VS Code automatically highlights all your files, untracked or new files are green, modified files are blue, and files with errors or that got deleted are red. If we want to commit some changes, we can just go to the git tab, add our message, and click the commit button. But what if we didn’t mean to commit that code, we could go to the menu and scroll to “Undo Last Commit” and that will rollback that commit. You can pretty much run every git command from this menu as well. If we want to revert changes on a specific file, we can do so by clicking on this revert button, and that will discard all the changes we made to that file. And if we want to commit some files only, we can click the plus button and that will stage only those files for our next commit. So that is super powerful on its own but I want to know about my git status pretty much everywhere in my code. I want to know who changed what and when it was changed. GitLens is the solution for our problem. We can install GitLens from the extensions tab. When you finish installing it, you will see new options in the source control tab. It makes traversing the git tree super easy and dealing with stashes and tags also your remote repositories becomes a lot easier. But it does not stop at this tab here, it also annotates all your code with information about git. If we go to a file and hover over a piece of code it will tell us exactly who wrote that code, when they wrote it, and its commit id.
Tip number 1: (VS Code Live Share)
This brings us to VS Code Live Share which is a brand-new feature in the editor. It allows you to connect your GitHub or Azure account to VS Code and then collaborate with multiple team members on a single document in real time. It is kind of like the Google Docs of writing code. I have been using this feature a lot lately to collaborate on a project I am working on with a team remotely and I can tell you it is one of the best experiences I ever had writing code with a team! You need to install the extension and connect a GitHub or a Microsoft account, after that it is just a matter of clicking share and VS Code will return a link that you can pass along to other team members.
I probably could have covered about 90 other topics in this video but I’m going to go ahead and wrap things up there. If it helped you, please like and subscribe and leave a comment below on what would you like to see next on the channel.
Thanks for watching and PEACE!
