March 29, 2016 10:10 am

Creating your first Bracket extension

Brackets is a text editor/IDE specifically made for web development and built using JavaScript. It offers extensions that can be created by anyone, including ourselves. We can make extensions that help our own programming needs and publish them so that others can also take advantage of our effort.

Creating your first Bracket extension

You can install Brackets from . To view all of your extensions in their respective folder click on Help and then Show Extensions Folder (Help -> Show Extensions Folder). In the user folder, you can create your own folder with a new extension and it will be locally visible in your Brackets editor. After finishing it, you can add your extension for everyone to use in .

What will we be building

We are going to create an extension which shows as many gifs of cats and dogs as the users want to see.

Creating your first Bracket extension sample1

Figure 1: Clicking on the black cat’s icon starts our extension

Creating your first Bracket extension sample2

Figure 2: After clicking on the icon, a modal appears where users see a gif and can click to load as many new gifs as they want.

Building the extension

We create a package.json file which would contain information about our extension. In it, we enter the name, the title, description, homepage, version, author, license of the extension and we stipulate what kind of Brackets version is required to run the extension.

Thereafter, we create our main entry point file (called main.js)

In it, we load our icon service by using the require function and passing the path to the file. ./ is used to pinpoint that we start building the path from the current directory (where the current file is)

Thereafter, we load the built-in Dialogs module using the brackets.getModule function.

Afterwards, we load our HTML view into a variable using require.

Now, we load another native module which we will use to load our custom stylesheets.

We load our stylesheet using the ExtensionUtils built-in module that we already required:

We initialize our own iconService module.

We use the custom click function of our iconService module and add a callback parameter that will open a built-in Brackets dialog with its contents being our HTML view (remember that we saved the contents of the HTML file in a variable)

Our stylesheet just adds a background icon to the anchor which will be used in the Brackets menu to start our extension and adds a pointer cursor to our buttons.

Our iconService’s init function that we called in the main file just adds an anchor to the Brackets toolbar menu.

Its click function just checks if the icon is already loaded to the menu, and if it is – sets up a click listener that executes whatever we pass to our custom click function. Finally, it exports those two functions so that whenever we require this module in another module, we would still be able to use the two functions.

The View

Our view just shows a modal with a close button, an image, and two buttons for loading new gifs. We add JavaScript which listens for click events and calls again the cat gif API that we are using. For a click on the load new dog button,  we are just getting a random gif from around 150 gifs by passing a random number to the URI.

Conclusion

This has been an introduction into the possibilities of Brackets extensions.

By now, you should be able to understand how to make your own Hello World Brackets extension and publish it for everybody to use and take advantage of.

A GitHub repository with the extension’s code is located at: and it is also available from the Brackets extension search functionality to try it out.

Tutorial Categories:

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories: