The brackets of Web front-end development tools

Recently saw a lot of people hot discussion brackets, this is a development tool designed for the front-end development, the interface looks very tall, and there are many features, and is open-source Yo!

Extensions: You can install extensions for brackets and increase the functionality of brackets. The most heated extension is the one that can open the PSD (forget what the name is), and other utility plugins such as Emmet.

Real-time preview: It's cool to say that you haven't used an editor that can be previewed in real time.

Here is the copy:

Brackets is an open source Web development-oriented editor created using Html,css,javascript. Real-time preview, fast editing, cross-platform, extensible, open source, make Brackets an excellent editor. You can download this editor (Brackets.io) on his website. The Web page will provide you with the corresponding version of the Brackets editor based on your operating system. If you choose to download, you need to pay attention to the format of the software, in general . DMG is software that is used on MAC systems, and. msi can be installed on Windows systems.

Brackets ways to switch languages:

Brackets support multiple languages, the default installation after the interface is English, you can choose your favorite language.

1. Debug, Switch Language
2. Click the drop down menu and choose the language you want
3. Click Reload Brackets

Brackets Open Directory

Generally start a project, you can go to create a new directory, the project needs to put the files in this directory, Brackets support open the entire directory, through the editor sidebar tree structure, you can easily manage project files.

• Method One: Open menu, file--Open Directory
• Method Two: Use shortcut keys:ALT + COMMAND + O

The structure of this directory will be displayed on the sidebar of the editor, opening the corresponding directory, and will continue to show what is contained in this directory. You can also hide it when you don't need a sidebar (view-- hidden sidebar or SHIFT + COMMAND + H).

Quick Navigation

With quick navigation, you can quickly find files in your project.

• Method One: Open the menu: navigation, open quick navigation
• Method Two: Use shortcut keys:SHIFT + COMMAND + O

Directly enter the name of the file you want to find, Brackets will give you a list of files containing this file name, click on the corresponding file, you can open this file.

Work Area

Open files, will be displayed in the workspace , click the corresponding file, you can quickly switch between different files. Files that have been modified are not saved, and a dot appears to the left of the file name.

Live Preview

• Method One: Open menu: file--Real-time preview
• Method Two: Use shortcut keys:ALT + COMMAND + P
• Method Three: Click on the lightning bolt icon in the top right corner of the main interface

Brackets will open a Chrome browser window for you to display the document you are editing in real time. That is, you can now modify the contents of the document, or the document linked to the style sheet and script files, the changes will be in real-time in the browser display. Note that in real-time preview, you can't use the browser's developer tools, but when you open the Developer tool, the live preview will expire.

If not specifically specified, Brackets will use the built-in Web server Live Preview file, you can also go to the real-time preview to specify a Web server, for example, you may want to preview PHP files in real-time, you can use the development environment built on the local computer, Put the project directory in your own server directory, such as the semantic directory below, so that use http://79px.com This address can access to your project, then you can make this address as a real-time preview of the basic address.

Open File--- project Settings and enter the address of the preview, for example:http://79px.com, so you can preview the file based on this address when you use the live preview.

Quick Edit

• Method One: Open menu: Navigation--Quick Edit
• Method Two: Use shortcut keys:command + E

Brackets allows us to quickly edit HTML or CSS documents. Quickly edit HTML documents to quickly add or modify styles for selected elements. The editor will show you all the styles applied to the selected element, select the corresponding style, and go directly to modify, so you don't need to find the corresponding style sheet, the corresponding place to modify. Quick edits also apply to CSS documents, such as on color properties, display a color selector, or animate properties, showing a tool to adjust the animation curve. Very very convenient.

Extended

You can add functionality to the Brackets editing installation extension. You can view the available extensions in Brackets Extension Registry, where you can also submit your own written extensions.

• Method One: file-and extension manager
• Method Two: Click on the block style icon in the top right corner of the main interface (the one below the Lightning icon)

After opening the Extension Manager , you can find the extension you want to use, click Install , and install the extension in the available tab. Open the installed tab to manage extensions already installed on the editor, where you can upgrade or remove these extensions.

Common Extensions Quick Edit code-Emmet

Emmet allows us to write HTML and CSS code in writing form, which is very convenient. Ninghao Network has a course specifically introducing the Emmet plugin.

Change Style-Themes

You can change the style of the editor. After installation, the main menu will have a Themes , open later, select the desired theme.

Collapse code block--code folding

Let the html,css,javascript,php code be folded up. Under the View menu, there are a few more menu items.

• Collapse Current: Collapse the code block
• Expand Current: Expanding the code block
• Collapse All: Collapse All code
• Expand All: Expand All code

Automatic Formatting-beautify

Automatically give you the formatting of javascript,html,css and other code. Under the edit menu, there are two more menu items:beautify and beautify on Save.

The brackets of Web front-end development tools