DEV Community

remusris
remusris

Posted on

Programming Tidbits (VS Code Keyboard Shortcuts, Console.log Styling + Search, Diffing Libraries, fetch === curl)

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.

https://cdn.hashnode.com/res/hashnode/image/upload/v1691354093549/4941084e-d867-4921-adad-78f37ec24a04.png

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://javascript.plainenglish.io/alternative-libraries-for-console-log-for-your-next-javascript-project-af6bc9a2f2ba

https://developer.chrome.com/docs/devtools/console/format-style/

https://blog.bitsrc.io/increase-readability-with-console-log-styling-with-chrome-devtools-a38a752d5096

Console.log Search not just Filter

https://cdn.hashnode.com/res/hashnode/image/upload/v1691355396753/32ebefd3-97cb-4593-8be7-41288f8c51e4.png

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

https://cdn.hashnode.com/res/hashnode/image/upload/v1691355891134/1ef51419-7d2a-4dff-88a4-ba5144610654.png

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

https://cdn.hashnode.com/res/hashnode/image/upload/v1691356023803/3091ae4c-242f-4f32-8a51-e6afbef0c1c9.png

Objects can be copied from the console by right-clicking on the object and selecting "Copy Object"

Use Native Terminal in Large Projects

https://cdn.hashnode.com/res/hashnode/image/upload/v1691354444008/e1b355d6-7dff-4052-ab4d-4b2738a13885.gif

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

https://cdn.hashnode.com/res/hashnode/image/upload/v1691354802434/44896f0a-3a16-4702-bb51-4b435d3b8215.png

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

https://cdn.hashnode.com/res/hashnode/image/upload/v1691356521388/25e970da-5e5f-4671-882d-6fc9423419a8.png

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)