How to Configure Touch Bar in Visual Studio Code in Less Than 5 Minutes

Touch Bar on MacBook has the ability to provide Quick access to commonly used commands In Visual Studio Code.

In the default configuration, the ‘Proceed’ and ‘Back’ buttons are very useful. However, other default Touch Bar actions are less valuable and take up space. You may also find that daily operations such as ‘rename’ (F2) or ‘Go to Definition’ (F12) is hard to access because you need to hold Fn,

This post will show you how Configure Visual Studio Code to Get the Most Out of the Touch Bar,

nask touchbar extension

nask touchbar extension Enables you to easily add many additional actions to the Touch Bar, for example, Run command, Toggle side barAnd Rename,

You can configure the buttons to be displayed in the Visual Studio Code settings (Preferences > Open Settings (UI)search for touch,

Javascript helper extension

I’ve included Touch Bar buttons that are helpful for JavaScript and TypeScript users in the JavaScript Assistant extension. The extension adds the following actions to the Touch Bar:

  • ️ Rename: Triggers the rename command on the current symbol.
  • Quick-Fix: Opens the Quick-Fix context menu.
  • Refactor: Opens the Refactor context menu.
  • Source action: Opens the source action context menu.

Actions are only available when you edit JavaScript or TypeScript files. Similar to the Nask Touchbar extension, you can configure which buttons are displayed in the Visual Studio Code settings (Preferences > Open Settings (UI),

Disabling Default Debug Touch Bar Actions

The default Touch Bar buttons take precedence over controls added by the Nasc Touchbar and JavaScript Assistant extensions. In particular, debug actions can take up a lot of space and hide other buttons.
You can disable it by adding the following to your settings.json file:

"keyboard.touchbar.ignored": [
  "workbench.action.debug.start",
  "workbench.action.debug.run",
  "workbench.action.debug.pause",
  "workbench.action.debug.stepOut",
  "workbench.action.debug.stepInto",
  "workbench.action.debug.stepOver",
  "workbench.action.debug.stop",
  "workbench.action.debug.restart"
]
enter fullscreen mode

exit fullscreen mode

instance configuration

The above configuration shows the following buttons:

  • Go back And Go forward (omission)
  • Go to definition, Run command, Toggle side barAnd Toggle bottom panel (Nask Touchbar)
  • Rename, Source Action, RefactorAnd Quick-Fix (javascript helper)

In addition to the disabled configuration for debug actions, the following settings are used:

"nasc-touchbar.addCursorBelow": false,
"nasc-touchbar.rename": false,
"nasc-touchbar.toggleSidebar": true
enter fullscreen mode

exit fullscreen mode

Leave a Comment