Download Sprint 24: http://download.brackets.io
It’s not limited to just the current file either. Brackets analyzes your entire project and even supports RequireJS modules.
There is much more that can be done with this new code intelligence. Building on this foundation, we’ve added a `Jump to Definition` feature (popular in many IDEs). Simply press
Ctrl + J or
âŒ˜ + J on a function call or property to begin editing its definition.
Designing in the browser is a code-driven creative activity, but that doesn’t mean code is the only tool we have for design. For this reason, Brackets has had a few visual tools that manipulate code.
Ctrl/âŒ˜ + E on any color provides a visual color selector that injects hex, rgb and hsl encoded colors. That’s great for creating and altering colors, but sometimes you just want to know what that encoded color looks like when rendered in the browser.
New in Brackets 24, when you hover your mouse over any color in Brackets (hex, rgb, hsl or named), a popover will appear showing you what that color looks like when rendered. We call this Quick View.
Quick View isn’t limited to colors, it will also render gradients and images defined in HTML and CSS file. If there are other types of code you’ve like to see rendered in a Quick View, let us know. Or better yet, submit a pull request!
Community Powered Docs
Web standards are constantly evolving to improve user experience and simplify development. If you are living on the bleeding edge or just don’t care to memorize every esoteric CSS property, you likely rely on online documentation while you code. Many IDEs attempt to cobble rudimentary documentation together and integrate into the code experience via a panel that takes up valuable screen real estate. More often than not, the documentation is outdated, inaccurate or missing key components. We think we can do better.
If you aren’t already familiar with the WebPlatform.org, you should be. It’s an open community of developers building resources for a better web, regardless of brand, browser or platform. One of their flagstone projects is WebPlatform Docs, a community-driven site that aims to become a comprehensive and authoritative source for web developer documentation. It’s powered by a wiki that *anyone* can edit and is populated with content from the Mozilla Developer Network and MSDN (among others).
Even through the project is still in Alpha, we felt the content was ready to be exposed in Brackets. We are also hoping that exposing the content to more developers and designers will mean more will get involved in the project. For this reason we’ve added a new feature to Brackets called *Quick Docs*.
Quick Docs is limited to CSS property support today, but we expect to expand that in the near future. To try it out just press
Ctrl + K or
âŒ˜ + K on any CSS property name and information for that property is loaded inline. Because it uses the same inline UI as other Brackets features, it never obscures your code. It becomes part of the document you are working on and is dismissed by pressing
Ctrl + K or
âŒ˜ + K again (or
UX Updates and Extension Management
We continue to make progress in updating our UI with a cleaner look that is optimized for coding. In this build you’ll notice several aesthetic updates to the project panel and working files section (e.g. everything on the left). We also spent some time normalizing extension icons so they fit better in the new toolbar.
In the toolbar you will find a new icon for extensions . We had hoped to launch a central registry for extensions that would be tied to this new icon. Unfortunately, we got ahead of ourselves by focusing on the implementation and not on the legal and security implications. Until we get those issues sorted out, the icon will launch the “Install Extension” dialog that we added in Sprint 22. In Sprint 25, we hope to replace this dialog with an extension management UI for listing and removing installed extensions.
The community was hard at work this sprint. In addition to several bug fixes, committers accepted pull requests for enhancements to the inline color selector and new support for .tpl and .twig files.
Here’s the complete list:
- Insert line above/below shortcuts by Alessandro Di Martino
- Inline color editor: support percentage RGB colors by Dennis Kehrig
- Basic syntax highlighting for .tpl/.twig files by niu tech
- Fix #3130: Move line up/down has incorrect behavior in edge cases in inline editor by Tom Malbrán
- Fix #3466: Brackets hangs if floating-point value entered for Tab/Spaces size by Tom Malbrán
- Fix #3440: Working set does not re-sort when automatic sort is turned on by Tom Malbrán
- Fix #1570: Quick Edit should work on closing tag by Bernhard Sirlinger
- Fix #3323: Reopening same folder closes all files by Bernhard Sirlinger
- Fix #2641: Input field goes blank if F2 pressed a second time by Tom Malbrán
- Fix #3041: Shortcuts using “-” are shown as “+” on Windows by Bernhard Sirlinger
- Add CollectionUtils.some() to allow breaking out of iteration by Tom Malbrán
- German translation update (and) by mynetx
- Spanish translation update by Chema Balsas
- Add YouTube link to README by drdamour
As always, you can get all the detail of the build from the Brackets 24 release notes.
Coming Up in Sprint 25
With the exception of the extension management UI, the core team won’t be focusing on big user-facing features of our own. Instead we’ll be working to improve connectivity issues between Brackets and Chrome (on Windows) and optimizing performance. We’re also hoping to get caught up on some long standing community contributions (e.g. reviewing and accepting pull requests).