VSCode shortcuts to supercharge JS development
Do you want to be that senior software engineer who can code anything from CRUD applications to intercontinental ballistic missiles without lifting your hands from the keyboard?
Well I’m not one of them, and the fact that you’re reading this article probably means you’re not one of them, and that’s okay. You probably don’t want to be the guy at the party who’s entire personality revolves around talking about how Emacs is better than Vim.
Having said that, I’ll be going through the keyboard shortcuts that I use for VSCode on a daily basis. They are split into three categories, those that are common, uncommon, and rare. Feel free to skip ahead if you think you already know the shortcuts in a particular section.
Common Shortcuts
View: Toggle Terminal
Windows: Ctrl + `
Mac: Ctrl + `
Ctrl + ` basically allows you to open your terminal in VSCode, and the terminal’s directory will be set to your root project folder directory. Super simple stuff.
Format Document
Windows: Alt + Shift + F
Mac: Opt + Shift + F
Formats your entire document to follow certain code best practices, depending on how your environment is setup, for example most JS programmers will have prettier setup to automatically format the document with some common best practices.
Rather than having to format code manually and sticking to a convention of having double quotes or whatever, this allows you to save a ton of time — just write your code however you want, and let the formatter take care of the rest.
Toggle Line Comment
Windows: Ctrl + /
Mac: Cmd + /
Comments out selected portions of code. Instead of manually typing // in front of every line of code, simply highlight the portion of your document which you need to comment out and hit Ctrl + / .
Search: Find in Files
Windows: Ctrl + Shift + F
Mac: Cmd + Shift + F
Just like how Ctrl + F searches for terms in the current folder, Ctrl + Shift + F allows you to search the entire project folder and universe for the term you are looking for. Usually quite an easy way to get to a function that you can remember the name of but not the location.
Go to File
Windows: Ctrl + P
Mac: Cmd + P
Go to File allows you to search for a file by its name and open it. As a bonus, when the window opens, you can type :lineNumber in order to go to a particular line number on the current page or on the page you are searching for.
Uncommon Shortcuts
Search: Add Selection to Next Find Match
Windows: Ctrl + D
Mac: Cmd + D
If you need to replace a common piece of text throughout a document, this is a great way of selecting multiple instances of text. However, if you’re just renaming a variable, there are better, more convenient shortcuts of doing so. (See Rare Shortcuts 😉)
Add Cursor at Point / Add Cursor (Above | Below)
Windows: Alt + LeftClick / Ctrl + Alt + (UpArrow | DownArrow)
Mac: Opt+ LeftClick / Cmd + Opt + (UpArrow | DownArrow)
Sometimes, you just need to make the same edit at multiple places. This shortcut comes in handy to let you do just that.
Go To Definition
Windows: Ctrl + LeftClick / F12
Mac: Cmd + LeftClick / F12
Instead of desperately navigating through your folders looking for where you implemented a particular function, or using Ctrl + Shift + F you can simply use Ctrl + LeftClick on any function you are using in your code in order to find the function definition.
Move Line Up | Move Line Down
Windows: Alt + (UpArrow | DownArrow)
Mac: Opt + (UpArrow | DownArrow)
You can quickly move entire lines of code up or down, usually I use this to move pesky curly brackets back to where they belong.
Rare Shortcuts
Toggle Word Wrap
Windows: Alt + Z
Mac: Opt + Z
Sometimes you just have obnoxiously long lines of code. Instead of scrolling left to right and constantly losing your train of thought you can just press Alt-Z instead.
Refactor Code
Windows: Ctrl + Shift + R
Mac: Ctrl + Shift + R
This is my favorite shortcut — The great thing about this shortcut is it allows you to
- Extract Code to an external function
- Extract a function to a separate file
- And much more
It even automatically determines the function types and parameters for you so you don’t have to use your brain at all — Just press Ctrl + Shift + Rand you’re done.
Usually, my workflow for programming involves writing everything as one big 500 line function first — because even though that’s considered a bad practice, I can easily refactor the code with Ctrl + Shift + R.
Rename Symbol
Windows: F2
Mac: F2
For such a surprisingly useful shortcut, I feel that too few people know about this one. The difference between F2 and Ctrl-D is that F2 automatically changes every single occurrence of a symbol, be it in the current file, or exported to another file, and it will rename the symbol without changing the functionality of the code.
Convert Figma to React Code
Often as Frontend Engineers we work with UI/UX designers who first create the design and then it falls on us to recreate the entire design from Figma again, just in code, which often feels like double work.
FireJet converts your figma designs into code to prevent redundant work so that you can focus your time on making the frontend functional instead.
Honorable mentions
Ctrl + X : Cuts entire lines (You don’t need to select the line)
Ctrl + C : Copy entire lines (You don’t need to select the line)
Ctrl + S : Just a gentle reminder. Especially important if your IDE is Microsoft Word
Conclusion
Hopefully these shortcuts will save you some development time! Let me know if there are any other shortcuts I should know.
Signing off, :wq!
Hey there! I’m Philip, and I’m making FireJet, a Figma to Code converter focused on human readable code, responsiveness and pixel-perfect accuracy. If you try it out it would mean alot to me, and if you don’t, I hope at least the article was useful to you.
