blog

VS Code Shortcuts to Jump Around Editor

I found these tips to be insightful from their vlogcast and listing them here for future reference!

# NAVIGATION TIPS
In the cmd pallet bar typing #functionName can jump to a variable in the document.
By OPTION + clicking (variable name)
– it will open the document where the function is being defined

CTRL + (-)minus
– allows you to nav back/forth through the code structure
– Or you can bind mouse buttons on a mouse to traverse the document in the editor as well.

By hitting F12
– can also bring you to the direct definition when your cursor appears over the functionName.

# MOVE, SELECT, EXPAND | SHORTCUTS
OPTION + L/R (arrows)
– jump word-by-word for selections

CMD + L
– select an entire line you are on

CMD + L + SHIFT
– will turn from a move to a SELECTION

CMD + L/R (arrows)
– allows you to jump from bringing of line or end of line

CMD + L + L
– will select the code block line by line

CMD + SHIFT + ARROW
– selects entire line

Select by scope:
– open cmd pallet and type >expand selection – select by 3 diff scopes

OPTION + U/D (arrows)
– to move content up/down a line w/o having to copy/paste

To duplicate a line:
– SHIFT + OPTION + U/D (arrows)
– (alternative) CMD + SHIFT + D

Placing cursors on every line…
– CMD + SHIFT + L – after selecting all lines you want to affect.
– is useful when you want to include a property or label on every element in one swoop

# INTERFACE
Enable “Sticky Headers” –
– when nested inside like a function it will lock it to the top

Activity Bar Buttons –
– can move from from horizontal left-side view to top for less visual space

CMD + SHIFT + P
– standard command to open the command pallet

# RENAME SYMBOLS (FUNCTIONS/VARS)
Place cursor on word, right-click and choose the type of scope:
– RENAME SYMBOL (affects existing document you are in) or
– CHANGE ALL OCCURRENCES (affects instances in all files)
Or hit F2; type change of text; then hit SHIFT + ENTER, pop-up box appears (refactor preview) where you can check/uncheck what you want to change and hit APPLY to make those changes.

# AI EDITOR INTEGRATIONS
There was a brief conversation on these two tools for which they have other videos they cover on the topic.
CoPilot + Codium

Here is an overview of each extension in more detail that Brad covers and has benefited in his workflow.

Prettier
An opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

GitHub Copilot
Provides autocomplete-style suggestions from an AI pair programmer as you code. You can receive suggestions from GitHub Copilot either by starting to write the code you want to use, or by writing a natural language comment describing what you want the code to do.

Live Server
Launch a development local Server with live reload feature for static & dynamic pages

Multiple Cursor Case Preserve
Preserves case when editing with multiple cursors.

Git History
View git log, file history, compare branches or commits.

Git Lens
Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more

Code Runner
Run code snippet or code file in different languages.

Markdown Preview Enhanced
An extension gives you a live preview of your markdown as you write it. Can preview markdown within VS Code without and extensions. Can view the table of contents, pdf export, syntax highlighting, preview customization and more.

Console Ninja
A VSCode extension that displays console.log output and runtime errors directly in your editor from your running browser or node application. It’s like your browser dev tools console tab or terminal output from your node app, but instead of having to context switch, values are connected to your code and displayed ergonomically in your editor.

RegEx Snippets
Easily insert popular RegEx codes without memorizing anything!

Polacode
Polaroid for your code. Useful for sharing code snippets on social media or a blog post.

Code Spell Checker
Spelling checker for source code. The goal is to help catch common spelling errors while keeping the number of false positives low.

Document This
Automatically generates detailed JSDoc comments in TypeScript and JavaScript files.

ChatGPT
GPT-4,Key-free,Free of charge. Allows sidebar to appear in VS Code to ask questions. In the command pallet your can type >chatgpt and will be shown a variety of pre-programmed tasks for quick questions or generate code snippets.

Peacock
Subtly change the workspace color of your workspace. Ideal when you have multiple VSCode instances (like front-end or back-end pieces of a project)and you want to quickly identify which is which by color coding the window.

Postman
Streamline API development and testing with the power of Postman, directly in your favorite IDE.

REST Client
Send HTTP request and view the response in VSCode directly. You can create files with the extension HTTP and write the request right in the file and run it and see the response in the output window so it’s a great way to test out API’s but also document them so you can have a file for each endpoint and can write comments in the file to explain what that request does.

Bookmarks
Working with large files? Mark lines and jump to them.

Codimate/Codium AI
Your code integrity AI mate – analyzes your code and generates meaningful tests to catch bugs before you ship (powered by GPT-3.5 & 4 & TestGPT-1)

Quokka.js
A developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.