VS Code Setup

Theme:

• One Dark Pro Monokai Darker

Font:

• JetBrains Mono

Terminal:

• Zsh as shell, paired with Oh My Zsh
• Powerlevel10k as theme

Extensions:

• advanced-new-file - Easily create new files anywhere without touching the mouse
• Auto Rename Tag - Saves so much time when working with HTML tags
• Code Spell Checker - Because why not working on your spelling skills while coding
• Color Highlight: Get color syntax highlighting in editor
• Error Lens - Directly highlights code line that raises issue instead of hovering over squiggly lines
• ES7+ React/Redux/React-Native snippets - Eventually becomes second nature to use these
• ESLint - Integrates ESLint rules and visualizes code violations
• GitLens - Git blame annotations on a code line basis, easily navigate between revisions of your code
• Jest Runner - Sometimes all you want is click and test
• Jest Snippets - More snippets, more time-saving
• line-jumper - Adds ability to jump over multiple lines at once
• Prettier - Tip: Always format code on save

Miscellaneous:

• Set up VS Code as git rebase editor: git config --global core.editor "code --wait"

Settings.json:

{
  "editor.fontFamily": "JetBrains Mono",
  "editor.fontSize": 13,
  "editor.tabSize": 2,
  "editor.minimap.enabled": false,
  "editor.fontLigatures": true,
  "editor.formatOnSave": true,
  "workbench.colorTheme": "One Dark Pro Monokai Darker",
  "workbench.startupEditor": "none",
  "workbench.editor.wrapTabs": true,
  "workbench.editor.enablePreview": false,
  "workbench.editorAssociations": {
    "git-rebase-todo": "default"
  },
  "terminal.integrated.cursorBlinking": true,
  "window.titleBarStyle": "custom",
  "window.customMenuBarAltFocus": false,
  "window.enableMenuBarMnemonics": false,
  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "errorLens.enabledDiagnosticLevels": ["error", "warning"]
}

keybindings.json:

Instead of using traditional arrow keys for code navigation, I personally prefer to use a Vim-esque navigation style using IJKL in order to minimize any sort of hand movement while coding (credits to this blog post which gave me the initial inspiration).

[
  // Move cursor up/left/down/right
  {
    "key": "alt+k",
    "command": "cursorDown",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+i",
    "command": "cursorUp",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+l",
    "command": "cursorRight",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+j",
    "command": "cursorLeft",
    "when": "editorTextFocus"
  },
  // Intellisense navigation
  {
    "key": "alt+i",
    "command": "selectPrevSuggestion",
    "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible"
  },
  {
    "key": "alt+k",
    "command": "selectNextSuggestion",
    "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible"
  },
  // QuickOpen Panel navigation
  {
    "key": "alt+k",
    "command": "workbench.action.quickOpenSelectNext",
    "when": "inQuickOpen"
  },
  {
    "key": "alt+i",
    "command": "workbench.action.quickOpenSelectPrevious",
    "when": "inQuickOpen"
  },
  // Select lines/characters while moving cursor
  {
    "key": "alt+shift+k",
    "command": "cursorDownSelect",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+shift+i",
    "command": "cursorUpSelect",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+shift+l",
    "command": "cursorRightSelect",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+shift+j",
    "command": "cursorLeftSelect",
    "when": "editorTextFocus"
  },
  // Move cursor to start/end of word
  {
    "key": "alt+ctrl+l",
    "command": "cursorWordEndRight",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+ctrl+j",
    "command": "cursorWordStartLeft",
    "when": "editorTextFocus"
  },
  // Select while moving cursor to start/end of word
  {
    "key": "alt+ctrl+shift+l",
    "command": "cursorWordEndRightSelect",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+ctrl+shift+j",
    "command": "cursorWordStartLeftSelect",
    "when": "editorTextFocus"
  },
  // Move marked/current line up/down
  {
    "key": "alt+ctrl+k",
    "command": "editor.action.moveLinesDownAction",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+ctrl+i",
    "command": "editor.action.moveLinesUpAction",
    "when": "editorTextFocus"
  },
  // Insert cursor above/below current line
  {
    "key": "alt+ctrl+shift+i",
    "command": "editor.action.insertCursorAbove",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+ctrl+shift+k",
    "command": "editor.action.insertCursorBelow",
    "when": "editorTextFocus"
  },
  // Move cursor to start/end of line
  {
    "key": "alt+o",
    "command": "cursorEnd",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+u",
    "command": "cursorHome",
    "when": "editorTextFocus"
  },
  // Select characters from cursor to start/end of line
  {
    "key": "alt+shift+o",
    "command": "cursorEndSelect",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+shift+u",
    "command": "cursorHomeSelect",
    "when": "editorTextFocus"
  },
  // Focus on previous/next editor group
  {
    "key": "ctrl+j",
    "command": "workbench.action.focusNextGroup"
  },
  {
    "key": "ctrl+l",
    "command": "workbench.action.focusPreviousGroup"
  },
  // Previous/Next editor in group
  {
    "key": "ctrl+shift+j",
    "command": "workbench.action.previousEditorInGroup"
  },
  {
    "key": "ctrl+shift+l",
    "command": "workbench.action.nextEditorInGroup"
  },
  // Move current editor to previous/next group
  {
    "key": "ctrl+o",
    "command": "workbench.action.moveEditorToNextGroup"
  },
  {
    "key": "ctrl+u",
    "command": "workbench.action.moveEditorToPreviousGroup"
  },
  // Terminal toggle
  {
    "key": "ctrl+`",
    "command": "workbench.action.terminal.focus"
  },
  {
    "key": "ctrl+`",
    "command": "workbench.action.focusActiveEditorGroup",
    "when": "terminalFocus"
  }
]