VS Code Setup
Planted 02021-05-15
My VS Code setup.
Theme
Keybindings
- https://dev.to/jmir17/top-20-vs-code-shortcuts-windows-edition-2jlb
- https://www.stefanjudis.com/blog/emmet-vs-code-bindings-to-level-up-html-editing/
- https://rachsmith.com/keyboard-shortcuts-large-file-vscode/
- 12 minutes of VS Code keyboard shortcuts
OS Difference:
- Mac: Command
- Windows: Ctrl
Keybinds:
- Toggle Sidebar Visibility: Command + B
- Toggle Terminal: Command + backtick
- Toggle zen mode: Command + K Z
- Toggle bottom panel?: Command + J
- Trigger Suggest: Control + Space
- Collapse Folders in Explorer: Command + Shift + ↑
- Open split editor:
- Markdown Preview: Command + Shift + V
Selection:
- Command Palette: Command + Shift + P
- (The drop-down shows recently viewed files, use it to quickly switch back-and-forth)
- Quickly navigate between recently viewed files: Control + Tab
- Search files by name: Command + P
- Select between quotes (custom keybindings.json): Command + quote
- Selects everything within current tag (custom : Command + shift + Akeybindings.json)
- Select current line: Command + L
- Move line up: Alt + ↑
- Move line down: Alt + ↓
- Copy line up: Alt + shift + ↑
- Copy line down: Alt + shift + ↓
- Go to references: Shift + F12
- Rename: F2
- Emmet Wrap with abbreviation:
- Wrap each new line:
ul>li*
- Wrap and remove list markers:
ul>li*|t
- Wrap each new line:
Multi-select:
- Select next occurrence: Command + D
- Select every occurrence in file: Command + shift + L
Multi-cursor:
- Manual selection: Alt + Click
- Add another cursor up: Command + Alt + ↑
- Add another cursor down: Command + Alt + ↓
Keybindings.json
// Place your key bindings in this file to override the defaults
[
{
"key": "shift+cmd+a",
"command": "editor.emmet.action.balanceOut"
},
{
"key": "cmd+'",
"command": "extension.selectEitherQuote"
},
{
"key": "cmd+m cmd+1",
"command": "workbench.action.tasks.runTask",
"args" : "Build jekyll site"
},
{
"key": "cmd+m cmd+2",
"command": "workbench.action.tasks.runTask",
"args" : "Serve jekyll site"
}
]
Settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.fontFamily": "Dank Mono, Menlo, Monaco, 'Courier New', monospace",
"editor.bracketPairColorization.enabled": true,
"prettier.requireConfig": true,
[redacted]
"insertDateString.format": "iso",
"workbench.colorTheme": "Night Owl",
"editor.fontLigatures": true,
"editor.fontSize": 16,
"workbench.iconTheme": "vscode-icons",
"editor.minimap.enabled": false,
"editor.formatOnSave": true,
"zenMode.centerLayout": false,
"vsicons.associations.folderDefault.root_folder": null,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue"
}
Tasks.json
Extensions
Useful VS Code Extensions For Front-End Developers
- Code Runner
- Code Spell Checker
- Copy filename
- DupChecker
- erb
- Insert Date String
- Parker CSS Analysis
- Prettier
- Python
- Quick and Simple Text Selection
- Ruby
- Settings Sync
- Visual Studio IntelliCode
- MDX
- npm Intellisense
- Tailwind CSS IntelliSense
- Headwind
- VSCode Ruby
- vsccode-icons
- WakaTime
- GitLens