Here are a few tidbits I've picked up coding to make your life easier in front of the keyboard.
Large Files
When working with a large file, there are times you need to step back and see the bigger picture. The VS Code keyboard shortcuts below will come in handy
Control + K + Control + J or Control + K + J — Unfold all functions (Command for Mac)
Control + K + Control + 0 or Control + K + 0 — Fold all functions (Command for Mac)
Control + K + Control + [ — Unfold current function (Command for Mac)
Control + K + Control + ] — Fold current function (Command for Mac)
Console.log Styling
Console.log commands don't all need to have the same coloring, in fact in-line CSS styling can be used to spruce up the console. This only works in the browser console though.
However, there are also other console.log libraries that can be used like Console, Logdown, Consola, or Ololog. Check out the links below for more information.
https://developer.chrome.com/docs/devtools/console/format-style/
Console.log Search not just Filter
You're also not relegated to using only "Filter" in the console which removes all other entries but instead, you can use control + F (Command for Mac) to search entries just like how it works on any other webpage.
Fetch === Curl
Curl commands are interchangeable with fetch commands in JS. If you want to have access to properly functioning curl commands on Windows, enable WSL and download Linux from the Windows Store to get access to the Linux terminal.
Copy Objects in Terminal
Objects can be copied from the console by right-clicking on the object and selecting "Copy Object"
Use Native Terminal in Large Projects
When working on a project with multiple codebases, i.e., chrome extension, edge-function, web app, and mobile app I find it’s best to use the external terminal app rather than the built-in VS Code one. You’ll quickly get frustrated trying to find the open VS Code project to check the terminal. Use the keyboard shortcut Control + J (Command for Mac) — open/close VS Code terminal to save yourself from the frustration of dragging with your mouse.
You can also download this VS Code extension to quickly maximize the VS Code terminal using the Control +(this is a backtick not a single quote) orControl + ;` (depending on the setting enabled) keyboard shortcut. https://marketplace.visualstudio.com/items?itemName=samueltscott.maximizeterminal
However, to quickly switch to the native terminal, open the VS Code terminal, enter pwd (this command will only work in the vs code terminal or Mac terminal not in the Windows terminal) to give you the path of the current file to then copy that over in your terminal app using cd <pathToPaste> and you’re ready to go.
Use Diffing Libraries
Use diffing libraries like microdiff to inspect differences between arrays and or objects, so you stop wasting time trying to do things like this yourself every time.
Top comments (0)