My Essential VSCode Configurations: Shortcuts, Extensions, and Settings
Visual Studio Code (VSCode) has become my go-to code editor, and for good reason. Its flexibility, rich extension ecosystem, and customizable settings allow me to tailor my development environment to suit my workflow perfectly. In this article, I’ll share my favorite keyboard shortcuts, essential extensions, and the settings I rely on every day to maximize my productivity.
Keyboard Shortcuts
Efficient navigation and editing can significantly enhance your coding experience. Here is key keybindings.json file:
[
{
"key": "ctrl+shift+m",
"command": "-editor.action.toggleTabFocusMode"
},
{
"key": "ctrl+shift+m",
"command": "workbench.action.mergeAllWindowTabs"
},
{
"key": "ctrl+a",
"command": "-extension.vim_ctrl+a",
"when": "editorTextFocus && vim.active && vim.use<C-a> && !inDebugRepl"
},
{
"key": "ctrl+a",
"command": "-cursorLineStart",
"when": "textInputFocus"
},
{
"key": "ctrl+cmd+l",
"command": "workbench.action.showNextWindowTab"
},
{
"key": "ctrl+cmd+h",
"command": "workbench.action.showPreviousWindowTab"
},
{
"key": "ctrl+a ctrl+b",
"command": "workbench.action.toggleActivityBarVisibility"
},
{
"key": "ctrl+n",
"command": "selectNextSuggestion",
"when": "editorTextFocus && suggestWidgetMultipleSuggestions && suggestWidgetVisible"
},
{
"key": "ctrl+p",
"command": "selectPrevSuggestion",
"when": "editorTextFocus && suggestWidgetMultipleSuggestions && suggestWidgetVisible"
},
{
"key": "ctrl+alt+n",
"command": "workbench.files.action.createFileFromExplorer"
},
{
"key": "ctrl+shift+n",
"command": "-workbench.action.newWindow"
},
{
"key": "ctrl+shift+i",
"command": "-workbench.action.toggleDevTools",
"when": "isDevelopment"
},
{
"key": "ctrl+shift+i",
"command": "editor.action.formatDocument",
"when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly && !inCompositeEditor"
},
{
"key": "shift+alt+f",
"command": "-editor.action.formatDocument",
"when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly && !inCompositeEditor"
},
{
"key": "f2",
"command": "renameFile",
"when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
},
{
"key": "enter",
"command": "-renameFile",
"when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
},
{
"key": "enter",
"command": "-acceptRenameInput",
"when": "editorFocus && renameInputVisible && !isComposing"
},
{
"key": "f2",
"command": "renameFile",
"when": "filesExplorerFocus && foldersViewVisible && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
},
{
"key": "enter",
"command": "-renameFile",
"when": "filesExplorerFocus && foldersViewVisible && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
},
{
"key": "cmd+p",
"command": "workbench.action.quickOpen"
},
{
"key": "ctrl+tab",
"command": "-workbench.action.quickOpenPreviousRecentlyUsedEditorInGroup",
"when": "!activeEditorGroupEmpty"
},
{
"key": "ctrl+tab",
"command": "-workbench.action.quickOpenNavigateNextInEditorPicker",
"when": "inEditorsPicker && inQuickOpen"
},
{
"key": "ctrl+shift+tab",
"command": "-workbench.action.quickOpenLeastRecentlyUsedEditorInGroup",
"when": "!activeEditorGroupEmpty"
},
{
"key": "ctrl+shift+tab",
"command": "-workbench.action.quickOpenNavigatePreviousInEditorPicker",
"when": "inEditorsPicker && inQuickOpen"
},
{
"key": "ctrl+shift+tab",
"command": "workbench.action.previousEditor"
},
{
"key": "shift+cmd+[",
"command": "-workbench.action.previousEditor"
},
{
"key": "ctrl+tab",
"command": "workbench.action.nextEditor"
},
{
"key": "shift+cmd+]",
"command": "-workbench.action.nextEditor"
},
{
"key": "ctrl+e",
"command": "-cursorLineEnd",
"when": "textInputFocus"
},
{
"key": "ctrl+e",
"command": "-extension.vim_ctrl+e",
"when": "editorTextFocus && vim.active && vim.use<C-e> && !inDebugRepl"
},
{
"key": "ctrl+shift+f5",
"command": "workbench.action.debug.restart",
"when": "inDebugMode"
},
{
"key": "shift+cmd+f5",
"command": "-workbench.action.debug.restart",
"when": "inDebugMode"
},
{
"key": "ctrl+shift+f5",
"command": "dart.rerunLastDebugSession",
"when": "dart-code:anyProjectLoaded && dart-code:hasLastDebugConfig && !inDebugMode"
},
{
"key": "shift+cmd+f5",
"command": "-dart.rerunLastDebugSession",
"when": "dart-code:anyProjectLoaded && dart-code:hasLastDebugConfig && !inDebugMode"
},
{
"key": "ctrl+f",
"command": "actions.find",
"when": "editorFocus || editorIsOpen"
},
{
"key": "cmd+f",
"command": "-actions.find",
"when": "editorFocus || editorIsOpen"
},
{
"key": "ctrl+f f",
"command": "settings.action.search",
"when": "inSettingsEditor"
},
{
"key": "cmd+f",
"command": "-settings.action.search",
"when": "inSettingsEditor"
},
{
"key": "ctrl+f",
"command": "repl.action.filter",
"when": "inDebugRepl && textInputFocus"
},
{
"key": "cmd+f",
"command": "-repl.action.filter",
"when": "inDebugRepl && textInputFocus"
},
{
"key": "ctrl+f",
"command": "workbench.action.terminal.focusFind",
"when": "terminalFindFocused && terminalHasBeenCreated || terminalFindFocused && terminalProcessSupported || terminalFocus && terminalHasBeenCreated || terminalFocus && terminalProcessSupported"
},
{
"key": "cmd+f",
"command": "-workbench.action.terminal.focusFind",
"when": "terminalFindFocused && terminalHasBeenCreated || terminalFindFocused && terminalProcessSupported || terminalFocus && terminalHasBeenCreated || terminalFocus && terminalProcessSupported"
},
{
"key": "ctrl+f",
"command": "editor.action.extensioneditor.showfind",
"when": "!editorFocus && activeEditor == 'workbench.editor.extension'"
},
{
"key": "cmd+f",
"command": "-editor.action.extensioneditor.showfind",
"when": "!editorFocus && activeEditor == 'workbench.editor.extension'"
},
{
"key": "ctrl+f",
"command": "editor.action.webvieweditor.showFind",
"when": "webviewFindWidgetEnabled && !editorFocus && activeEditor == 'WebviewEditor'"
},
{
"key": "cmd+f",
"command": "-editor.action.webvieweditor.showFind",
"when": "webviewFindWidgetEnabled && !editorFocus && activeEditor == 'WebviewEditor'"
},
{
"key": "ctrl+e",
"command": "workbench.view.explorer",
"when": "viewContainer.workbench.view.explorer.enabled"
},
{
"key": "shift+cmd+e",
"command": "-workbench.view.explorer",
"when": "viewContainer.workbench.view.explorer.enabled"
},
{
"key": "ctrl+shift+h",
"command": "workbench.action.replaceInFiles"
},
{
"key": "shift+cmd+h",
"command": "-workbench.action.replaceInFiles"
},
{
"key": "ctrl+shift+f",
"command": "workbench.action.findInFiles"
},
{
"key": "shift+cmd+f",
"command": "-workbench.action.findInFiles"
},
{
"key": "ctrl+shift+d",
"command": "workbench.view.debug",
"when": "viewContainer.workbench.view.debug.enabled"
},
{
"key": "shift+cmd+d",
"command": "-workbench.view.debug",
"when": "viewContainer.workbench.view.debug.enabled"
},
{
"key": "cmd+down",
"command": "-workbench.action.terminal.focus",
"when": "accessibilityModeEnabled && accessibleViewOnLastLine && terminalHasBeenCreated && accessibleViewCurrentProviderId == 'terminal' || accessibilityModeEnabled && accessibleViewOnLastLine && terminalProcessSupported && accessibleViewCurrentProviderId == 'terminal'"
},
{
"key": "ctrl+k",
"command": "workbench.action.togglePanel"
},
{
"key": "ctrl+k",
"command": "list.focusUp",
"when": "listFocus && !inputFocus"
},
{
"key": "cmd+j",
"command": "-workbench.action.togglePanel"
},
{
"key": "ctrl+shift+w",
"command": "workbench.action.terminal.kill"
},
{
"key": "ctrl+j",
"command": "list.focusDown",
"when": "listFocus && !inputFocus"
},
{
"key": "ctrl+`",
"command": "-workbench.action.terminal.toggleTerminal",
"when": "terminal.active"
},
{
"key": "ctrl+j",
"command": "workbench.action.terminal.focus"
},
{
"key": "ctrl+j",
"command": "workbench.action.focusActiveEditorGroup",
"when": "terminalFocus"
},
{
"key": "tab",
"command": "-extension.vim_tab",
"when": "editorTextFocus && vim.active && !inDebugRepl && vim.mode != 'Insert'"
},
{
"key": "ctrl+shift+l",
"command": "editor.action.formatDocument",
"when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly && !inCompositeEditor"
},
{
"key": "ctrl+shift+space",
"command": "workbench.view.extension.flutter"
},
{
"key": "cmd+m",
"command": "workbench.action.toggleZenMode",
"when": "!isAuxiliaryWindowFocusedContext"
},
{
"key": "cmd+k z",
"command": "-workbench.action.toggleZenMode",
"when": "!isAuxiliaryWindowFocusedContext"
},
{
"key": "ctrl+l",
"command": "workbench.debug.panel.action.clearReplAction"
},
{
"key": "ctrl+cmd+w",
"command": "editor.debug.action.selectionToWatch"
},
{
"key": "f4",
"command": "-references-view.next",
"when": "reference-list.hasResult && references-view.canNavigate"
},
{
"key": "f4",
"command": "-search.action.focusNextSearchResult",
"when": "hasSearchResult || inSearchEditor"
},
{
"key": "f4",
"command": "-goToNextReference",
"when": "inReferenceSearchEditor || referenceSearchVisible"
},
{
"key": "ctrl+cmd+f",
"command": "workbench.action.quickTextSearch"
},
{
"key": "ctrl+alt+f",
"command": "workbench.action.toggleFullScreen",
"when": "!isIOS"
},
{
"key": "ctrl+cmd+f",
"command": "-workbench.action.toggleFullScreen",
"when": "!isIOS"
},
{
"key": "cmd+p",
"command": "workbench.action.quickOpenSelectPrevious",
"when": "inQuickOpen"
},
{
"key": "ctrl+p",
"command": "-workbench.action.quickOpenSelectPrevious",
"when": "inQuickOpen"
},
{
"key": "ctrl+p",
"command": "cursorUp",
"when": "textInputFocus"
},
{
"key": "ctrl+p",
"command": "-cursorUp",
"when": "textInputFocus"
},
{
"key": "ctrl+p",
"command": "extension.vim_ctrl+p",
"when": "editorTextFocus && vim.active && vim.use<C-p> && !inDebugRepl || vim.active && vim.use<C-p> && !inDebugRepl && vim.mode == 'CommandlineInProgress' || vim.active && vim.use<C-p> && !inDebugRepl && vim.mode == 'SearchInProgressMode'"
},
{
"key": "ctrl+p",
"command": "-extension.vim_ctrl+p",
"when": "editorTextFocus && vim.active && vim.use<C-p> && !inDebugRepl || vim.active && vim.use<C-p> && !inDebugRepl && vim.mode == 'CommandlineInProgress' || vim.active && vim.use<C-p> && !inDebugRepl && vim.mode == 'SearchInProgressMode'"
},
{
"key": "ctrl+p",
"command": "list.focusUp",
"when": "listFocus && !inputFocus && !treestickyScrollFocused"
},
{
"key": "ctrl+p",
"command": "-list.focusUp",
"when": "listFocus && !inputFocus && !treestickyScrollFocused"
},
{
"key": "ctrl+p",
"command": "workbench.action.quickOpenNavigateNextInFilePicker",
"when": "inFilesPicker && inQuickOpen"
},
{
"key": "cmd+p",
"command": "-workbench.action.quickOpenNavigateNextInFilePicker",
"when": "inFilesPicker && inQuickOpen"
},
{
"key": "ctrl+g ctrl+i",
"command": "workbench.view.extension.gitlensInspect"
},
{
"key": "ctrl+a ctrl+s",
"command": "workbench.action.toggleStatusbarVisibility"
},
{
"key": "ctrl+b",
"command": "-extension.vim_ctrl+b",
"when": "editorTextFocus && vim.active && vim.use<C-b> && !inDebugRepl && vim.mode != 'Insert'"
},
{
"key": "ctrl+b",
"command": "-cursorLeft",
"when": "textInputFocus"
},
{
"key": "alt+cmd+k",
"command": "bookmarks.jumpToPrevious",
"when": "editorTextFocus"
},
{
"key": "alt+cmd+j",
"command": "-bookmarks.jumpToPrevious",
"when": "editorTextFocus"
},
{
"key": "shift+alt+j",
"command": "-bookmarks.expandSelectionToPrevious",
"when": "editorTextFocus"
},
{
"key": "alt+cmd+b",
"command": "-workbench.action.toggleAuxiliaryBar"
},
{
"key": "alt+cmd+b",
"command": "bookmarks.toggle",
"when": "editorTextFocus"
},
{
"key": "alt+cmd+k",
"command": "-bookmarks.toggle",
"when": "editorTextFocus"
},
{
"key": "alt+cmd+k",
"command": "-keybindings.editor.recordSearchKeys",
"when": "inKeybindings && inKeybindingsSearch"
},
{
"key": "alt+cmd+j",
"command": "bookmarks.jumpToNext",
"when": "editorTextFocus"
},
{
"key": "alt+cmd+l",
"command": "-bookmarks.jumpToNext",
"when": "editorTextFocus"
}
]
My VSCode User Settings
To optimize my workflow further, I’ve customized a few settings. Here is the contents of my vscode's profile's settings.json:
{
"editor.fontSize": 15,
"terminal.integrated.fontSize": 14,
"editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true,
"window.commandCenter": false,
"workbench.layoutControl.enabled": false,
//Auto add fixes on save
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": "explicit",
"source.fixAll.eslint": "explicit"
},
"[dart]": {
"editor.formatOnSave": false,
"editor.formatOnType": false,
"editor.rulers": [80],
"editor.selectionHighlight": false,
"editor.suggestSelection": "first",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": "off",
"editor.suggest.snippetsPreventQuickSuggestions": false
},
// Newly added
//Nesting of similar files
"explorer.fileNesting.patterns": {
"*.dart": "$(capture).g.dart, $(capture).freezed.dart"
},
"files.autoSave": "onFocusChange",
"vim.easymotion": true,
"vim.incsearch": true,
"vim.useSystemClipboard": true,
"vim.useCtrlKeys": true,
"vim.hlsearch": true,
"vim.leader": "<space>",
"workbench.list.smoothScrolling": true,
"debug.console.fontSize": 16,
"editor.cursorSmoothCaretAnimation": "on",
"workbench.colorTheme": "Darcula",
"workbench.colorCustomizations": {
"statusBar.background": "#007acc",
"statusBar.noFolderBackground": "#007acc",
"statusBar.debuggingBackground": "#007acc",
"activityBar.background": "#1e282d",
"activityBar.activeBorder": "#e74c3c",
"activityBar.foreground": "#ffffff",
"activityBar.inactiveForeground": "#ffffff99",
"activityBarBadge.background": "#e74c3c",
"activityBarBadge.foreground": "#ffffff",
"activityBar.activeBackground": "#2c3e50",
"sash.hoverBorder": "#2c3e50",
"statusBar.foreground": "#ffffff",
"statusBarItem.hoverBackground": "#2c3e50",
"statusBarItem.remoteBackground": "#1abc9c",
"statusBarItem.remoteForeground": "#ffffff",
"titleBar.activeBackground": "#1abc9c",
"titleBar.activeForeground": "#ffffff",
"titleBar.inactiveBackground": "#1abc9c99",
"titleBar.inactiveForeground": "#ffffff99",
"editor.lineHighlightBackground": "#1073cf2d",
"editor.lineHighlightBorder": "#9fced11f",
"editorUnnecessaryCode.border": "#dd7aab"
},
"editor.accessibilitySupport": "off",
"Codegeex.Privacy": false,
"explorer.fileNesting.enabled": true,
"dartimportsorter.leaveEmptyLinesBetweenGroups": false,
"dartimportsorter.sortOnSave": true,
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.iconTheme": "material-icon-theme",
"editor.stickyScroll.enabled": true,
"dart.flutterSdkPath": null,
"dart.flutterSdkPaths": [
"/Users/sukarki/development/flutter/bin/flutter",
"/Users/sukarki/fvm/versions/",
"/Users/sukarki/development/flutter3.7/bin/flutter"
],
"dart.debugExternalPackageLibraries": false,
"dart.debugSdkLibraries": false,
"workbench.startupEditor": "none",
"search.useGlobalIgnoreFiles": true,
"terminal.integrated.gpuAcceleration": "on",
"explorer.confirmDragAndDrop": false,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.sideBar.location": "right",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"search.exclude": {
"**/.dart_tool": true,
"**/build": true,
"**/ios/**": true
},
"search.followSymlinks": false,
"files.exclude": {
"**/ios/.symlinks/**": true
},
"[yaml]": {
"editor.defaultFormatter": "redhat.vscode-yaml"
},
"explorer.confirmDelete": false,
"diffEditor.maxComputationTime": 0,
"editor.bracketPairColorization.enabled": true,
"editor.bracketPairColorization.independentColorPoolPerBracketType": true,
"editor.language.colorizedBracketPairs": [],
"editor.guides.bracketPairs": true,
"git.openRepositoryInParentFolders": "never",
"dart.showTodos": true,
"workbench.editor.limit.excludeDirty": true,
"bookmarks.label.suggestion": "useWhenSelected" // don't forget the comma
}
My VSCode Application Settings
I also have customize my vscode's user settings file to change the vim's configs. Here is the contents of my vscode's user settings.json.
{
"window.nativeTabs": true,
"vim.insertModeKeyBindings": [
{
"before": ["j", "j"],
"after": ["<Esc>"]
}
],
"vim.normalModeKeyBindingsNonRecursive": [
{
"before": ["<leader>", "d"],
"after": ["d", "d"]
},
{
"before": ["<C-n>"],
"commands": [":nohl"]
},
{
"before": ["<leader>", "w"],
"commands": ["workbench.action.splitEditor"]
},
{
"before": ["<leader>", "e"],
"commands": ["workbench.action.toggleSidebarVisibility"]
},
{
"before": ["<leader>", "f"],
"commands": ["revealInExplorer"]
},
{
"before": ["<leader>", "h"],
"after": ["_"]
},
{
"before": ["<leader>", "l"],
"after": ["$"]
},
{
"before": ["s"],
"after": ["leader", "leader"]
}
// //TODO: FROM HERE
// {
// "before": ["d"],
// "after": ["\"", "_", "d"]
// },
// {
// "before": ["D"],
// "after": ["\"", "_", "D"]
// },
// {
// "before": ["d", "d"],
// "after": ["\"", "_", "d", "d"]
// },
// {
// "before": ["<BS>"],
// "after": ["\"", "_", "d"]
// }
],
// "vim.normalModeKeyBindings": [
// {
// "before": ["d"],
// "after": ["\"", "_", "d"]
// },
// {
// "before": ["D"],
// "after": ["\"", "_", "D"]
// },
// {
// "before": ["d", "d"],
// "after": ["\"", "_", "d", "d"]
// }
// ],
// "vim.visualModeKeyBindingsNonRecursive": [
// {
// "before": ["d"],
// "after": ["\"", "_", "d"]
// },
// {
// "before": ["D"],
// "after": ["\"", "_", "D"]
// },
// {
// "before": ["d", "d"],
// "after": ["\"", "_", "d", "d"]
// },
// {
// "before": ["<BS>"],
// "after": ["\"", "_", "d"]
// }
// ],
"security.workspace.trust.untrustedFiles": "open",
"window.restoreFullscreen": true,
"window.newWindowDimensions": "maximized",
"codeSight.telemetry.enablement": false,
"bookmarks.gutterIconFillColor": "#fbe015",
"bookmarks.gutterIconBorderColor": "#fbe015"
}
May the code be with you! Thanks for joining us on this coding journey.