Skip to content

Brackets Extensions

Jump to bottom
Narciso Jaramillo edited this page Nov 25, 2013 · 266 revisions

Opening Extension Manager

To the right of the work area, click on the icon that looks like a LEGO(r) brick. This will open the Extension Manager.

Installing and Removing Extensions

You can browse a list of available extensions in the Available tab of the Extension Manager, and click Install to install an extension with one click. This list comes from the Brackets Registry, a web app that makes it easy for extension authors to upload new extensions. The registry doesn't yet have the full set of extensions from the original wiki page list (see below), but over time it should become more complete.

You can remove an extension from Extension Manager by clicking on the Remove button in the item's listing in the "Installed" tab.

If you're an extension author, please upload your extension to the registry at https://brackets-registry.aboutweb.com, and move your listing on this page to the "Moved Extensions" list. Our hope is to eventually migrate all the extensions into the registry. For more information, see Extension Registry Help.

Extension Manager Registry

Updating Extensions

If you've installed an extension from the registry and the developer has uploaded an update, an Update button will appear next to it in the Installed tab, and you can simply click on that button to update it.

If you installed the extension using the "Install from URL" dialog, and you have a URL for a newer version (or the GitHub repo has been updated since you installed it), you can just use the "Install from URL" dialog again to update it.

Manual Install

You can manually install extensions that aren't in the registry yet by choosing File > Extension Manager... (or clicking on the "brick" icon in the toolbar), then clicking the Install from URL... button at the bottom. From there, you can install most of the extensions below by doing the following:

  • On this page, right-click the extension link and copy the URL.
  • Switch back to Brackets.
  • Paste the link into the Install Extension dialog, then click Install.

(Some extensions might not work by just copying and pasting the GitHub repo URL if they have submodules. Authors who post such extensions are encouraged to link directly to a ZIP file with all the submodules included.)

Old Extensions List

Here's a list of extensions that people have built that haven't yet been uploaded to the registry. If you write an extension, please upload it to the Brackets registry at https://brackets-registry.aboutweb.com instead of posting it here. Once all the existing extensions have been moved, we'll be deprecating this page.

Also be sure to use the Brackets Shortcuts page to see which shortcuts are available and also to add the shortcuts that you have used. Thanks!

Editing & Navigation

  • Quick Navigate: Navigate back to previous cursor and edit locations quickly with toolbar buttons.
  • Toolbar Horizontal: Move toolbar from vertical (right) to horizontal (top).

Snippets & Shorthand

  • Auto-match pairs: Auto-complete parenthesis, brackets, braces, double and single quotes.

Formatting

Language Support

  • PHP: Adds PHP function definition support to QuickOpen search
  • MVC.net: Adds cshtml (views in MVC.net) to the HTML highlighting.
  • Ruby: Adds support for Haml, ERB, and Ruby line and block comments.

General Functionality

Live Development

Visual Editing

External Tools & Online Content

Source Control

  • GitHub: Implements the GitHub API, including oAuth. Currently functionality limited to Gists.
  • GitHubAccess: Is able to completly clone a repo from GitHub into a selected Folder. (Works only for non-binary data)

Documentation

  • Docco: Runs Docco on a js file.
  • MDNLookup: Includes a way of creating an extensions toolbar and adding buttons to the toolbar with callbacks.
  • Bottom Browser: Allows you to browse certain sites in the bottom panel and lets you do a Bing search on highlighted text by pressing Shift+Cmd+B.

Linting & Warnings

  • Continuous Compilation: Displays JSLint error messages inline, highlighting infringing code and checking the code while you type.
  • PHPCS: PHP_CodeSniffer for brackets. Lints your PHP through a web service.

Testing & Code Metrics

  • complexityReport.js: A Brackets extension that enables phil booth's complexityReport.js tool. Displays complexity statistics on a per-function and aggregate basis.
  • Jasmine: Runs the Jasmine-node unit test tool against the current file.
  • MaDGe: An extension that enables node-madge functionality. Search for module dependencies, circular dependencies and more.

Fun & Games

  • Snake: Because sometimes you need to eat your code.

Moved Extensions

These extensions are now available via the Brackets Registry, which is definitely the easiest way to get the extensions and keep them up-to-date.

Deprecated Extensions

  • [Brace Helper] (https://github.com/Zolmeister/brackets-helper): Insert closing } on Enter
  • Open Containing Folder: Opens folder containing current file or a file/folder in Sidebar. Added keyboard shortcut CTRL+ALT+O for opening folder containing document opened in editor. (Brackets Sprint 25 includes an enhanced version of this functionality: when invoked on a file, the file is automatically selected inside its containing folder).
  • Hover Preview: Displays a preview when hovering over a color value, gradient, or image filename. (Merged into Brackets as of Sprint 24).
  • JavaScript Code Hints: Code hinting (aka autocompletion) for JavaScript files in Brackets. (Merged into Brackets as of Sprint 21).
  • Color Editor: Quick Edit on a hex/rgb/hsl color opens an inline color picker, plus a listing of all colors used in the file. (Merged into Brackets as of Sprint 17).
  • Color Picker: Quick Edit on a hex color opens an inline color picker. (A color picker is built into Brackets as of Sprint 17).
  • Editor Shortcuts: Keyboard shortcut to delete line. (This command is built into Brackets as of Sprint 15.)
  • HTML Tag Highlight: Highlight start and end tags in HTML document. (This is not working in sprint 28. Already there is a pull request for this functionality.).
  • Web Fonts: Simple interface for adding/deleting/swapping Google Web Fonts in a CSS file (README says that it's no longer being updated)
  • Extension Manager: Install, Remove, and upgrade your extensions from the cloud from inside Brackets (requires node). (Superseded by the built-in Extension Manager.)
  • [Image Viewer] (https://github.com/warabe/brackets.image-viewer): Adds image and dimensions viewing instead of the error modal (currently for OSX only). (Superseded by the image viewer added in Sprint 33.)
  • JSONLint JSONLint your documents. (Hasn't been updated in awhile; the newer JSONLint extension uses the CodeInspection API for better UI integration.)
Clone this wiki locally