VIM configuration in VSCode.

1. Vimsual Studio Code

This is my VIM configuration in VSCode.

Please copy and paste the settings according to the file name.

You will be able to modify the keyboard shortcuts according to your preference.

The settings.json and keybindings.json files have comments for each action, which will allow you to quickly identify what you want to do and modify the shortcut to your preference.

Extensions

astro-build.astro-vscode
usernamehw.errorlens
dbaeumer.vscode-eslint
GitHub.copilot
kisstkondoros.vscode-gutter-preview
wix.vscode-import-cost
miguelsolorio.symbols
bradlc.vscode-tailwindcss
vscodevim.vim

keybindings.json

[
  // toggle sidebar
  {
    "key": "z e",
    "command": "runCommands",
    "args": {
      "commands": [
        "workbench.action.toggleSidebarVisibility",
        "workbench.files.action.focusFilesExplorer"
      ]
    },
    "when": "vim.mode == 'Normal' && !sideBarVisible"
  },
  {
    "key": "z e",
    "command": "workbench.action.closeSidebar",
    "when": "sideBarVisible && !inputFocus || sideBarVisible && editorFocus"
  },
  // toggle activity bar
  {
    "key": "ctrl+b",
    "command": "-workbench.action.toggleSidebarVisibility"
  },
  {
    "key": "ctrl+b",
    "command": "workbench.action.toggleActivityBarVisibility"
  },
  // open file and close sidebar
  {
    "key": "enter",
    "when": "sideBarVisible && !explorerResourceIsFolder && !editorFocus",
    "command": "runCommands",
    "args": {
      "commands": [
        "explorer.openAndPassFocus",
        "workbench.action.closeSidebar"
      ]
    }
  },
  {
    "key": "space",
    "when": "sideBarVisible && !explorerResourceIsFolder && !editorFocus",
    "command": "runCommands",
    "args": {
      "commands": [
        "explorer.openAndPassFocus",
        "workbench.action.closeSidebar"
      ]
    }
  },
  // create file
  {
    "key": "a",
    "command": "explorer.newFile",
    "when": "!inputFocus && filesExplorerFocus"
  },
  // create folder
  {
    "key": "shift+a",
    "command": "explorer.newFolder",
    "when": "!inputFocus && filesExplorerFocus"
  },
  // rename file or folder
  {
    "key": "r",
    "command": "renameFile",
    "when": "!inputFocus && filesExplorerFocus"
  },
  // delete file or folder
  {
    "key": "d",
    "command": "deleteFile",
    "when": "!inputFocus && filesExplorerFocus"
  },
  // save current editor
  {
    "key": "z w",
    "command": "workbench.action.files.save",
    "when": "vim.mode == 'Normal'"
  },
  // close current editor
  {
    "key": "z q",
    "command": "workbench.action.closeActiveEditor",
    "when": "vim.mode == 'Normal'",
  },
  // next editor
  {
    "key": "tab",
    "command": "workbench.action.nextEditor",
    "when": "vim.mode == 'Normal'",
  },
  // prev editor
  {
    "key": "shift+tab",
    "command": "workbench.action.previousEditor",
    "when": "vim.mode == 'Normal'",
  },
  // toggle terminal
  {
    "key": "z t",
    "command": "workbench.action.terminal.toggleTerminal",
    "when": "vim.mode == 'Normal'",
  },
  // move the cursor by each display line with word wrapping
  {
    "key": "up",
    "command": "cursorUp",
    "when": "editorTextFocus && vim.active && !inDebugRepl && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
  },
  {
    "key": "down",
    "command": "cursorDown",
    "when": "editorTextFocus && vim.active && !inDebugRepl && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
  },
  {
    "key": "k",
    "command": "cursorUp",
    "when": "editorTextFocus && vim.active && !inDebugRepl && vim.mode == 'Normal' && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
  },
  {
    "key": "j",
    "command": "cursorDown",
    "when": "editorTextFocus && vim.active && !inDebugRepl && vim.mode == 'Normal' && !suggestWidgetMultipleSuggestions && !suggestWidgetVisible"
  },
  // split editor
  {
    "key": "s v",
    "command": "workbench.action.splitEditor",
    "when": "vim.mode == 'Normal' && editorTextFocus",
  },
  // new tab
  {
    "key": "t e",
    "command": "workbench.action.files.newUntitledFile",
    "when": "vim.mode == 'Normal' && editorTextFocus",
  },
  // in file explorer collapse all
  {
    "key": "shift+w",
    "command": "workbench.files.action.collapseExplorerFolders",
    "when": "filesExplorerFocus && !inputFocus && sideBarVisible",
  },
  // close all project
  {
    "key": "ctrl+delete ctrl+delete",
    "command": "workbench.action.closeFolder",
    "when": "vim.mode == 'Normal'",
  },
]

