This is how I set up my VS Code.
It contains an interactive debugging system that is easy to use once you understand it.
It contains a git interface panel for checking in code, along with an easier to read side-by-side file diff-er, which is easier to read than git diff.
If contains a terminal window. Since I usually have three open, I use it as my active one to do commands on such as restarting the server, and I can drop my terminal windows down to two.
Shell command to open vscode from terminal using code:
Cmd + P to pull up the command palette, type >shell command, hit enter.
import console from 'console'; when using console.log. Remove auto imports: Go to Code > Preferences > Settings > Search for Javascript Auto Imports > uncheck Enable/disable auto imports suggestions.Path Intellisense - when typing a path name, will give a dropdown for filling in the file path.
Beautify css/sass/scss/less - To format this stuff automatically. Shift + option + F
VS Live Share - Great for sharing the same coding session with someone.
Project Manager - create and manage a quick list of your project folders to switch between
linter-xo - because I'm a bastard and not just using eslint, I use xo. Mapped xo.fix to Option + F
Beautify - To format JS. Previously the built-in JS prettifier worked fine, but then it stopped working, so I installed this. Shift + option + F
GhostText - Type in text fields using VSCode instead of your browser. Very useful when you're typing a lot of code in-browser. E.g. I used this when adding hundreds of lines of custom styles in SquareSpace's tiny custom styles window. Also text editor shortcuts are nice to have.
Settings Sync - Once you want to move your VS Code settings to another computer
Quokka.js - Like node repl in your file? Seems really cool but I keep forgetting to use it.
Inline Parameters for VSCode - Adds the name of the args to your function calls.
Code::Stats - because fun and not productive
Add jsdoc comments - Highlight a function, Cmd + Shift + P for Command palette, type doc, to get "Add Doc Comments" to pop up, hit enter and a comment section above your code creates boilerplate for documentation on a function. Still testing, not sure if this saves much time.
TODO Highlight - Highlight TODO or FIXME in your code.
REST Client - send requests to your server like postman, but from files in VSCode.
Top JavaScript VSCode Extensions - Someone's opinion.
**^ is control for Mac Shortcut icons.
**⌥ is option for Mac Shortcut icons. It's less commonly known as alt.
⌘ + \ split editor
Shift + Cmd + v open .md preview. Works well with above split editor
⌘ + Shift + e open explorer tab
⌘ + Shift + f open find tab
⌘ + Shift + d open debug tab
Option + up/down move line up/down
ctrl + ` open terminal window
Shift + ⌥ + F prettify document
⌥ + ⌘ + Up/Down add another cursor above or below the cursor
⌥ + ⌘ + [ Fold selection (i.e. collapse a function)
⌥ + ⌘ + ] Unfold selection
⌘ + K, ⌘ + J Unfold all
⌘ + K, ⌘ + 1 Fold first level depth
⌘ + K, ⌘ + 2 Fold second level depth
⌘ + K, V Open markdown preview
⌘ + D add selection to next occurrence of what the cursor is on (i.e. next find match)
⌘ + K, ⌘ + D move last selection to next find match
⌘ + F local file search - will search the highlighter word or where the cursor currently is
⌥ + ⌘ + W match whole word option on finder
Shift + arrow key select ahead a letter
Option + arrow key jump ahead a word
Option + shift + arrow key select ahead a word
⌘ + ⌥ + left/right change window. I put my thumb between cmd and ⌥ to press both with one finger.
⌘ + click navigate to that file or function definition. May need additional configuration if you are using aliases.
ctrl + - / ctrl + shift + - to navigate back/foward a file when using cmd+click to navigate around. It technically is moving your cursor back a position.
(After filling in commit message) cmd + Enter to commit the message with staged files.
When you type these things, it'll auto-fill for you:
/** will start a multi-line comment in Javascript
Shortcuts for common things:
{
"console.log": {
"prefix": "co",
"body": [
"console.log('$1');"
],
"description": "Creates a quick console log statement"
},
"console.log name": {
"prefix": "con",
"body": "console.log('$1', $1);",
"description": "To create a quick console log of a variable"
}
}
Copiable:
"xo": {
"extends": "xo-react",
"space": true,
"semicolon": false,
"complexity": "never",
"rules": {
"camelcase": "warn",
"unicorn/filename-case": 0,
"comma-dangle": [
"error",
"always-multiline"
],
"spaced-comment": [
"error",
"always",
{
"exceptions": [
"/"
]
}
]
},
Explained:
"xo": {
"extends": "xo-react", <- for react support
"space": true,
"semicolon": false,
"complexity": "never", <- for my never-ending switch-case statements that are more than 20 case statements long. My scenario is Redux + message box that reacts to a lot of different actions. I don't think I ever will be like "oh shit, I didn't mean to add _that_ many."
"rules": {
"camelcase": "warn", <- I like camels
"unicorn/filename-case": 0, <- I honestly forget
"comma-dangle": [ <- have commas at the end of a list in arrays/objects!
"error",
"always-multiline"
],
"spaced-comment": [ <- this was basically for...
"error",
"always",
{
"exceptions": [ <- this because we've some blocks of //////////... in our code that would format into // //////... with the linter
"/"
]
}
]
},
VS Code packages that I uninstalled as I did not find them useful:
Prettier - adds a shortcut for formatting your code nicely - Shift + ⌥ + F. This actually is already built in and seemed to have caused freezing/crashing to occur while this was installed.