DEV Community

loading...
Cover image for Visual Studio Code and its magic

Visual Studio Code and its magic

madhavgupta profile image Madhav Gupta Updated on ・4 min read

Hello, I am Madhav Gupta(someone who's been using VS Code for a long time sufficient to fall in love with it) and I'd like to walk you through the amazing world of shortcuts in VS Code and a wonderful extension.

We all love studio code, don't we? (talking about those who use it)

At my starting point, I always wondered how the tutor was able to move a selection up without moving the mouse, copy a whole selection and move it down simultaneously. Turns out these were the key shortcuts who were the culprits all along.

So coming on to the point,
Being a developer, you sure know one thing that mouse is wicked for you. You should be familiar with most of the key shortcuts available in your editor.

While there are so many shortcuts available in the editor, I will be listing some of the shortcuts I use the most. As a side note, you can find the full list of keyboard shortcuts here.
These are for windows users, so please excuse me if you use any other OS.

Here's a table for the shortcuts and what they do.

Keyboard Shortcut Their effects
Alt+ ↑ / ↓ Move your selection up or down
Shift+Alt + ↓ / ↑ Copy your selection and move it up or down
Ctrl+ ] / [ Indent/Outdent Line(move your selection left or right,in simple words)
Ctrl+Shift+\ Jump to matching bracket
Ctrl+↑ / ↓ Scroll your selection UP or Down
Ctrl+/ Toggle comment (uncomment a selection if commented & vice versa)

While these are shortcuts which I tend to use most of the times, Some of the honorable mentions are,

Keyboard Shortcut Their effects
Ctrl+Space Shows you all the recommendations when coding/Trigger suggestion
Ctrl+. (Credits- Michael De Abreu) Quick fix
Ctrl+P(Credits- Đào Tuấn) Open any file in your root folder
Ctrl+F Find
Ctrl + H Replace
F11 Toggle Full Screen
F5 Start debugging
F9 Toggle Breakpoint
Ctrl+Shift+T Reopen closed editor
  • So these were some of the most used keyboard shortcuts, besides Ctrl+C & Ctrl+V of course 😀😀
  • If you knew them all and use them, Congratulations. Be sure to share some of the shortcuts which you use all the time in comments.

Now, let's talk about the extension.

The name of the extension is JavaScript (ES6) code snippets

People who use it know the power of this extension. As the name depicts, this extension provides you code snippets with some shortcuts and you can use them by hitting TAB or ENTER.

Shortcut What it becomes into
clg console.log()
thenc Then and catch chained .then((res) => {}).catch((err) => {});
imp imports entire module
rqr Require
mde module.exports()
con adds default constructor in the class constructor() {}
fre forEach loop in ES6 syntax array.forEach(currentItem => {})

So, that's it for today. Pheww, writing my first post was not that tough.
I'll be back with more posts( Thinking to write a guide on markdown) and one more thing, No hate on other editors, Just use what fits you.
Hope you like it. Have a great day. Thanks.
Edit : grammatical fix

Discussion (25)

pic
Editor guide
Collapse
anortef profile image
Adrián Norte • Edited

Congrats on the first post!

As another person whos first language isn't English, I would like to recommend to you the use of Grammarly or something like that (free version is more than enough) to improve the writing quality.

Collapse
joshiji profile image
Santosh Joshi

I would second this.

Grammarly is certainly a very useful plugin for both Chrome and MS Office products.

Collapse
madhavgupta profile image
Madhav Gupta Author

Thank you. I will take care of the grammar from next time.

Collapse
hugoliconv profile image
Hugo

I agree with you, Grammarly is pretty good and helpful

Collapse
michaeljota profile image
Michael De Abreu

I would add ctrl+.. This trigger the 💡 fixer. It's incredibly useful when you don't want to touch the mouse. Thanks for your contribution. You sure have to add something to the grammar, but the content is something we understand.

Collapse
madhavgupta profile image
Madhav Gupta Author

Thank you for the kind words. I will surely try to do better next time.

Collapse
hassha8 profile image
HsnH

Or you could improve this article and add this shortcut to it (while crediting Michael).
Nice work nonetheless ;)

Thread Thread
madhavgupta profile image
Madhav Gupta Author

Did it.. thanks

Collapse
montrealist profile image
Max Kovalenkov

Thank you for writing this, very useful! One doubt: I feel like there's a tiny bit missing here:

.then((res) => {).catch((err) => {});

Needs to be:

.then((res) => {}).catch((err) => {});

Congratulations on the first post! 👏🏼

Collapse
madhavgupta profile image
Madhav Gupta Author

corrected it, thanks

Collapse
vaibhav profile image
Vaibhav

Nice article madhav. I hope you will continue writing articles.

Collapse
avatarkaleb profile image
Kaleb M

Great first post! I think a great follow up maybe your favorite extensions :)

Collapse
madhavgupta profile image
Madhav Gupta Author

While it is such a good idea, I think a guide to markdown will do better.

Collapse
jmscavaleiro profile image
jmscavaleiro

Thanks! Very useful tips!

Collapse
tuandse62171 profile image
Đào Tuấn

I am using VSC on Mac and I find this command useful:
Command (Ctrl) + P: open any file inside your root directory 🐼

Collapse
madhavgupta profile image
Collapse
alphayama profile image
Ashish Pratap

You can get the cheatsheet with all VS Code keyboard shortcuts from the Help menu. I have printed it and pasted it on my table. It is very handy.

Collapse
javon27 profile image
javon27

CTRL+SHIFT+F and CTRL+SHIFT+H will open the search (& replace) in all files. Even better if you have some text already selected (also works with regular search and replace).

Collapse
ofekih profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Ofek Gila

"Age my starting point, I always how the tutor was able to move a selection up without moving the mouse..."

Stopped reading after this. Doesn't this website do any proofreading?

Collapse
joshiji profile image
Santosh Joshi

It is user generated content and proofreading is responsibility of the author.

I believe, this is author's first post and English is not his first language. Feedback in right direction may improve the quality of future articles from him.

Collapse
ofekih profile image
Ofek Gila

You may have misread my comment. I did not complain about the author. I explicitly said, "Doesn't this website do any proofreading?" (emphasis added).

It is the website's role to proofread their articles and hold them to some standard, not the user's role to improve the quality of the articles. Now it is clear to me that this website does not have a high standard of articles, since it clearly does not do any proofreading, and I made the decision not to read advice and subscribe to a website that does not have a decent standard for the quality of their articles.

Sorry for the confusion, I did not mean to attack this article's author.

Thread Thread
anortef profile image
Adrián Norte

Wow, you sure did not help at all with this last one.

If you are unable to give constructive feedback and only complain because a FREE platform, that has a rich community of developers who are quite respectful to each other without regard of their country of origin, does not hold to your standards I would say: good riddance to you and may you find a place you like.

Thread Thread
guneyozsan profile image
Guney Ozsan

This is a community website. No proofreading or editors. So it is better to encourage authors to write more as we all share knowledge and experience here.

I would suggest a better wording in my comment or ask what he meant. Let's be more inclusive and encouraging.

Collapse
rattanakchea profile image
Rattanak Chea

If you get past the grammar, the content is quite useful. Give the author a break.

Collapse
madhavgupta profile image
Madhav Gupta Author

I'm sorry for that and this was the only grammatical mistake(maybe), corrected it. Thanks . Read the post twice before publishing. Some words are just too naughty that they escape eyes. And yes,I used grammarly to not give a bad impression.