{"id":26521,"date":"2016-05-26T23:01:38","date_gmt":"2016-05-26T15:01:38","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26521"},"modified":"2024-03-09T00:44:31","modified_gmt":"2024-03-08T16:44:31","slug":"key-binding-management-visual-studio-code","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/","title":{"rendered":"Boost Productivity with Visual Studio Code Key Bindings Management"},"content":{"rendered":"<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/\">Visual Studio Code<\/a>, Microsoft\u2019s lightweight <a href=\"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-extensions\/\">source code editor<\/a> introduces <strong>keyboard-only navigation<\/strong> that\u2019s not only an <strong>advanced accessibility feature,<\/strong> allowing users to navigate within the editor without a mouse, but also <strong>speeds up coding<\/strong>.<\/p>\n<p>In today\u2019s post, we\u2019ll delve into how to <strong>effectively manage key bindings<\/strong> in VS Code, have a look at a curated list of the <a href=\"https:\/\/www.hongkiat.com\/blog\/100-keyboard-shortcuts-windows\/\">most commonly used keyboard shortcuts<\/a>, and see an example on how you can create your own custom keys.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/\" class=\"ref-block__link\" title=\"Read More: How to Customize Visual Studio Code\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Customize Visual Studio Code<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/customizing-visual-studio-code.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-26485 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/customizing-visual-studio-code.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Customize Visual Studio Code<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tVisual Studio Code, Microsoft's new open-source code editor provides developers with many awesome features that significantly facilitate the...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Find Key Bindings Quickly<\/h2>\n<p>You don\u2019t necessarily need to learn keyboard shortcuts by heart right when you begin to use VS Code, as there are two easy ways to quickly find them.<\/p>\n<p>In the top menu bar, you can find the preset key binding next to every <strong>menu point<\/strong> (1), and the Command Palette (<span class=\"key\">F1<\/span>) also lists them next to each command (2).<\/p>\n<p>Visual Studio Code displays key bindings that <strong>match to your operating system<\/strong> by default (so on a Windows machine you\u2019ll see the Windows commands, on a Mac the Mac commands, and on a Linux box the Linux commands).<\/p>\n<p>If you don\u2019t mind to leave your code editor, you can also find the <strong>full list of preset key bindings<\/strong> in the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/customization\/keybindings\">VS Code Docs<\/a>.<\/p>\n<h2>Preset Key Bindings<\/h2>\n<p>Visual Studio Code provides developers with many key bindings, in the following list I curated those I\u2019ve used the most often while edited JavaScript files. You may find that others fit better to your own workflow, so it\u2019s also worth <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/customization\/keybindings\">browsing the full list<\/a> by yourself.<\/p>\n<p>All key bindings can be customized in VS Code, we will have a look at how to do that in the last part of this article.<\/p>\n<p>Now let\u2019s see <strong>36 frequently used keyboard shortcuts<\/strong>, respectively for the 3 main operating systems (Win, macOS, Linux), many of which may be familiar from other Microsoft softwares.<\/p>\n<h3>Navigation<\/h3>\n<table>\n<tr>\n<th>Description<\/th>\n<th>Windows<\/th>\n<th>Linux<\/th>\n<th>Mac<\/th>\n<\/tr>\n<tr>\n<td>Command Palette<\/td>\n<td colspan=\"3\"><span class=\"key\">F1<\/span> \u2013 Shows all commands or type a command<\/td>\n<\/tr>\n<tr>\n<td>Quick open, Go to file<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">P<\/span><\/td>\n<td><span class=\"key\">Cmd<\/span> + <span class=\"key\">P<\/span><\/td>\n<\/tr>\n<tr>\n<td>Show symbols in file<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">O<\/span><\/td>\n<td><span class=\"key\">Shift<\/span> + <span class=\"key\">Cmd<\/span> + <span class=\"key\">O<\/span><\/td>\n<\/tr>\n<tr>\n<td>Go to line<\/td>\n<td colspan=\"3\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">G<\/span> \u2013 Go to a specific line<\/td>\n<\/tr>\n<tr>\n<td>Show errors and warnings<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">M<\/span><\/td>\n<td><span class=\"key\">Shift<\/span> + <span class=\"key\">Cmd<\/span> + <span class=\"key\">M<\/span><\/td>\n<\/tr>\n<tr>\n<td>Go back<\/td>\n<td><span class=\"key\">Alt<\/span> + <span class=\"key\">Left<\/span><\/td>\n<td><span class=\"key\">Ctrl<\/span> + <span class=\"key\">Alt<\/span> + <span class=\"key\">\u2013<\/span><\/td>\n<td><span class=\"key\">Ctrl<\/span> + <span class=\"key\">\u2013<\/span><\/td>\n<\/tr>\n<tr>\n<td>Go forward<\/td>\n<td><span class=\"key\">Alt<\/span> + <span class=\"key\">Right<\/span><\/td>\n<td><span class=\"key\">Ctrl<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">\u2013<\/span><\/td>\n<td><span class=\"key\">Ctrl<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">\u2013<\/span><\/td>\n<\/tr>\n<tr>\n<td>Commands available<\/td>\n<td colspan=\"3\"><span class=\"key\">?<\/span> \u2013 Available commands inside Command Palette (<span class=\"key\">F1<\/span>)<\/td>\n<\/tr>\n<\/table>\n<h3>File and Editor Management<\/h3>\n<p>You can find the full list for this section in two different places in the VS Code Docs, in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/customization\/keybindings#_editorwindow-management\">Editor\/Window Management<\/a>, and in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/customization\/keybindings#_file-management\">File Management<\/a>.<\/p>\n<p>VS Code can open 3 editor panes at the same time, Commands #5 to #7 only work if more than one editor panes are open.<\/p>\n<table>\n<tr>\n<th>Description<\/th>\n<th>Windows<\/th>\n<th>Linux<\/th>\n<th>Mac<\/th>\n<\/tr>\n<tr>\n<td>New file<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">N<\/span><\/td>\n<td><span class=\"key\">Cmd<\/span> + <span class=\"key\">N<\/span><\/td>\n<\/tr>\n<tr>\n<td>Open file<\/td>\n<td colspan=\"3\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">O<\/span><\/td>\n<\/tr>\n<tr>\n<td>Save<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">S<\/span><\/td>\n<td><span class=\"key\">Cmd<\/span> + <span class=\"key\">S<\/span><\/td>\n<\/tr>\n<tr>\n<td>Split editor<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">\\<\/span><\/td>\n<td><span class=\"key\">Cmd<\/span> + <span class=\"key\">\\<\/span><\/td>\n<\/tr>\n<tr>\n<td>Focus into the first editor pane<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">1<\/span><\/td>\n<td><span class=\"key\">Cmd<\/span> + <span class=\"key\">1<\/span><\/td>\n<\/tr>\n<tr>\n<td>Focus into the second editor pane<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">2<\/span><\/td>\n<td><span class=\"key\">Cmd<\/span> + <span class=\"key\">2<\/span><\/td>\n<\/tr>\n<tr>\n<td>Focus into the third editor pane<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">3<\/span><\/td>\n<td><span class=\"key\">Cmd<\/span> + <span class=\"key\">3<\/span><\/td>\n<\/tr>\n<\/table>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/key-binding-management-visual-studio-code\/vs-code-editor-panes.jpg\" alt=\"Visual Studio Code Editor Panes\" width=\"700\" height=\"335\"><\/figure>\n<h3>Basic Editing<\/h3>\n<p>To make the key bindings below work, you don\u2019t have to highlight the whole line, it\u2019s enough to navigate the cursor anywhere in the line you want to edit.<\/p>\n<table>\n<tr>\n<th>Description<\/th>\n<th>Windows<\/th>\n<th>Linux<\/th>\n<th>Mac<\/th>\n<\/tr>\n<tr>\n<td>Cut line<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">X<\/span><\/td>\n<td><span class=\"key\">Cmd<\/span> + <span class=\"key\">X<\/span><\/td>\n<\/tr>\n<tr>\n<td>Copy line<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">C<\/span><\/td>\n<td><span class=\"key\">Cmd<\/span> + <span class=\"key\">C<\/span><\/td>\n<\/tr>\n<tr>\n<td>Delete line<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">K<\/span><\/td>\n<td><span class=\"key\">Shift<\/span> + <span class=\"key\">Cmd<\/span> + <span class=\"key\">K<\/span><\/td>\n<\/tr>\n<tr>\n<td>Move line down<\/td>\n<td colspan=\"2\"><span class=\"key\">Alt<\/span> + <span class=\"key\">Down<\/span><\/td>\n<td><span class=\"key\">Option<\/span> + <span class=\"key\">Down<\/span><\/td>\n<\/tr>\n<tr>\n<td>Move line up<\/td>\n<td colspan=\"2\"><span class=\"key\">Alt<\/span> + <span class=\"key\">Up<\/span><\/td>\n<td><span class=\"key\">Option<\/span> + <span class=\"key\">Up<\/span><\/td>\n<\/tr>\n<tr>\n<td>Select current line<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">I<\/span><\/td>\n<td><span class=\"key\">Cmd<\/span> + <span class=\"key\">I<\/span><\/td>\n<\/tr>\n<tr>\n<td>Indent line<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">]<\/span><\/td>\n<td><span class=\"key\">Cmd<\/span> + <span class=\"key\">]<\/span><\/td>\n<\/tr>\n<tr>\n<td>Outdent line<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">[<\/span><\/td>\n<td><span class=\"key\">Cmd<\/span> + <span class=\"key\">[<\/span><\/td>\n<\/tr>\n<\/table>\n<h3>Rich Languages Editing<\/h3>\n<p>As of May 2016, VS Code has built-in rich editing support for <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/Docs\/languages\/javascript\">JavaScript<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/languages\/typescript\">TypeScript<\/a>, but you can download language support extensions for many other languages from the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/marketplace.visualstudio.com\/\">VS Code Marketplace<\/a>.<\/p>\n<p>Here in the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/languages\/overview\">Docs<\/a> you can check out the options you have for the language you want to use. Note that as VS Code is still in its early days, rich editing support may come for other languages as well.<\/p>\n<table>\n<tr>\n<th>Description<\/th>\n<th>Windows<\/th>\n<th>Linux<\/th>\n<th>Mac<\/th>\n<\/tr>\n<tr>\n<td>Trigger suggest<\/td>\n<td colspan=\"3\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">Space<\/span><\/td>\n<\/tr>\n<tr>\n<td>Trigger parameter hints<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">Space<\/span><\/td>\n<td><span class=\"key\">Shift<\/span> + <span class=\"key\">Cmd<\/span> + <span class=\"key\">Space<\/span><\/td>\n<\/tr>\n<tr>\n<td>Peek definition<\/td>\n<td><span class=\"key\">Alt<\/span> + <span class=\"key\">F12<\/span><\/td>\n<td><span class=\"key\">Ctrl<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">F10<\/span><\/td>\n<td><span class=\"key\">Option<\/span> + <span class=\"key\">F12<\/span><\/td>\n<\/tr>\n<tr>\n<td>Show references<\/td>\n<td colspan=\"3\"><span class=\"key\">Shift<\/span> + <span class=\"key\">F12<\/span><\/td>\n<\/tr>\n<tr>\n<td>Trim trailing whitespace<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">X<\/span><\/td>\n<td><span class=\"key\">Shift<\/span> + <span class=\"key\">Cmd<\/span> + <span class=\"key\">X<\/span><\/td>\n<\/tr>\n<\/table>\n<h3>Display<\/h3>\n<table>\n<tr>\n<th>Description<\/th>\n<th>Windows<\/th>\n<th>Linux<\/th>\n<th>Mac<\/th>\n<\/tr>\n<tr>\n<td>Toggle full screen<\/td>\n<td colspan=\"2\"><span class=\"key\">F11<\/span><\/td>\n<td><span class=\"key\">Ctrl<\/span> + <span class=\"key\">Cmd<\/span> + <span class=\"key\">F<\/span><\/td>\n<\/tr>\n<tr>\n<td>Zoom in<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">=<\/span><\/td>\n<td><span class=\"key\">Cmd<\/span> + <span class=\"key\">=<\/span><\/td>\n<\/tr>\n<tr>\n<td>Zoom out<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">\u2013<\/span><\/td>\n<td><span class=\"key\">Cmd<\/span> + <span class=\"key\">\u2013<\/span><\/td>\n<\/tr>\n<tr>\n<td>Toggle sidebar visibility<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">B<\/span><\/td>\n<td><span class=\"key\">Cmd<\/span> + <span class=\"key\">B<\/span><\/td>\n<\/tr>\n<tr>\n<td>Show Debug in left sidebar<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">D<\/span><\/td>\n<td><span class=\"key\">Shift<\/span> + <span class=\"key\">Cmd<\/span> + <span class=\"key\">D<\/span><\/td>\n<\/tr>\n<tr>\n<td>Show Explorer in left sidebar<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">E<\/span><\/td>\n<td><span class=\"key\">Shift<\/span> + <span class=\"key\">Cmd<\/span> + <span class=\"key\">E<\/span><\/td>\n<\/tr>\n<tr>\n<td>Show Git in the left sidebar<\/td>\n<td colspan=\"3\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">G<\/span><\/td>\n<\/tr>\n<tr>\n<td>Show Search in left sidebar<\/td>\n<td colspan=\"2\"><span class=\"key\">Ctrl<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">F<\/span><\/td>\n<td><span class=\"key\">Shift<\/span> + <span class=\"key\">Cmd<\/span> + <span class=\"key\">F<\/span><\/td>\n<\/tr>\n<\/table>\n<h2>How to Customize Key Bindings in VS Code<\/h2>\n<p>Customizing key bindings can be useful for three main things.<\/p>\n<p>Firstly, if you have already got used to certain keyboard shortcuts in a different code editor, you don\u2019t need to learn new ones.<\/p>\n<p>Secondly, some of the preset key bindings are just <strong>too hard to remember<\/strong>, for instance take the <span class=\"key\">Ctrl<\/span> + <span class=\"key\">K<\/span> + <span class=\"key\">F12<\/span> Windows shortcut for the command Open definition to the side.<\/p>\n<p>Thirdly, there are also <strong>unassigned key bindings<\/strong> in VS Code, such as Open User Settings, and Open Workspace Settings (find them <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/customization\/keybindings#_preferences\">here<\/a> in the Docs) you may want to use them.<\/p>\n<p>You can customize key bindings with the help of a <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.json.org\/\">JSON<\/a> format configuration file<\/strong>, in a way similar to how you can customize User and Workspace Settings. The file you need to edit is called <strong>keybindings.json<\/strong>, and you can open it by clicking on the File &gt; Preferences &gt; Keyboard Shortcuts menu in the top menu bar.<\/p>\n<p>When you click on it, VS Code opens <strong>two editor panes<\/strong> next to each other, one for the <strong>default keyboard shortcuts<\/strong> on the left, and one for your <strong>customized key bindings<\/strong> on the right.<\/p>\n<p>You don\u2019t have to do anything else, just copy-paste the keys from the left to the right maintaining the JSON format, and rewrite the key to the custom one.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/key-binding-management-visual-studio-code\/custom-key-bindings.jpg\" alt=\"Visual Studio Code Custom Key Bindings\" width=\"700\" height=\"373\"><\/figure>\n<p>Let\u2019s see a quick example. Say you want to easily access the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/customization\/keybindings#_extensions\">Show Installed Extensions<\/a> command that doesn\u2019t have an assigned key binding by default. In this case, it\u2019s not enough to only copy-paste from the left side to the right, as unassigned keys aren\u2019t included in the default list.<\/p>\n<p>You\u2019ll need to stick to <strong>the syntax key bindings follow<\/strong> in Visual Studio Code:<\/p>\n<pre>\r\n{\r\n  \"key\": \"\",\r\n  \"when\": \"\",\r\n  \"command\": \"\"\r\n}\r\n\r\n <\/pre>\n<p>Check out some <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/customization\/keybindings#_keyboard-rules\">real-life examples<\/a> on how to properly set keyboard rules. The when part is optional, you don\u2019t have to use it to set global key bindings, it\u2019s <strong>only used when a certain shortcut is bound to a certain screen or mode<\/strong>, such as in the case of inDebugMode.<\/p>\n<p>In our example, we will set <strong>a global key binding<\/strong>, which means we only have to set the values of \u201ckey\u201d and \u201ccommand\u201d in our custom keyboard rule.<\/p>\n<p>First, let\u2019s look up the command id that belongs to the Show Installed Extension command. We can easily do this <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/customization\/keybindings#_extensions\">in the docs<\/a>, that shows us that the command id we need is workbench.extensions.action.listExtensions.<\/p>\n<p>The other piece of data we need is the key. The custom key we will bind to the Show Installed Extension command <strong>cannot be used by any other key binding rules<\/strong>, and must follow the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/customization\/keybindings#_accepted-keys\">proper key syntax<\/a>, which means it needs to be made of a <strong>modifier<\/strong> (see the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/customization\/keybindings#_accepted-keys\">accepted modifiers by OS<\/a>), and the key itself.<\/p>\n<p>As I work on a Windows machine, I\u2019ll choose the <span class=\"key\">Ctrl<\/span> + <span class=\"key\">F6<\/span> key, as it meets every requirement, but you can choose any other key that suits your needs the best.<\/p>\n<p>My keybindings.json file will look like this:<\/p>\n<pre>\r\n[\r\n  {\r\n    \"key\": \"Ctrl + F6\",\r\n    \"command\": \"workbench.extensions.action.listExtensions\"\r\n  }\r\n]\r\n\r\n <\/pre>\n<p>The new rule takes effect at once, as Visual Studio Code <strong>updates the rules at runtime<\/strong>. You can test it without restarting the editor, you just need to press <span class=\"key\">Ctrl<\/span> + <span class=\"key\">F6<\/span>, or the key you chose, and a list of your installed extensions will pop up in your editor.<\/p>\n<p>In the screenshot below, you can see my testing results, on pressing <span class=\"key\">Ctrl<\/span> + <span class=\"key\">F6<\/span>, I got a list of the two extensions I currently have.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/key-binding-management-visual-studio-code\/installed-extensions.jpg\" alt=\"Visual Studio Code Installed Extensiions\" width=\"700\" height=\"371\"><\/figure>\n<p>You can add <strong>as many rules as you want<\/strong> to your keybindings.json file. Just follow the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.json.org\/\">regular JSON syntax<\/a>, which means you need to place each rule inside a pair of curly brackets, and separate them with a comma, as you can see below.<\/p>\n<pre>\r\n[\r\n  {\r\n    \"key\": \"Ctrl + F6\",\r\n    \"command\": \"workbench.extensions.action.listExtensions\"\r\n  },\r\n  {\r\n    \"key\": \"Shift + F6\",\r\n    \"command\": \"workbench.extensions.action.installExtension\"\r\n  }\r\n]\r\n <\/pre>","protected":false},"excerpt":{"rendered":"<p>Visual Studio Code, Microsoft\u2019s lightweight source code editor introduces keyboard-only navigation that\u2019s not only an advanced accessibility feature, allowing users to navigate within the editor without a mouse, but also speeds up coding. In today\u2019s post, we\u2019ll delve into how to effectively manage key bindings in VS Code, have a look at a curated list&hellip;<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[3029,2273,3772,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Boost Productivity with Visual Studio Code Key Bindings Management - Hongkiat<\/title>\n<meta name=\"description\" content=\"Visual Studio Code, Microsoft&#039;s lightweight source code editor introduces keyboard-only navigation that&#039;s not only an advanced accessibility feature,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Boost Productivity with Visual Studio Code Key Bindings Management\" \/>\n<meta property=\"og:description\" content=\"Visual Studio Code, Microsoft&#039;s lightweight source code editor introduces keyboard-only navigation that&#039;s not only an advanced accessibility feature,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-26T15:01:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-08T16:44:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/key-binding-management-visual-studio-code\/vs-code-editor-panes.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/key-binding-management-visual-studio-code\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/key-binding-management-visual-studio-code\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"Boost Productivity with Visual Studio Code Key Bindings Management\",\"datePublished\":\"2016-05-26T15:01:38+00:00\",\"dateModified\":\"2024-03-08T16:44:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/key-binding-management-visual-studio-code\\\/\"},\"wordCount\":1405,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/key-binding-management-visual-studio-code\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/key-binding-management-visual-studio-code\\\/vs-code-editor-panes.jpg\",\"keywords\":[\"Code Editors\",\"Keyboard Shortcuts\",\"visual studio code\",\"Web Developers\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/key-binding-management-visual-studio-code\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/key-binding-management-visual-studio-code\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/key-binding-management-visual-studio-code\\\/\",\"name\":\"Boost Productivity with Visual Studio Code Key Bindings Management - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/key-binding-management-visual-studio-code\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/key-binding-management-visual-studio-code\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/key-binding-management-visual-studio-code\\\/vs-code-editor-panes.jpg\",\"datePublished\":\"2016-05-26T15:01:38+00:00\",\"dateModified\":\"2024-03-08T16:44:31+00:00\",\"description\":\"Visual Studio Code, Microsoft's lightweight source code editor introduces keyboard-only navigation that's not only an advanced accessibility feature,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/key-binding-management-visual-studio-code\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/key-binding-management-visual-studio-code\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/key-binding-management-visual-studio-code\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/key-binding-management-visual-studio-code\\\/vs-code-editor-panes.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/key-binding-management-visual-studio-code\\\/vs-code-editor-panes.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/key-binding-management-visual-studio-code\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Boost Productivity with Visual Studio Code Key Bindings Management\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Boost Productivity with Visual Studio Code Key Bindings Management - Hongkiat","description":"Visual Studio Code, Microsoft's lightweight source code editor introduces keyboard-only navigation that's not only an advanced accessibility feature,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/","og_locale":"en_US","og_type":"article","og_title":"Boost Productivity with Visual Studio Code Key Bindings Management","og_description":"Visual Studio Code, Microsoft's lightweight source code editor introduces keyboard-only navigation that's not only an advanced accessibility feature,","og_url":"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-05-26T15:01:38+00:00","article_modified_time":"2024-03-08T16:44:31+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/key-binding-management-visual-studio-code\/vs-code-editor-panes.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"Boost Productivity with Visual Studio Code Key Bindings Management","datePublished":"2016-05-26T15:01:38+00:00","dateModified":"2024-03-08T16:44:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/"},"wordCount":1405,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/key-binding-management-visual-studio-code\/vs-code-editor-panes.jpg","keywords":["Code Editors","Keyboard Shortcuts","visual studio code","Web Developers"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/","url":"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/","name":"Boost Productivity with Visual Studio Code Key Bindings Management - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/key-binding-management-visual-studio-code\/vs-code-editor-panes.jpg","datePublished":"2016-05-26T15:01:38+00:00","dateModified":"2024-03-08T16:44:31+00:00","description":"Visual Studio Code, Microsoft's lightweight source code editor introduces keyboard-only navigation that's not only an advanced accessibility feature,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/key-binding-management-visual-studio-code\/vs-code-editor-panes.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/key-binding-management-visual-studio-code\/vs-code-editor-panes.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/key-binding-management-visual-studio-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Boost Productivity with Visual Studio Code Key Bindings Management"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6TL","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26521"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26521\/revisions"}],"predecessor-version":[{"id":71462,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26521\/revisions\/71462"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26521"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}