Category: extensions

Article by: Ryan Stewart

Update on the Comp to Code Tool in Brackets

With the launch of Project Parfait in preview, as well as Lee’s open sourcing of his Response tool, I wanted to provide an update on the “Design Comp to Code” tool that we showed last year at Adobe MAX. After a bit of a delay in getting started, we’ve been hard at work turning that vision into a reality as an extension for Brackets. We’ve been able to leverage a lot of work from the Parfait team to bring a comp to code workflow directly into… Read more

no responses.
Article by: Raymond Camden

New Linting API

One of the more popular types of Brackets extensions are linters (or code quality checkers). Brackets ships with JSLint support built in, but you can currently find extensions for CSSLint, W3CValidation, JSHint, and even JSON. Brackets 31 introduces an improved API for better linting integration. When I first experimented with writing Brackets extensions I wrote a JSHint extension as a way to get a feel for the process. After I did that I quickly wrote a CSSLinter and a W3CValidator. As you can imagine, these extensions were virtually… Read more

no responses.
Article by: Terrence Ryan

Reflow Cleaner Extension

Reflow Cleaner is a new extension for Brackets that helps front-end developers produce clean HTML and CSS from Adobe Edge Reflow design comps. To explain this extension you have to start with Adobe Edge Reflow. ReflowReflow is a tool for building responsive HTML based design compositions. It’s a great way to ideate out designs that will work in a browser. However, the code it produces is not ready for production HTML work. It’s div and id heavy, and it’s written for display purposes. HTMLI love Reflow,… Read more

no responses.
Article by: Adam Lehman

Brackets Extension Registry

Brackets isn’t just about hacking, it’s also about sharing. Within the first year of the project, over 100 extensions were created by the community. We quickly outgrew the wiki page listing and needed a better way to share and install extensions. Several months ago we began work on the brackets-registry project, a server application to register and share brackets extensions. Aside from creating and open sourcing the brackets-registry, we also had to update how extensions are packaged and needed to implement several features within Brackets itself.… Read more

no responses.
Article by: Raymond Camden

Using GitHub with Brackets

As both an avid GitHub and Brackets user, today I decided to take a look at what extensions are available that could help integrate the two. The Brackets Extension list over on the main wiki page list five different extensions but I focused on three that seemed to work the best (as well as being somewhat up to date). Each of the extensions described below can be loaded using the cool Brackets Extension Manager so be sure to give them a try! brackets-git-info The first… Read more

no responses.
Article by: Dan Schaffer

xUnit – JavaScript Unit Testing Extension

The Brackets xUnit extension was created to simplify the process of creating and developing Javascript unit tests. xUnit currently supports the unit test frameworks Jasmine, Qunit, and YUITest. Tests written in these frameworks can be run directly from the Brackets interface. The extension can also generate skeleton unit tests for Jasmine, Qunit, or YUITest by parsing the current file and creating a new test file with test cases for each method. DOWNLOAD xUNIT: https://github.com/dschaffe/brackets-xunit The goal of the extension is to help with the… Read more

no responses.
Article by: Raymond Camden

Markdown Extension for Brackets

Markdown is a lightweight markup language that allows you to create HTML using simple symbols. For example, doing *beer* creates an italic-styled HTML wrapper for the word. Markdown is a great way to accept user-generated content on a site without having to worry about the complexities of HTML. Brackets architect, Glenn Ruehle, created an extension to help make using Markdown easier. Simply install his extension directly from the GitHub and when you open any .MD file, you will find a new panel that contains a live preview… Read more

no responses.
Article by: Raymond Camden

PageSuck Brackets Extension

PageSuck was created by Tim Burgess and does one simple thing – it sucks down the contents of a remote URL and loads it into Brackets for editing. After downloading and installing extension, you may launch PageSuck by pressing Option + G on OSX or Alt + G on Windows. At this point you can enter any valid URL, I chose cnn.com. The extension grabs the HTML for that page and then creates a new file for you in the currently active folder. The file name is… Read more

no responses.
Article by: Raymond Camden

JS Beautifier Code Formatting Extension for Brackets

A few days ago I was asked if Brackets included any formatting features. While there isn’t anything included by default in Brackets (although see my note at the end), there is an excellent community-built extension you can download to add formatting for HTML, JavaScript and CSS. Beautify is an extension that wraps the open source project, JS Beautifier. This is a great example of how Brackets, being built on web standards, can make use of other libraries to easily extend and add new features. Once… Read more

no responses.
Article by: Raymond Camden

Snippets Brackets Extension

Today we want to share the Snippets extension. Created by Jonathan Rowny, the Snippets extension lets you define a series of triggers for common typing tasks. In some ways this is like the Zen Coding extension reviewed earlier, but a bit simpler. Once installed, you can open a panel of all available snippets by hitting SHIFT+CMD+S: For each snippet you’re given trigger text and an explanation of what it does. Currently there isn’t a UI to add or edit snippets, but he created a very simple file-based system for… Read more

no responses.