Programming Tidbits (VS Code Keyboard Shortcuts, Console.log Styling + Search, Diffing Libraries, fetch === curl)
Published: 2023-08-06 21:42:54


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

[https://developer.chrome.com/docs/devtools/console/format-style/](https://developer.chrome.com/docs/devtools/console/format-style/)

[https://blog.bitsrc.io/increase-readability-with-console-log-styling-with-chrome-devtools-a38a752d5096](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](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](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](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](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) or `Control + ;` (depending on the setting enabled) keyboard shortcut. [https://marketplace.visualstudio.com/items?itemName=samueltscott.maximizeterminal](https://marketplace.visualstudio.com/items?itemName=samueltscott.maximizeterminal)

![https://cdn.hashnode.com/res/hashnode/image/upload/v1691354802434/44896f0a-3a16-4702-bb51-4b435d3b8215.png](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](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.