Over the last few years, Visual Studio Code has grown very popular over the open-source IDE market. VS Code was publicly released in 2015 and now used by 35% of all developers according to 2018 Stack Overflow survey. In this article, I am going to share a few tips and tricks of VS Code that would help you to be productive.
Git and Gitlens
Git is the most popular software used by developers. Managing Git from your IDE is much easier than the command line. The Git panel allows you to stage, commit, stash, and undo changes. GitLens extension for VS Code offers you much more. The most useful feature of GitLens is that it shows you who committed what and when on every line of code in the project.
Live Share
VS Code Live Share is a brand new feature that is still just in developer preview. It allows you to share your workspace in realtime, live editing, pin to the user to follow their cursor, group debugging and many more. It’s really helpful if you work remotely or when you need to collaborate with someone who isn’t around.
JSON to Code
Have you ever been working with an API in TypeScript and wished you could have its response strong-typed in your project? Paste JSON as Code converts your JSON into an interface usable in strong-typed languages with a single command.
Rename All Occurrences
Refactoring is a necessary aspect of writing and maintaining clean code, but it can be quite the headache — especially when you’re refactoring a large module or an otherwise huge chunk of code. So instead of hunting through dozens of files just to rename a variable or method, let VS Code do it for you.
If you select a variable/method and hit F2, you can edit the name and it will change every instance of that variable’s name throughout the entire current working project.
If you only want to change within the current file, use the Command + F2 (on Mac) or Ctrl + F2 (on Windows) keyboard shortcut and VS Code will spawn a cursor at every instance throughout the current file.
Go to Definition
When you’re programming or scripting, often times you’ll run into a variable or method that you don’t recognize. So what do you do? You could spend several minutes searching for the right file, or you could press Command (on Mac) or Ctrl (on Windows) key and click the variable/method with your mouse. VS Code will take you to its definition right away.
Or you could just hover your cursor over the variable/method along with pressing the Command (on Mac) or Ctrl (on Windows) key, it will show you the definition right in line where your cursor is.
Edit Multiple Lines at Once
If you ever need to insert or delete multiple instances of text throughout a document, all you have to do is create multiple cursors. You can do this by holding down Option (on Mac) or Alt (on Windows) and clicking anywhere in the text. Every click creates a new cursor.
This is particularly useful for things like HTML, where you might want to add many instances of the same class or change the format of several hyperlinks.
Debugger
The debugger deserves a video all to iteself — thankfully, VS Code has already made one of those.
Keybindings and the Command Pallette
If you want to get things done fast, memorize your hot keys. You can look over the essentials in the cheat sheet or by opening the keybindings page.
The command pallette is your best friend. You can open it with Command + P (on Mac) or Ctrl + P (on Windows). As a developer, you’re likely juggling many files simultaneously. Start typing the file name and get full-text search results from the workspace — so much faster than clicking through the directory tree.
- You can start typing with a > to get a list of available tasks.
- Or start with an @ to get a list of symbols in the current file.
Custom Keybindings
One useful keybinding missing from VS code is Save All. Let’s create our own keybinding to save all modified files in the workspace with Command + Shift + S (on Mac) or Ctrl + Shift + S (on Windows).
If you find this helpful don’t forget to leave some claps 👏🏻 and don’t forget to share this with your friends and followers! If you have some tips regarding VS Code, feel free to comment
Btw I'm on Medium as well. Check it out here.
Top comments (23)
Edit Multiple Lines at Once is what blew me away 😮 when I saw Wes Bos editing multiple lines of React components at once in VS Code .
And this time you blew me away at JSON to Code 🕺.
You can take the multiple lines tip one step further and jump to the beginning or end of each line with a hotkey too (very handy for CSV files).
Here's a demo I recorded a few months ago: youtube.com/watch?v=_u-Uuw3GhCQ
That video makes you feel like editing texts using your thoughts almost 😲
Thanks for sharing this video. This is really a pro tip of how we could use multiple line editing.
Agree about multiple lines. I always use Ctrl/Cmd + D after selecting text to change multiple instances but this will be nice.
You guys do realize that multiline editing has been a feature of pretty much any IDE for at least 7-8 years, right? I like VSCode but let's not make it look like they made some breakthrough with this.
Came here to say that too. My muscle memory prefers the way Visual Studio and Notepad++ has done it for years. Put the caret at a place on the line, and hold ALT-SHIFT and press UP or DOWN, and that will put the caret insertion/deletion point on multiple lines. Then type or delete or do whatever to do it on each of the lines. But in VS Code, it duplicates lines - same key commands, but completely different result. :(
Glad you liked it 🙂
It would have been good to update this post, or at least change it to read '2019', before reposting it so late in 2018. (I thought it was a typo until I saw the original Medium post was made in August.)
It's important to note, the Command Palette is opened by default with Ctrl/Cmd + Shift + P. The chord Ctrl/Cmd + P will bring up a "Quick Open" input in the same location, but most of what I need there I can do in the Command Palette without using prefix characters. Of course, any of these bindings can be looked up and changed from the Keyboard Shortcuts preferences page, reachable with Ctrl/Cmd + K Ctrl/Cmd + S.
That Live Share is what I really would love to try.
Glad could help 😊
FYI you could have a Live Share session across VS Code and VS professional/enterprise as well. It’s also working cross-OS (Windows/Linux) :)
Awesome. Thanks for the info.
One thing we can't forget is the Prettier plugin. We just need to focus on writing code, save, and buumm... code is formatted. It's magic!
Thanks for sharing your opinion. Prettier does make our job easier when it comes to code indentation. But you've to remember that, Prettier doesn't support languages like Python, Ruby, Swift, PHP, Java. They're currently working on these languages.
Great article! And very useful considering the popularity of VSCode :)
Glad you liked it 😁
Did you mean 2019 and not 2018 :)
I guess what I meant was, from 2018 onwards 😋😜
Nice one... Helpful article.
Glad you liked it 😁
Does
Go to Definitionwork for any language?Yes 👍🏻