Author: Raymond Camden

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: 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: 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.
Article by: Raymond Camden

Zen Coding (Emmet.io) Brackets Extension

Today I’m going to talk about a feature that I’ve seen requested pretty much every time I’ve demoed Brackets – Zen Coding. Zen Coding is an editor feature that enables high-speed editing and navigating. It uses a CSS-like syntax along with key combinations to create HTML/CSS/XML markup quickly. To be honest, when I first heard of it I wasn’t terribly interested. But after seeing it in action, I’m sold. The Zen Coding project has been renamed to Emmet and may be found at http://docs.emmet.io/.… Read more

no responses.