Visual Studio Code is an excellent editor, with a ton of room for customization. As a recent convert from Emacs, I appreciate the ability to customize my editor through the form of extensions. Creating an extension is quite simple, if none that fit your needs are available in the marketplace.
The “Hello World” example from Microsoft is quite good, so I would recommend reading it if you want a deeper explanation of each of the steps. However, I would like to take this opportunity to show you specifically how to create a Touch Bar extension for a MacBook.
What You Need
- Visual Studio Code 1.17 or greater
- A MacBook with a Touch Bar
- Node.js and npm installed and in your path
'How to be cool and make Visual Studio Code (VSCode) transparent ' from Emmanuel N Kyeyune; Mainly: Windows 10. Install the GlassIt-VSC extension. In the VSCode settings (File Preferences Settings OR Ctrl +,): glassit.alpha (integer): Transparency level 1-255 glassit.step (integer): Increment of alpha OR: ctrl+alt+z to increase. Importantly, and undoubtedly contributing to its popularity, Visual Studio Code is available for free. Meanwhile, Visual Studio — Microsoft’s full-featured, professional IDE — costs between $40 a month or $500 for a standalone license. Visual Studio falls well outside the bounds of what we’d consider a text editor, but it’s important.
The VS Code team has kindly created an extension generator, which will create the necessary files and folders, including the Hello World extension source code,
tasks.json for additional convenience.
Run the following to install Yeoman and the VS Code extension generator and to create a “Hello World” extension in the current directory:
This will open the Yeoman interface and allow you to choose a few options for your extension.
- (Give it a try and it can make any code/text editor window (including vscode) transparent in no time. It costs $5.99 for three pcs. It costs $5.99 for three pcs. I know it's not the same as having this functionality inbuild in vscode but it works well for me on Wondows10.
- In this article. Editor behaviors can be set to allow code to be formatted as it is written. These actions are set under Visual Studio Preferences Text Editor Behavior, and some of the more commonly used functions are described below. Matching closing braces can be added automatically to code when creating new classes, methods, or properties.
- Cloud Run: While you can continue to develop and debug a Cloud Run application locally when using Cloud Code on a M1 Mac, you can't deploy to Cloud Run yet. As a workaround, you can deploy to a prebuilt container to Cloud Run using the Cloud SDK. Installation steps. Install the plugin directly from the Visual Studio Code Marketplace.
With the absence of the function keys on my keyboard, and without adding custom keybindings (which would be easier, but way less exciting), I would like a quicker and more consistent way to jump to declaration (F12) and back (CTRL+-). Since I’m not very good at naming things, I’m going to name this “definition-jumper.”
I just went with the defaults for the next several prompts, but enter whatever you would like.
cd to the directory, perform an “initial commit” if desired, and open the directory in VS Code. If you have VS Code CLI in your path, run
code . to open the current directory.
Running the Extension
Now that we have the project open, take a minute to explore its structure.
We will be working in a few notable files:
src/extension.tsis where we will implement our extension.
package.jsonis where we will declare the extension and the capabilities.
As you can see, the architecture of an extension is quite simple, although I haven’t worked on any large-scale extensions myself.
To run the application, press
F5 (or the Play button on your Touch Bar). This will start a debugging session in the current VS Code window, where you can set breakpoints and see console output. It will open another VS Code window (the Extension Development Host) with the extension active.
The “Hello World” extension can be run be opening the command palette (CMD + SHIFT + P) and typing in “Hello World.” Now we’re ready to write our own functionality.
Adding Custom Functionality
As I mentioned earlier, I would like a way to jump to declaration and back quickly. Let’s begin by adding the functionality to jump to the declaration.
extension.ts, you will see a line containing:
vscode.commands.registerCommands. This looks like a good place to start. Let’s replace the implementation with:
If you’re still debugging the extension, reload the Extension Development Host window. Otherwise, run the extension again. Since we didn’t change the way the functionality is activated, we will still have a “Hello World” command available to use. If you move your caret above a symbol and run the command “Hello World” again, rather than seeing a message pop up, you will jump to the declaration of the symbol.
Since our goal is to create a Touch Bar extension (and this is a pretty weird way to jump to the definition), let’s change how we invoke our action and add a button on the Touch Bar.
package.json and add
commands in the
This will add a button with the text “Hello World” to the Touch Bar. Let’s take a moment to get rid of the “Hello World” text and rename the “sayHello” action to “jumpTo” in both
Visual Studio Code Transparent Machine
So far, we haven’t changed much. The
activate function of
extension.ts looks like this:
contributes section of
package.json looks like this:
Try it out now. You should see a button on the Touch Bar with the text “Jump To.”
Now, we can create a “Jump Back” button. Feel free to copy the “Jump To” declaration and implementation in the
extension.ts, respectively. Replace the “JumpBack” command with
workbench.action.navigateBack. Don’t forget to add it to the subscriptions as well.
The activate function in the
extension.ts should look like this now:
Adding Custom Icons
Let’s take this a step further by adding some icons. One option is to replace the title in
package.json with unicode characters or emojis, but I would rather use a custom icon.
- Find or create two icons (feel free to use mine that I quickly created in Sketch). I would recommend PNGs for the transparent backgrounds. Following Apple’s guidelines, center the square icon and make it 60% of the full image.
- Create a directory called “assets” in the root of your project.
- Move the PNGs to the
- Add the paths to the icons below the titles for each button in the
And that’s it!
The important parts of the
package.json look like:
extension.ts looks like:
C++ Visual Studio Mac
Installing the Extension
To install the extension locally, copy the project to
Visual Studio Code Transparent Mac Computer
cd .. && cp -r definition-jumper ~/.vscode/extensions
Now, when you fire up Visual Studio Code, you will have two buttons that will jump to the definition and back.