settings.json

{
    "workbench.startupEditor": "none",
    "editor.tabSize": 2,
    "editor.fontFamily": "'Cascadia Code', Consolas, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "window.menuBarVisibility": "toggle",
    "editor.bracketPairColorization.enabled": true,
    "editor.minimap.enabled": false,
    "editor.wordWrap": "on",
    "editor.linkedEditing": true,
    "explorer.compactFolders": false,
    "javascript.suggest.autoImports": true,
    "typescript.suggest.autoImports": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "typescript.updateImportsOnFileMove.enabled": "always",
    "eslint.format.enable": true,
    "vim.useCtrlKeys": true,
    "vim.useSystemClipboard": true,
    "vim.surround": true,
    "vim.handleKeys": {
        "<C-s>": false,
        "<C-a>": false,
        "<C-f>": false,
        "<C-d>": false,
        "<C-c>": false,
        "<C-v>": false,
        "<C-k>": false,
    },
    "vim.visualModeKeyBindings": [
        {
            "before": [
                ">"
            ],
            "commands": [
                "editor.action.indentLines"
            ]
        },
        {
            "before": [
                "<"
            ],
            "commands": [
                "editor.action.outdentLines"
            ]
        },
    ],
    "[javascriptreact]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "editor.inlineSuggest.enabled": true,
    "workbench.sideBar.location": "right",
    "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
    "workbench.iconTheme": "symbols",
    "symbols.hidesExplorerArrows": false,
    "[typescriptreact]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "breadcrumbs.enabled": false,
    "editor.renderWhitespace": "none",
    "editor.renderControlCharacters": false,
    "explorer.confirmDelete": false,
    "security.workspace.trust.untrustedFiles": "open",
    "editor.defaultColorDecorators": true,
    "window.zoomLevel": 1,
    "editor.formatOnSave": true,
    "workbench.activityBar.visible": false
}

Snippet - css.json

{
  "Reset Css": {
    "prefix": "reset",
    "body": [
      "html {",
      "  box-sizing: border-box;",
      "  font-size: 62.5%;",
      "  scroll-behavior: smooth;",
      "}",
      "",
      "*, *::before, *::after {",
      "  box-sizing: inherit;",
      "  padding: 0;",
      "  margin: 0;",
      "}",
      "",
      "html,",
      "body {",
      "  padding: 0;",
      "  margin: 0;",
      "  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,",
      "    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;",
      "}"
    ],
    "description": "Reset Css"
  },
  "mediaQuery": {
    "prefix": ":mq",
    "body": [
      "@media ($1-width: $2px) {",
      "  $0",
      "}"
    ],
    "description": "mediaQuery"
  }
}

Snippet - javascript.json

{
  "Console.log": {
    "prefix": "clg",
    "body": [
      "console.log($0)"
    ],
    "description": "Console.log"
  }
}

Snippet - javascriptreact.json

{
  "React Function Component": {
    "prefix": "rfce",
    "body": [
      "export default function $1 () {",
      "  return (",
      "    $2",
      "  )",
      "}",
      "",
      ""
    ],
    "description": "React Function Component"
  },
  "React Arrow Function Component": {
    "prefix": "rafce",
    "body": [
      "const $1 = () => {",
      "  return (",
      "    $0",
      "  )",
      "}",
      "",
      "export default $1",
      "",
      ""
    ],
    "description": "React Arrow Function Component"
  },
  "Console.log": {
    "prefix": "clg",
    "body": [
      "console.log($0)"
    ],
    "description": "Console.log"
  }
}

Snippet - typescriptreact.json

{
  "Console.log": {
    "prefix": "clg",
    "body": [
      "console.log($0)"
    ],
    "description": "Console.log"
  },
  "React Function Component": {
    "prefix": "rfce",
    "body": [
      "export default function $1 () {",
      "  return (",
      "    $2",
      "  )",
      "}",
      "",
      ""
    ],
    "description": "React Function Component"
  },
  "React Arrow Function Component": {
    "prefix": "rafce",
    "body": [
      "import { FC } from 'react'",
      "",
      "export interface $1Props {$2}",
      "",
      "export const $1: FC<$1Props> = ($3) => {",
      "  return (",
      "    $4",
      "  )",
      "}",
      "",
      "export default $1"
    ],
    "description": "React Arrow Function Component"
  }
}