VSCode Tips and Tricks

This is a list of common and less well known tips, not a comprehensive list.

Common Shortcuts

Note: The shortcuts involving a letter are Uppercase to make them easier to read but they can be lowercase as well (and usually are).

1. CTRL+S to open Keyboards Shortcuts
2. ALT+# to switch between open tabs (not numpad numbers)
3. CTRL+P to search for file and open
4. CTRL+TAB to cycle thru open tabs
5. CTRL+ENTER while anywhere in a line of code to place your cursor on a new line for the next line of code
6. CTRL+, to open Setings page
7. CTRL+J or ` CTRL+``` to toggle terminal/command line
8. CTRL+B to toggle sidebar
9. CTRL+L to select multiple lines
10. CTRL+ARROWS to jump between words, that's Arrow Left and Arrow Right
11. F1 to open command palette
12. F1 + type 'format' for format a selection or a document
13. F1 + start typing emmet and select "Emmet: Wrap with Abbreviation". Best for wrapping a block of HTML with a tag
14. Double-click 'item' then CTRL+D to select other occurrences
15. ALT+Click for multiple cursors
16. CTRL+F to open search box, then ALT+R to toggle RegEx option
17. CTRL+SHIFT+P to open the command palette and show the names of the variables and functions in a long file
18. CTRL+SHIFT+Arrow-down to copy cursor focus line or selected line(s) down, Arrow-Up to copy it up
19. ALT+Arrow-Up or Down to move a line up or down
20. F1 to open command palette - try out ~Emmet: Wrap with abbreviation`
21. F2 while on a var or function name to rename throught out your project
22. SHIFT+ALT+F to format the entire document, or CTRL+K CTRL+F for current selection
23. SHIFT+CTRL+arrow-right or arrow-left - selects groups of characters like words, keywords, numbers - similar to double-clicking in a word doc or webpage and then dragging your mouse.

HTML Tab Triggers

CSS Tab Triggers

1. tdn for text-decoration: none
2. tac for text-align: center

JavaScript Tab Triggers

Top bar icons

Bottom bar icons

Here is a GitHub repo that has a lot of VS Code tips (redundant?):

https://github.com/microsoft/vscode-tips-and-tricks

However, it's really comprehensive. I think a more scaled-down version would be useful for beginners, as opposed to advanced users.

Debugging

1. You need an HTML and JS file
2. Click the left sidebar debug icon
3. Clik the gear icon at the top to select the browser - BRAVE is not an option!
4. Check out Stackoverflow: How to attach the VSCode debugger to the Brave browser?

Video: The New Way To Debug JavaScript in VS Code - No Extension Required by James Q Quick

• need to have your JS app running locally so open with live server
• I need to switch to Chrome - after clicking the gear icon select chrome and then you get a JSON config file called launch.json
• live server runs on port 5500 so change the config file from 8000 to 5500
• then click the play button top left to trigger the debugging instance
• your app will then relaunch in chrome

Actual debugging

• you need to create a breakpoint inside of vs code to do the debugging
• you create a brakpoint by clicking the red dot to the line of the line numbers - start at the top of your code
• then click the run button again

Miscellaneous

Change terminal from Powershell on Windows to Git Bash:

• in settings search for terminal
• scroll way down to Terminal > Integrated > Default Profile: Windows
• Change the default setting of null to Git Bash

Sync settings

Token: vscode://vscode.github-authentication/did-authenticate?windowid=1&code=ENTER_CODE_HERE

1. Copy the token.
2. Switch back to VS code.
3. Click Signing in to github.com... in the status bar.
4. Paste the token and hit enter.

Testing ins and u tags:

underlined text with INS

underlined text with U TAG

INSTALL UPDATED VERSION OF NODE.JS

ERROR: node -v gives v12.18.2 and in d\l folder is v16.13.0

• think I need to update node.js and maybe npm too
• How to update Node.js and NPM to next version

nvm install <version>
nvm list
nvm use <version>
npm install -g npm