1.0, we did it! This is a big milestone for the Brackets project. Right now you can grab version 1.0 of Brackets, as well as a preview of Extract for Brackets, an extension that Adobe has been working on. Extract for Brackets (Preview) speeds up the process of pulling design information like colors, fonts, and measurement info out of a PSD and turning it into clean, minimal CSS.
When we first started Brackets we wanted to release early and often. We did both. This will mark the 45th release of Brackets in 3 years. In those early releases we acknowledged that there were a number of features Brackets was missing so we warned that it was still early and not necessarily ready for every day use. But in the past 3 years we’ve been very busy adding features to help make Brackets a world class text-editor. Declaring this release as 1.0 is our way of telling the world that Brackets is ready.
We’ve been busy over the last few releases adding a number of major features. If you haven’t looked at Brackets in a while, now is a great time to see the awesome stuff we’ve been working on. We’ve added multiple cursors, split view, theme support, and many more fixes and enhancements. This release includes support for custom key bindings so you can change the shortcut key combinations that Brackets uses. This wiki page describes how to customize them and includes example key bindings that align Brackets’ keyboard shortcuts with the ones you might be used to in Sublime Text.
In addition to Brackets 1.0 we’re also releasing a preview of Extract for Brackets. Extract for Brackets is a Creative Cloud service that lets you view and get information and assets out of a PSD right from your text
editor. Extract for Brackets lets you pull out things like colors, fonts, measurement, gradients, and more from a PSD in the form of contextual code hints in CSS and HTML files. You can also extract layers as images, use information from the PSD to define preprocessor variables, and easily get dimensions between objects. We’re excited about how this will improve the process of moving from design to development and speed up workflow. You can either download Extract for Brackets (Preview) as a standalone extension on the Brackets Extension Registry or included with Brackets 1.0 in a bundle that’s available for download on brackets.io.
While we’re very excited about 1.0, we are also treating this like any other release, so we’ll continue to release often and will be doing the next Brackets release in 3-4 weeks. As mentioned in this blog post we are going to be slightly changing the things that the Adobe team works on. We think there is an unmet need for a coding tool that supports design and we think that Adobe has a lot of expertise in that area. We will continue to work on core features and to support the community’s work on Brackets, but we also want to build the perfect editor for web designers and front end developers that are creating or implementing designs in code. Some of the things we’re going to be working on are improving our preprocessor support, making SVG editing more powerful, and adding more visual inline editors.
Since putting Brackets up on GitHub 3 years ago we’ve seen a great deal of momentum, largely thanks to our community. Our releases regularly see over 100,000 downloads, there have been 245 people who have contributed code directly to Brackets, and we¹re currently the 16th most starred project on GitHub with 18,566 stars. Those are humbling numbers and we’re excited to be working with all of you on making Brackets a success. We’ve also seen over 400 extensions and over 75 themes created in that time, all of which grow the reach and feature set of Brackets. To those of you who have taken the time to write extensions, contribute code, file issues, or even just try out Brackets, we want to say thanks. We couldn’t have done this without you and we are looking forward to continuing to move Brackets forward with you!
Split view has been one of our most requested features for Brackets and with Release 0.44 it’s finally landed. In this release we’ve also overhauled the file tree which should make it more robust. You can see the full list of enhancements here and grab the release here.
With release 0.44 you can now view two documents side-by-side in either horizontal view or vertical view. To enable split view, use the icon and then decide between a vertical split or a horizontal split. Then select the panel you want to open the file in and double-click the file to open it in that pane. You’ll now see two working sets, one for each pane.
We rewrote our file tree to use React which will make it much easier to maintain going forward. During the upgrade we also fixed an issue that wouldn’t let users right-click on files that Brackets doesn’t support.
As of this release you can now use Quick Docs when you’re on a browser-prefixed CSS property. We’ve also fixed two important issues with editing CSS code: one where Brackets stopped working when using Live Preview if you placed your cursor on a non-indented } character inside a comment, and one where the inline editor was blank if your CSS rule contained a vendor-prefixed property that used rgb() color values.
The entire team is excited about this release. We hope you enjoy split view as well as all the other features and fixes that went into this release. And as always, we appreciate those of you who have contributed translations and fixes this release. Here’s the complete list:
cubic-bezier()by Marcel Gerber
!importantby Miguel Castillo
i18nfield by Denisov21
The team has been busy polishing the exterior of Brackets for our upcoming Max release so we’re packing some of Brackets’ existing features with a little extra love in this release.
Remember when the Quick Edit and Quick Find Definition features were first introduced but they didn’t work for your SCSS or LESS files? Well now they do. Any selector, even the ampersand Selector, can be located using Quick Find and any class, ID or tag selector can be targeted for QuickEdit in SCSS/LESS files.
And that’s not all—mousing over rules declared in SCSS or LESS files will highlight their usage in the browser when using the Live Preview feature. Editing rules, however, will still require that your source file be recompiled. May we suggest the LESS AutoCompile Extension or the brackets-sass extension to automatically recompile them on save?
Our Dark Theme has spread to make more of Brackets UI dark. Now, when you choose the Dark Theme, you’ll notice the status bar, context menus, dialogs, etc… are styled to match the rest of the UI. Custom Theme Authors can designate their theme to use the Dark or Light UI for the Brackets components which Themes Extensions cannot style.
The overwhelming popularity of custom themes support exploded our Extensions Manager dialog so Brackets committer Miguel Castillo took it upon himself to do something about it by creating a “Themes” tab.
This makes it easier to find a great theme from the vast array of Custom Themes already added to the registry and new ones being added daily.
We added a “Find Index” hint to the Find Bar.
This helps to show where you are in the file so you know when you’ve wrapped back around to the beginning.
This is extremely useful for the Replace feature as it shows how many replacements are remaining.
The “Language Switcher” (that thing on the status bar that allows you to change the language starting in Release 0.42) could be used to change any document’s language. With Release 0.43, we’ve added the ability to save that setting for all files for the current file’s type.
Brackets wouldn’t be where it is today without its many contributors from around the world. Thank you!
ThemeManager.loadFile()(+ part 2) by Miguel Castillo
The Brackets team has updated the wiki article on working with multiple selections to include changes to how Multiple Selections are Pasted. Check it out and let us know how it helps you improve your productivity!
I’m really excited to introduce the 0.42 release of Brackets which includes support for themes as well as a few other significant features including file-mode switching and numerous community features. This is a big release for us!
We are particularly proud of the themes feature because it’s one of the biggest collaborations yet between the community and our team. In this case we worked very closely with Miguel Castillo to add his very popular Brackets-Themes extension into core. Miguel put in many, many hours working with the team to make this happen. He had to do quite a bit of work to refactor the original extension so it would fit the style of core code and be able to load themes as extensions. Huge thank you to both Miguel and all the community members who provided feedback.
This initial release not only lets you choose themes to change the code editor surface, but you can also change the default font and the font size. All of this can be done by going to the View > Themes… menu in Brackets. We currently ship with two default themes, the normal light theme that we’ve had as well as a beautiful new dark theme done by our designer, Larz.
Themes install just like extensions, so to get new themes, you can use the Extension Manager. There are already a number of themes that are up on the extension registry. Long term we want to separate these themes into their own tab, but for now you can search for “theme” and you’ll see a bunch of new themes you can install and use. There’s also a GitHub organization for Brackets theme developers which has the repositories for a number of themes all in one place. If you’re interested in creating your own themes and publishing them, we’ve got a Creating Themes document on the Brackets wiki that will get you started.
Switch Language Mode/Syntax Definition of a File
We also added the ability to switch the language mode and syntax definition of a file. To use this feature, click the file extension in the bottom status bar. You’ll now see a list of all the different language modes that Brackets supports. You can select one and you’ll now get syntax highlighting for that file as well as any other rules that apply to it.
Replace in Files: The headings for each file include a checkbox for quickly including or excluding all matches in the file.
Extension Manager enhancements: The Extension Manager now shows the list of languages that an extension has been translated for. You can also install a local .zip file containing an extension by dragging and dropping it into the Extension Manager dialog.
jscodehints.detectedExclusions preference so it will ignore these files in the future.
New translations: Brackets has been translated into Traditional Chinese as well as Galician!
You can see the full list of changes as well as specific pull requests on the Release Notes.
Again, a huge thanks to Miguel Castillo and all of the community members who helped add themes to core. It was one of our most substantial community contributions to date and it’s a huge feature for Brackets.
There were a number of other community contributions this release including:
"sortDirectoriesFirst": truesetting with numbered folder names by Tomás Malbrán
background-blend-modeto CSS code hints by coliff
text-renderingto CSS code hints by Steffen Bruchmann
cursorCSS code hints by Amin Ullah Khan
The latest Brackets release is out, introducing a much-requested feature: the ability to replace text across multiple files in one batch.
Replace In Files
The new multi-file Replace In Files works like a blend of the existing Find In Files and single-file Replace commands. Start by selecting Find > Replace In Files (or right-click a folder and select Replace In… to limit the scope):
Using the Replace In Files bar, you can choose which files to search (using the same “exclusion sets” as in Find In Files) and set your search & replacement text (using all the same options as available in the single-file Replace bar). But Brackets doesn’t modify any files yet – first you get an opportunity to review all the matches and filter out ones you don’t want to modify:
Once you’re done, click the Replace button in the panel header to replace all the selected matches. By default, Brackets will leave all these replacements as unsaved changes – so you can Undo if needed. But if more than 20 files are involved, Brackets avoids flooding your workspace with open documents by performing the replacement directly on disk. You’ll always be warned in this case, since such replacements can’t be reverted via Undo:
Note: if you like the bottom panel’s checklist of replacements, you can use it for single-file replace too! Either right-click a file and choose Replace In…, or start a regular single-file Replace and click the “Batch…” button (formerly named “All…”):
Lastly, we took this opportunity to considerably clean up and consolidate our find/replace-related code. This will make further improvements in the future much easier – look for more to come!
Stability improvements – In the past, certain JS files have caused Brackets to freeze or become sluggish while analyzing the file for code hint information. Now, files that take too long to process are automatically ignored (code hints will still show, but they will reflect only what was gleaned from the other files in the project).
Renaming files – There’s now another way to rename files in Brackets: in the file tree, click the selected file a second time to rename it. This is similar to how the Windows Explorer and OS X Finder file views work.
<main>tag in HTML code hints by coliff
Lastly, a quick reminder: Adobe members of the Brackets team will be on break the week of June 30 – July 4, so responses to bug reports & pull requests may be delayed.
We’ve shipped a new and improved Brackets! If you don’t see an automatic update notification for it, be sure to manually “Check for Updates” from the Help menu, because there was a bug preventing update notifications from appearing under some circumstances. This bug is fixed in 0.40, so you should be all set after this one.
The biggest improvement in the new release is the ability to manage multiple “exclusion sets”. Previously, you could exclude files and folders from searches. It’s often the case that you need to exclude different files depending on the project you’re working on or even within a single project if you’re searching either the client side code or the server side code, for example. The new Find in Files bar supports that:
Why exclude files? Brackets file search has gotten much faster since we introduced caching a few releases back. Even so, if you can reduce the files that Brackets needs to search, you’ll speed up those searches even more. But, more importantly, excluding files you know are not interesting improves your search results and lets you focus on the matches you truly need.
Where there used to be a button to modify the list of excluded files, now there’s a drop down menu.
New Exclusion Set… opens up the editing dialog to create a new exclusion set.
Don’t Exclude Files turns off the exclusions and tells Brackets you want to search all files in the project.
Below those two items is a list of your saved exclusion sets. The currently selected one has a checkmark next to it. You can edit any of these previously used sets by hovering over that item and clicking the pencil icon that appears.
The Edit Exclusion Set dialog lists the wildcards for files you wish to exclude, as it did before. New in this release is the ability to give the set of exclusions a name, making it easier to identify in the menu. Also new is a display of how many files in your project will be searched, giving you an idea of how effective your filter is. In the screenshot above, Brackets will only search 27% of the files in the project (which is Brackets itself). If I remove node_modules from the list of exclusions, I see this:
I jump to searching 76% of the files in the project. It’s easy to see that I’m saving myself a lot of searching. Even better, this can give me an indication that I may have typed something wrong if the effect on the number of files to search is more or less than I expected. Enter just “*” and you’ll see the number of files to search drop to zero!
Brackets committer Chema Balsas has put together a program for generating Brackets API documentation. He and Randy Edmunds worked together recently to get the docs cleaned up and online. There’s still some room for improvement, but we wanted to spread the word because these docs are already a big win for extension developers. Check out the Command Manager docs, for example, for a details on how commands are added to Brackets.
Brackets is out and we’ve packed this release with features that improve coder workflows.
Brackets now lets you type in a few key characters for CSS to quickly narrow the list of available properties and values for auto-completion.
When the selection is a cursor (or cursors, for those using multiple cursors), Cut and Copy operate on the line(s) containing a cursor. This is a fairly standard editor shortcut for quickly moving code around and it’s now available in Brackets.
Back when we first introduced the Extension Manager, you had to manually update extensions, and it was pretty annoying. Then we added the “Update” button, which made it so you could easily update extensions with one click. But you still had to go into the Extension Manager each time you started Brackets to see whether there were any extensions that needed updating.
Currently, Brackets only has support for UTF-8 encoded files. Although we have plans in the future to add support for other encodings, we had no enforcement of this on Windows or Linux. This is enforced at the filesystem level on the Mac, but Linux and Windows have no such filesystem equivalent. This meant that Brackets would open any file for editing on Windows and Linux unless the file was a known file type.
For some projects, this meant that Find In Files would traverse into files that could not be displayed or edited, like binary files. These files are typically quite large and searching them would cause Brackets to become sluggish and even run out of memory. It also took a lot longer to find the results you were looking for.
Starting in Release 0.39, we added support for UTF-8 encoding enforcement on Windows and Linux and large binary files will not be searched.
The Brackets Edit Menu was getting quite large so we moved all of the Find commands to their own menu.
Brackets wouldn’t be where it is today without its many contributors from around the world. Thank you!
The latest Brackets release now includes one of the most requested features: multiple cursor/selection support. Plus, as always, we’ve got a good collection of fixes and improvements throughout.
Brackets now lets you create multiple cursors and selections in order to make lots of similar edits at once. It’s useful for things like adding the same text in multiple places or quickly renaming a variable.
There are a couple of basic ways to create multiple cursors or selections:
The following video shows some examples of these techniques along with more ways to create and manage multiple selections.
Multiple cursors is one of those things that you might see the first time and say “that’s neat, but I already have find and replace”. And then you start using the feature and you find yourself using it several times a day. Selecting the instances of text that you want to replace and watching the text change as you type has a great feel, especially when coupled with Live Preview. In the example below, I use the “Add Next Match to Selection” keyboard shortcut (ctrl-B on Windows/Linux, cmd-B on Mac) to grab a few instances of the word “Brackets” and then change them:
You also notice little, unexpected ways in which the feature saves you time, like visually updating a bunch of strings:
Multiple cursors and selections provides a bunch of new editor actions, so you might want to check out our documentation for using the feature. Thanks to Marijn Haverbeke and the other CodeMirror contributors for this great new CodeMirror 4 feature.
It hasn’t always been crystal clear when you could pop open an inline editor for CSS styles (the Quick Edit feature on the Navigate menu). Brackets will now give you some hints when Quick Edit is not available:
.icofiles can be viewed directly in Brackets now.