Академический Документы
Профессиональный Документы
Культура Документы
On November 4, 2014, Adobe announced the 1.0 release of Brackets. The update
introduced new features such as custom shortcut key combinations and more
accurate JavaScript hinting. Brackets has a major focus on development in
JavaScript, CSS and HTML. With release of version 1.0 Adobe announced a feature
that extracts design information from a PSD file for convenience of coding in
CSS.[5] As of June 28, 2016, the feature is officially discontinued, due to "low
usage".[6] However, Extract is still available via Photoshop and Dreamweaver, both
of which are part of their paid service, Adobe Creative Cloud.[7] The latest version
release of Brackets is 1.11.[8] Developer(s) Adobe
Systems
Initial release 4 November
2014[1]
Contents Stable release 1.11 /
History 25 September
Features 2017
Features
Brackets provides several features[12] including:
Quick Edit
Quick Docs
Live Preview
JSLint
LESS support[13]
Open source[14]
Extensibility
Quick Edit
Quick edit enables inline editing of CSS, Color Property, and JavaScript elements for developers. This built-in feature can be applied
to multiple functions or properties simultaneously and all updates are applied directly to the file associated with the changed
elements.
HTML File
Applying quick edit to HTML elements will display all corresponding CSS properties in
a box beneath the selected element. Users can choose to create new CSS rules
directly within the editor and edit a tag's CSS properties inline without leaving the
context of the HTML file.
JavaScript File
On JavaScript functions, quick edit performs the same procedure as with HTML
elements but displays the selected function’s body within the drop down box. All
updates to the function’s body will propagate and update directly within the
corresponding JavaScript file.
Files containing Hex or RGB color properties
For color properties, quick edit will return an inline color picker for previewing and color
adjustment functionality.
Live Preview
When one clicks the respective code snippet in CSS/HTML the web browser immediately shows the output relating to that code
snippet in web browser. This feature is termed as Live Highlight. Also, the feature Live Preview in Brackets pushes code edits
instantly to the browser to present an updated webpage as the developers modify the code. Brackets contains a Node.js backend that
predicts what the code does as the developer types the code.
Functionality
1. HTML & CSS real time updates (without reloading)
2. Element Highlighting: Elements selected in HTML and CSS files are highlighted within thebrowser.
Split View
This feature splits the main view into 2 parts. User can split view either vertically or horizontally as per one's own convenience, thus
allowing user to work on 2 files at same time. Thus developer can simultaneously work on two different files of two different types.
Features such like Live preview, Quick edit works in both views. Currently this feature is limited such that the same file cannot be
opened simultaneously in both views.
Brackets supports a feature called "PSD lens" that helps to smoothly extract each of pictures, logos and design styles from PSD file
without opening Photoshop to check for them. By calling this feature a preview Adobe conveys that there is much work ahead before
this feature can be perfected. This feature brought in positive reviews from developers but many issues were reported during the
initial stages of the feature release. The problem was later solved using an extension.
Theseus Integration
Brackets integrates Theseus, an open-source JavaScript debugger that enables developers to set break points, step through code, and
inspect the value of variables in real time.[15] Theseus can be used todebug any extension in Brackets and is easily installed using the
built-in extension manager. Theseus also works in conjunction with Live Preview through a proxy server that records a function and
its associated values every time the function is called.
Functionality
Displays number of times afunction is called next to the function’s definition.
Logs all arguments received, values returned, andexceptions thrown by a function call within Brackets.
Extensions
Being built with HTML, CSS, and JavaScript, developers can provide additional functionality to Brackets by creating
extensions.[12][16] These extensions can be found and installed using the built-in extension manager. Extensions can also be found
online via Brackets Extension Registry.
See also
Chromium Embedded Framework(CEF)
List of text editors
Comparison of text editors § Programming features
Comparison of HTML editors
Atom
References
1. Stewart, Ryan. "Brackets 1.0 and Extract for Brackets (Preview) Now Available" (http://blog.brackets.io/2014/11/04/b
rackets-1-0-and-extract-for-brackets-preview-now-available/)
. Brackets Blog. Adobe Systems. Retrieved
15 November 2014.
2. Flynn, Peter. "Release Notes: 1.2" (https://github.com/adobe/brackets/wiki/Release-Notes:-1.2)
. Brackets Wiki.
Adobe Systems. Retrieved 11 February 2015.
3. github.com/adobe/brackets/blob/master/src/nls/README.md (https://github.com/adobe/brackets/blob/master/src/nls/
README.md)
4. "Adobe Brackets Code Editor"(http://technewss.com/adobe-brackets-code-editor-web-live-preview-quick-edit/)
.
Technewss. Retrieved 12 December 2014.
5. By Harrison Weber, VentureBeat. “Adobe launches its open source text editor Brackets out of beta, releases CSS
extraction tool (https://venturebeat.com/2014/11/04/adobe-launches-its-open-source-text-editor-brackets-out-of-beta-
releases-css-extraction-tool/).” November 4, 2014. November 17, 2014.
6. "Update about Extract for Brackets (Preview)"(http://blog.brackets.io/2016/04/14/update-about-extract-for-brackets-p
review/?lang=en).
7. "Update about Extract for Creative Cloud Assets Online Service and Brackets"
(https://blogs.adobe.com/creativeclou
d/update-for-extract-in-creative-cloud-assets-and-brackets/)
.
8. "Release Notes 1.11" (https://github.com/adobe/brackets/wiki/Release-Notes:-1.11)
. Retrieved 25 September 2017.
9. Adobe Edge Code CC (http://www.adobe.com/uk/products/edge-code.html)
10. LaFontaine, David (2015-01-16)."Adobe Dips Its Toes into the Open-Source Software Waters with Brackets 1.0"(htt
p://layersmagazine.com/adobe-dips-its-toes-into-the-open-source-software-waters-with-brackets-1-0.html)
. Layers.
11. Adobe Brackets – open source editor for web designers(http://thenextweb.com/dd/2014/11/05/adobe-launches-brac
kets-v1-0-open-source-text-editor-web-designers/)
12. "How to Use Brackets"(https://github.com/adobe/brackets/wiki/How-to-Use-Brackets)
, Adobe
13. Text Editor Review – Adobe Brackets(http://callmenick.com/post/text-editor-review-adobe-brackets)
, January 22,
2014
14. "Brackets: Free Open Source Code Editor Built With HTML/CSS"(http://www.hongkiat.com/blog/brackets-code-edito
r/), Hongkiat
15. "Theseus JavaScript Debugger for Chrome and NodeJS"(http://blog.brackets.io/2013/08/28/theseus-javascript-debu
gger-for-chrome-and-nodejs/), Brackets Blog, August 28, 2013
16. "A Review of the Brackets Editor"(http://www.sitepoint.com/review-brackets-editor/), SitePoint, April 18, 2014
External links
Official website
Brackets on GitHub
Brackets's channel on YouTube
Brackets extension registry
Brackets Developer Forum
Text is available under theCreative Commons Attribution-ShareAlike License ; additional terms may apply. By using this
site, you agree to the Terms of Use and Privacy Policy. Wikipedia® is a registered trademark of theWikimedia
Foundation, Inc., a non-profit organization.