User:Agarg9/Brackets (text editor)

Features

Brackets provides several unique features including:

• Quick Edit
• Quick Docs
• Live Preview
• LESS support
• Theseus integration
• Open source
• Extensibility

General features supported by Brackets includes:

• Command line integration
• Multiple Selection(multiple cursors)
• Default and customizable Indentations and tabs
• Quick Open(Ctrl/Cmd+Shift+O)
• Quick search definition
• Predictive test
• Instant search in file(shows results as user types)
• Smart code hinting
• Brackets health report
• Auto generation of Closing tags
• Multiple extensions
• Enable/Disable Extensions separately
• Suggest Feature option

Quick Edit

Quick edit enables inline editing of CSS, Color Property, and JavaScript elements for developers. This allows developer to work in a single tab on different file types by using Quick edit(shortcut : ctrl/cmd +E) and calling corresponding function/rule below selected element. 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. This reduces effort for developer in searching/editing code in different CSS/JavaScript files.

HTML File

Shows Quick edit in HTML file in Brackets

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. When there are multiple rules defined for a single HTML elements, clicking on quick edit will show all rules and user can make inline changes to any or all of them without switching context. User can also create rule via quick edit if there is no existing rule available for a particular HTML tag and corresponding css file will get updated with rule automatically. If there is no css file, on clicking quick edit user will see a message to create one to add CSS rule. On clicking Quick edit, CSS file that is getting edited inline, will also become visible under working directory. To close inline edit, user can directly again click quick Edit(or press shortcut keys for it i.e. ctrl/cmd + E) or Hit ESC button. Hitting escape button outside the context of CSS will close all inline edits visible on page.

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. Thus user can directly check other functions body without searching for the method. All updates applied to the function’s body will propagate and update directly within the corresponding JavaScript file.

Shows quick edit in CSS file for color in Brackets

Files containing Hex or RGB color properties

For color properties, quick edit will return an inline color picker for previewing and color adjustment functionality. User can use this feature by going to css and clicking quick edit after placing cursor on any color. This will open up color picker from where user can select any color and can also choose its display format, i.e. to display it in RGB format or Hex format or HSL fomrat. Limitation to this is that user can't open this color picker directly from HTML file as clicking on quick edit will show css rule or hide it back. User can also hover mouse over a color code in HTML/CSS and color will be displayed next to cursor.

Quick Docs

This feature allows user to see documentation details of property or value in CSS file// reference to how to use brackets. User can right click on any attribute and select quick docs for css files which will explain what this particular syntax is about. Example: if user wants to know what does background-image means in CSS or want to see its documentation? User can right click on it and select quick docs which will then provide details about that syntax.

Split View

This feature allows user to splits main view into 2 parts. User can split view either vertically or horizontally as per their convenience, thus allowing user to work on 2 files at same time. This feature is useful for developer where simultaneous working on 2 different files are required. User ca open any file types in either view like HTML file in 1 view and JavaScript or CSS file in other view. Features like Live preview, Quick edit etc will work in both views. Currently this feature is limited to open different files in different view and thus user can't open same file in both views.

Live Preview

Using Live Preview, Brackets pushes code edits instantly to the browser to present an updated page without having to reload.

Shows live update of color on changing css code

Two scenarios to Live Preview:

No Back End Logic:

Using Live Preview, Brackets will launch the chosen HTML file in Google Chrome by supplying static content from Brackets built-in server. This procedure does not require any back end logic to support viewing changes to the HTML file.

Back End Logic:

With back end logic, Brackets will direct Google Chrome to a provided project URL running on a separate server but will disable support for HTML-related features. As a result, the browser will not be able to update any HTML, PHP, etc. files in real time and element highlighting will also be disabled for these files. Only edits and element highlighting related to CSS files will be reflected in real time. All non-CSS file updates will be auto-reloaded instead. These limitations exist because providing live editing functionality for HTML files requires injecting annotations into the HTML code before the code is loaded into the browser. These injections are normally handled by Brackets built-in server but are non-existent when projects make use of separate personal servers.

Additional features

Some other feature of Brackets include self Indentation, automatic implemantation of closing tags and predictive text. Some other IDE's also support these feaures.

Indentation

While writing HTML, if user start a new tag and go to next line, Brackets automatically indent next line to right, and after closing the tag, it brings cursor back at its original level.

Closing tags

Brackets itself adds closing tags as soon as user creates a new HTML tag.

Predictive text

As user writes tags, function or attributes, Brackets will also suggest different function/tags starting with same letters. This feature greatly helps newcomers in learning HTML.