Brackets-Powerful free open source Cross-platform Web front-end development tool

brackets is a free, open source and Cross-platform Html/css/javascript front-end WEB integrated development environment (IDE tool). The project is created and maintained by Adobe and supports Windows, Linux, and OS X platforms based on MIT license releases.

Brackets is characterized by simplicity, elegance and quickness. It doesn't have a lot of views or panels, and it's not much of a fancy feature, and its core goal is to reduce the inefficiencies of repetitive work in the development process, such as browser refreshes, changing the style of elements, searching functions, and so on. Unlike Sublime Text, Everedit, and other common code editors, brackets is specifically designed for WEB front-end development ... I. Project Setup

1, open brackets, the entire interface is very concise, the top menu bar only provides file > Exit Exit Editor function. On the left is the file tree of the project organization structure, using CTRL/CMD+SHIFT+H to Exhale and close the file tree. The right-hand side is the edit area, the top is the toolbar, the middle is the document area, and the lower part is the hint area.

2. Open the project open the project folder using the File > open Folder command, and the left tree project name is updated to the project folder name, and the file tree is updated to the file tree of the current project.

Click on the project name, eject the item Edit menu, and the Edit menu displays the history item, as well as the item edit command.

Open Folder command: Opens a new project.
Project Settings command: Sets the web address for the current project, which is used when previewing page debugging.
Set requirement: Must be a web address that begins with http://.

As shown above, when set to Http://127.0.0.1/demo/slide, when the browser is previewed, the corresponding page is opened through the web address.

If not set, the page is opened through the file's letter address.

Second, document editing

In the file tree, click Index.html, and the main area opens the Index.html document.

1, Brackest will detect whether the document conforms to the HTML specification, the following figure prompts, in 20 lines have a style block needs to be placed in the head node.

2, put the cursor on a class or ID attribute of the label name, press Ctrl/cmd + E ("edit") or exit edit. Brackets will search for all CSS files under the project, and then open an embedded editor embedded in the HTML file, allowing you to quickly modify the CSS code.

When the current CLASS/ID label has multiple style definitions, the edit window provides a toggle button to toggle the display style, or you can use the ALT + Up/down arrow keys to toggle.
Note that brackets detects the current HTML document and all the CSS files under the project to find the class/id style, even if some CSS files are not referenced in the current HTML document.

3, brackets also support the definition of JS Object Quick Preview/Edit, put the cursor on a JS function name, press Ctrl/cmd + E ("edit") or exit edit.

4, brackets built-in color picker, providing Rgba, HEX, Hsla colour coding form. Place the cursor on a color code, press Ctrl/cmd + E ("edit"), and exit the Color Picker window using the ESC key.

5, according to the reader's reflection, the new version of the brackets has supported HTML, HTML5, CSS and Javascript code hints (code completion). Third, instant preview

Brackets provides instant preview of Web pages. When you use this feature, brackets calls the Chrome browser to open the current page, and after you modify HTML, CSS, JavaScript, and save it, the modified content immediately responds to the page in the browser without having to manually refresh the page. This is one of the brackets's biggest bright spots, with two display coder blessed, can split screen display brackets and chrome, instantly modify instant preview without switching editor/browser and refresh the page.

Some limitations of the current Instant preview feature:
It only applies to chrome browsers as the target browser, you must install Google chrome.
It relies on the remote debugging feature in the Chrome browser, which is enabled by a command-line flag. On the Mac, if you are already using the Chrome browser and start "Instant preview," brackets will ask you if you want to restart the Chrome browser to enable remote debugging.
You can preview only one HTML file at a time-if you switch another HTML file, brackets closes the original preview. Four, some shortcut keys

Ctrl/cmd+shift+h can exhale and close the file tree
Ctrl/cmd + E Quick Preview/edit CSS style/javascript function
Ctrl/cmd +/+ zoom in to reduce the size of the edit area font
Ctrl/cmd + 0 Reset edit Area font size
Ctrl/cmd + Alt + P to turn on the instant preview feature
Ctrl/cmd +/Line Comment
Ctrl/cmd + Alt +/Block Comment
Note: CSS code, HTML code comments can only use the block annotation shortcut keys to be improved:

1, undo the modification function to support the number of fewer steps
2. Unsaved changes are revoked to the last saved state once they are revoked
3, the color picker does not support Ctrl/cmd + e off
4. JavaScript only supports Quick preview/editing of functions
5, for CSS style, JavaScript function Quick preview: Brackets will detect the current HTML document and the project under all CSS, JavaScript files to find the target, even if some CSS, JavaScript files are not referenced in the current HTML document. For a lookup of a function that is a property of a JSON object, a function with the same name in the other object is also indexed to the
6, when using the Web page Instant preview function, open the chrome console, brackets will exit the instant preview
7, does not support double click to select the Chinese string
8. Code folding is not supported

Overall, brackets this project is still very new, the potential of a huge, and now the WEB front-end development demand is extremely strong, really good use of powerful free tools is not particularly much, plus brackets open source, support multi-platform, so it is very worthwhile to try and learn, I hope this development tool will help you.