Productivity everybody wants it. Everybody thinks they are. But can we improve?
I think one way is to know our tools. What they are capable of? What are the features they provide? and Are we not using them all? Are we not using them to their full power?
Here I share 5 productivity features of VS-Code I use.
It doesn’t matter what application you are building or what stack your are following. Every developer has his favorite text editor or at-least he prefers to use one by default. As you have guessed from the title for me it is VS-Code.
What I want to share is not how to install it or why it is better than other, for that we have a ton of other resources. What I can provide is my experience with vs-code in increasing productivity.
We will try to stay away from the mouse as much as possible.
Let's start the journey
1. Integrated Terminal
This feature has saved me a lot of time. if you are not using this then you may find yourself keep toggling between your text editor and terminal. I use my VS-Code for Angular and Rails development, and for Angular, it doesn’t matter much but for Rails when I am making model and using Rails console then it helps a lot.
What is it? Nothing, the same terminal you have. It’s just now visible in your text editor as shown in figure 2. Here VS-Code.
How I suggest using it is, making a keyboard shortcut to toggle focus between terminal and file. Here is my keybinding.json to show you how I have made it:
[
// Toggle between terminal and editor focus
{ "key": "ctrl+`", "command": "workbench.action.terminal.focus"},
{ "key": "ctrl+`", "command": "workbench.action.focusActiveEditorGroup", "when": "terminalFocus"}
]
I use the inbuilt terminal to usually do git commits and run app server in the separate terminals (For that I use iTerm 2).
Again going specifically I use git rebase, stash, pull and push commands here. For my usual commands like commit(with small messages), add and diff VS code provide a great way.
Multiple session is also a thing I use when I ssh into my EC2 instance. You can open another session by pressing the small + sign at the top right corner.
Why I did like this is because when I SSH into EC2 instances of my Rails and the Angular app, from my iTerm sessions then soon I forgot which terminal is which instance. So now I do it inside the vs-code terminal and it keeps it clear in my mind.
2. Git Support
The best thing I like in git support of VS-Code is how it shows the output of git diff. We don’t actually write the command in terminal. They have provided a GUI for this.
Click the git branch logo in the left icon panel and then click the file for which you want to see the git diff. An example of which I have shown below.
I just edited one file in any Angular project. and you can see, how amazingly it show what has deleted and what has added, i.e what has changed. This is amazing and for me I think better than how git shows the output in terminal. Git engineers has made a ton of efforts in making the feature of git diff ,I respect that a lot and I like it, this is just make it more easy.
git add, git commit
I also use the VS-Code GUI functionality to add files in staging and to commit them if I have a small commit message.
We can do this by using the panel at left. The small + sign is used to add the corresponding file to staging state, the curved back arrow is used to revert the changes and the input field above the file name as you can see is used for commit message. For medium size commit message I use integrated terminal and the same old vim fashion method.
Why I use this? because I can add files to staging section very fast as compared to adding them by using git add <file path> command. That writing file path in angular project is very boring, because of lots of sub folder and sub sub folders, yes even by using tab.
Git Lens (The best thing around git log)
It’s a plugin/extension available in VS-Code extensions marketplace. I just love how it shows the history of any file in terms of which user has done what in that file.
The above picture shows a file history. When it was added i.e 15 days ago, who added that, int what commit it was added/changed. The commit hash is available on left side panel under file history.
It is showing the complete git log of a file, without evening writing any git command. Isn’t it awesome. Also this functionality is extended to all git branches under all remotes you have. A glimpse of which I have added in the figure 6. (Although I have only one remote)
These functionality helps moving fast with Git and keeping a track in Git logs and all those merge conflicts.
3. Peak Definition
Working on any large project or a project having lots and lots of code distributed among multiple files will lead to jumping from one file to other more frequently.
And in case if you just want to see some method definition in other file and then move back to your original file seems a big work to you like me, then this is a saver.
right click + peak definition or press ⌥F12, is the method to open this beauty. It will show you the definition and if you want you can make changes in the peak file as well from there. In case if there are multiple definition of keyword match it will show all of them, and you can choose the right one. But ya here we break our rule of not touching the mouse.
It saves me from headache I got from frequently changing files and also it looks cool. Damn cool
Still I need to open files from folders buried deep inside the tree structure of folders and lots of folders. For that I use the tool below:
4. Command Pallet
This is the common feature among all new text editors. Hit Cmd + P and then write the file name you want to open, a dropdown will come according to matching results and you can choose from them. Fast and easy way to access files and the good part is it also open the folder containing that file in left panel and focus the current opened file.
There is a lot you can do with command pallet like running inbuilt or your custom tasks, opening a file, and any sort of command which VS-Code provide you can run from there. For how to do this and that hit this link.
5. Debugger
I love the byebug gem in ruby. Debugging in Rails is cake walk, all thanks to the hard working engineers making our life easy. But when it comes to javascript things are not that much self explanatory. If you know Rails you must have used byebug or pry gem for debugging.
It helps a lot by stopping your server at any time and see what is the state at that point.
In JavaScript I used console.log everywhere when I need to debug. This was my goto in any case dealing with JS. Then came the Debugger of VS-Code. It makes the experience similar by stopping the code at any point and see what is the state of app.
What I need to do is just mark a red dot against the line number where I want to stop the code and run the debugger.
It requires a file name launch.json to be configured so that it can know which server to target and which platform to run the app. For my Angular app I use chrome plugin of debugger and mark my default localhost:4200 as server port to run. Follow this for setup and usage of debugger.
These are my 5 best features I use in VS-code to maximize my productivity and ease my process of development.
Before wrapping up there is one more very interesting feature VS-Code has which is live-share. This is very amazing if you do a lot of pair programming. Live Share enables your team to quickly collaborate on the same codebase without the need to synchronize code or to configure the same development tools, settings, or environment.
They have an amazing video to explain this, I havn’t used this feature but I think this is one of the best in market right now in its field.
If you made it till the last then, congratulations now you know your tool. It’s powerful features and now you can use it to it’s full potential and increase the quality of you work.
Hit the comment section below and let me know in case I missed any awesome feature and your thoughts on this.
Top comments (0)