Adobe Brackets is an open source, simple and powerful integrated development environment for HTML, CSS and JavaScript. It supports adding plug-ins to provide additional functional extensions. Currently available plug-ins, such as adding error detection, browser-specific CSS prefix, JSDoc annotations, etc. The following editor briefly introduces the use and settings of Brackets:
1. Project Settings
1. Open Brackets, the entire interface is very simple, and the top menu bar only provides file > exit editor function. On the left is the file tree of the project organization structure. Use Ctrl/Cmd+Shift+H to call out and close the file tree. The right side is the editing area, the upper part is the toolbar, the middle part is the document area, and the lower part is the prompt area.
2. Open the project. Use the File > Open Folder command to open the project folder. The project name of the file tree on the left is updated to the project folder name, and the file tree is updated to the file tree of the current project.
Click the left button on the project name to pop up the project editing menu. The editing menu will display the historical project and the project editing command.
Open Folder command: Open a new project.
Project Settings command: Sets the web address of the current project, which will be used during page debugging and preview.
Setting requirements: Must be a web address starting with http://.
As shown in the figure above, when set to http://127.0.0.1/demo/slide, the corresponding page will be opened through the web address when the browser is previewed.
If not set, the page will be opened through the drive letter address of the file.
2. File editing
Click index.html in the file tree, and open the index.html document in the main area.
1. Brackest will check whether the document complies with the html specification. As shown in the figure below, there is a style block on 20 lines that needs to be placed in the head node.
2. Place the cursor on the label name of a class or id attribute, press Ctrl/Cmd + E (edit) or exit editing. Brackets will search all CSS files under the project, and then open an embedded editor to embed it in the HTML file, allowing you to quickly modify the CSS code.
When the current class/id tag has multiple style definitions, the editing window provides a toggle button to switch the display style, or you can use the Alt + Up/Down arrow keys to switch.
It should be noted that Brackets will detect the current html document and all CSS files under the project to find class/id styles, even if some CSS files are not referenced in the current html document.
3. Brackets also supports quick preview/editing of JS object definitions. Put the cursor on a js function name, press Ctrl/Cmd + E (edit) or exit editing.
4. Brackets has built-in color picker, providing color coding forms of RGBa, HEX, and HSLa. Put the cursor on a color code, press Ctrl/Cmd + E (Edit). You need to use the Esc key to exit the color collector window.
3. Instant preview
Brackets provides instant preview of web pages. When using this function, Brackets calls Chrome browser to open the current page. After modifying html, css, javascript and saving, the modified content will respond to the page in the browser immediately without manually refreshing the page. This is one of Brackets' biggest highlights. Blessed with two monitor coders, you can display Brackets and Chrome on split screen, instant modification of instant previews without switching editor/browser and refreshing pages.
Some limitations of the current live preview feature:
It only works with Chrome browser as the target browser, you must install Chrome.
It relies on remote debugging in Chrome, which is enabled by a command line flag. On a Mac, if you are already using Chrome, then launch instant preview, Brackets will ask you if you want to restart Chrome to enable remote debugging.
Only one HTML file can be previewed at the same time - if you switch another HTML file, Brackets will close the original preview.
4. Some shortcut keys
Ctrl/Cmd+Shift+H can call out and close the file tree
Ctrl/Cmd + E Quick preview/edit css style/javascript function
Ctrl/Cmd + +/- Zoom in and out of the font size of the editing area
Ctrl/Cmd + 0 Reset the font size of the edit area
Ctrl/Cmd + Alt + P Turn on the instant preview function
Ctrl/Cmd + / Line Comments
Ctrl/Cmd + Alt + / Block Comments
Note: When commenting on css code and html code, you can only use block comment shortcut keys.