Top 10 VS Code Tips and Tricks you must know to code faster ⚡🔥👨💻
VS Code has a ton of customizations available which make it possible to use hacks and tricks that can increase our productivity and let us code faster
Hello World 👋
Glad to see you again! 😊
"There is no 'right time' there is just time, and you get to choose what to do with it." — Rachel Wolchin
VS Code has been one of my most used IDE since I started with programming and I think it's one of the most used too. It ranks higher and used by a lot of developers because of its awesome features. It has a lot of customizations available right from code snippets to sharing code with others. We developers love to live a productive life and want to code faster and better day by day. So, here's a list of some great tips, tricks, and hacks that you must use to make your day even more productive and code faster than before.
$$$$
Top 10 Tips and Tricks 🔥
1. Create your own Code Snippets 👨💻
You can create your own Code Snippet of your choice and use it to code faster. I have been making my own code snippet in many programming languages and yes, it saves a lot of time and makes your code faster.
Step 1. Open Settings and then User Snippets
Step 2. Select the programming language you want to make a Code Snippet for
Step 3. Uncomment everything after the line which says 'Example: '
Step 4. This is a default code for your snippet. You need to do the changes here:
// Default Code
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
// C++ Starter code
"Cpp programing boiler plate": {
"prefix": "cpp program",
"body": [
"#include <iostream>",
"using namespace std;\n",
"int main()\n{",
"\t$1",
"\treturn 0;",
"}"
],
"description": "Boilerplate for Cpp programs"
}
So, when I type in "cpp program" in my C++ file I get the starter code instantly. How cool is that!
2. Extensions ⚙
VS Code has a ton of extensions. You customize everything and anything you see. You can change color, fonts, font size, etc. but this is not the end, you can even use some awesome extensions that would boost your productivity and make your coding experience more fruitful. Here's a list of some awesome extensions that I recommend everyone to use. I've tried to list as unique as possible.
Some useful and productive extensions ⚒
1. Live Share ⏺
2. GitLens 🔥
3. Kite Auto Complete 🪁
4. Code Runner 🏃♂️
5. CSS Peek 👀
$$$$
Some customizing and fun extensions 🎉
1. Power Mode 🔥
2. The Best Theme 🎨
3. VSCode-icons 🖥
4. Polacode 📸
5. Import-font 🆎
$$$$
3. Create your own Theme 🌀
Everyone loves themes and VS Code makes sure that developers can set their own theme. A lot of themes are available in the extensions. You can choose from them and can install any of them. I've already mentioned my favorite them in the Extensions point but there's also a way to design a theme of your choice everything as you want. You can change every color of every element and that is made possible by an awesome website Theme Studio for VS Code 🌟
4. Keyboard Shortcuts ⌨
Some useful Keybindings
Alt+↑ / ↓- Move line up/downShift+Alt+↓ / ↑- Copy line up/downCtrl+Shift+K- Delete the entire lineCtrl+Enter- Insert the line below anywhere from the current lineCtrl+Shift+L- Find all matching words and add a cursor in the endAlt+Click- Add multiple line cursorsCtrl+L- Select entire lineCtrl+Space- Trigger Suggestions
$$~$$
5. Create your own Keyboard Shortcut 🤯
If you are not satisfied with any keyboard shortcut in VS Code or you are used to previous IDE keyboard shortcuts, then there's an option to customize these shortcuts the way you want. Just head to Settings >> Keyboard Shortcuts and then Select the keybinding you want to change and press the desired key and boom! 🔥 You are done! Now you can enjoy your previous Keyboard Shorcuts or even make a new one.
6. Git Integration 😺
An IDE with preferred customizations and a Git Integration is called a perfect IDE and YES, VS Code brings it too. With features like commit, pull, push, cloning, making a repository, and even editing it in the IDE itself is what VS Code provides. There are some awesome extensions that would help you out in making this process easy and beautiful.
7. Zen Mode 🏞
A mode in which you can free yourself from an untidy-looking screen and lets you focus on your code by hiding all other components and going into fullscreen. You can enter the Zen Mode by pressing Ctrl+K Z keys and exit the mode by pressing Esc twice.
8. Split View 🔍
Split View is an awesome tool to spread your tabs/files/terminals and work on them simultaneously. You simply need to right-click on your opened file at the top bar or go to View >> Editor Layout >> and then select to Split it as per your wish. It's a great tool to work and split files so as to make your workflow easy. For example, you can have a main file open with input and output file split side by side and a terminal window at the bottom.
9. Command Palette 🤩
VS Code comes with an integrated command-line terminal for us. On Windows, this terminal pops up as the Command Prompt whereas, on Mac and Linux, it shows up as a Bash prompt. With the new update of May 2021, you can now easily change your terminal from Command Prompt to Powershell to Bash or anything else as per your wish. The command-line interface lets you control how you launch the editor. It also supports the ability to have multiple, separate terminals side to side. Just click the + icon at the top right to add a new terminal instance or click the trash can icon to close the current terminal.
10. VS Code browser 🌐
Do you want to code directly on your browser instead of cloning a GitHub repository on your machine? Well, there is a way! Open any GitHub repository and just change the web address. For example, this is the repo you want to work with https://github.com/flutter/samples then just as 1s after the word github and keep the remaining link as it is. So, it becomes https://github1s.com/flutter/samples and DONE! You can open any GitHub repo in VS Code-like UI on your browser. How cool is that!
Wrapping Up!
Hope you guys have enjoyed these tips and tricks of VS Code. We love to be productive and like to code faster and VS Code has made it possible for us. We can use Code Snippets, tons of extensions, various options for customizations, git integrations, and whatnot! It is my and most developer's favorite IDE for programming. So, what are you guys waiting for? Get to know these tips and tricks in-depth and start implementing them from now onwards. Happy Coding!!! 😊
Do check out the VS Code May 2021 update for new features.
“Give ordinary people the right tools and they will design and build the most extraordinary things.” — Neil Gershenfeld
Share this blog with your friends 👩🏼🤝🧑🏼 and developers 👨💻 you know and let them know these cool tips and tricks! Feedback and Comments are welcomed here! 💌
Comment down your favorite tip or trick from this list and also suggest a new one that you know and would like to share with the community! 😊🤝
🌎 Let's Connect
🤝 Support
See you on the next blog!
Good-bye 🙋♂️👋