Brackets -- my first love Editor, brackets -- my first love

Brackets -- my first love Editor, brackets -- my first love

After I graduated from college, I did not find my professional counterpart in some trivial matters, and I had no determination or opportunity to break the status quo. However, every time you think about it alone, you are always afraid that you will never do anything. As a result, I began to read some learning resources on the Internet and learn some web knowledge on the Internet.

After a short period of study, I found that I was truly ignorant. Today, there are a lot of online learning resources, such as the Netease cloud class workshop that I first came into contact. The interface of the cloud classroom is well designed and there are many courses. You don't have to say that MOOC has learned some basic knowledge from the place where programmers practice and the content is very good; the lab building was accidentally discovered. Its characteristic is that it will give you a virtual Linux environment, so that you can study in Linux. It really feels like doing experiments at school, but I don't know if it's a problem with my computer. Sometimes it gets stuck inexplicably.

Today, Brackets, the main character, was recognized in the environment of the experiment building. At that time, I felt that the editor's interface was simple and convenient. Later I searched for this editor on my computer, I did not expect it to happen in the win system, and the online reviews were also good, with a great trend. So here is a brief introduction.

 

Brackets is an open-source integrated development environment based on HTML, CSS, and JavaScript. The project is created and maintained by Adobe. Supports Windows and Linux platforms. Brackets features simplicity and quickness. Its core goal is to reduce inefficient repetitive work during development, such as refreshing browsers, modifying element styles, and searching functions.

GoBrackets downloadDownload the required version.

I. Brackets Interface

Open Brackets. The entire interface is simple. The left side is the file tree of the project organization structure. You can use Ctrl/Cmd + Shift + H to call out and close the file tree. The right side is the editing area, the top is the menu bar, the middle is the document area, and the lower is the prompt area.

　　

The latest version of Brackets also supports skin and font selection:

　　

This is the built-in dark skin, and I personally feel very good.

Ii. text editing

Brackets automatically checks whether your Code complies with the specifications and prompts below;

Place the cursor on the class and id labels, press Ctrl/Cmd + E ("edit"), or exit editing. Brackets searches for all CSS files under the project and opens an embedded editor embedded in the HTML file, allowing you to quickly modify the CSS code.

　　

Brackets also supports quick preview/editing of JS object definitions. Place the cursor on a js function name, press Ctrl/Cmd + E ("edit"), or exit editing.

The Brackets built-in color filter provides color encoding formats such as RGBa, HEX, and HSLa. Place the cursor on a color code and press Ctrl/Cmd + E ("edit"). The Esc key is required to exit the color picker window.

　　

 

3. Instant Preview

Of course, Brackets's instant preview function is worth mentioning.

When Brackets uses the preview function, Brackets calls the Chrome browser to open the current page. After html, css, and javascript are modified and saved, the modified content will immediately respond to the page in the browser, you do not need to manually refresh the page. This is one of the biggest highlights of Brackets. coder with two monitors is blessed, and Brackets and chrome can be displayed on a split screen, instantly modifying instant preview without switching between Editor/browser and refreshing pages.

However, the current instant preview feature has some limitations:
It only applies to Chrome as the target browser. You must install Chrome.
It depends on the remote debugging function in the Chrome browser, which is a command line flag enabled. On Mac, if you are already using the Chrome browser, start "instant preview" and Brackets will ask if you want to restart the Chrome browser to enable remote debugging.
You can only preview one HTML file at the same time-if you switch to another HTML file, Brackets will disable the original preview.

Iv. Required plug-ins

To improve efficiency, how can we reduce the number of omnipotent plug-ins? We recommend several plug-ins for Brackets to make your compaction Code take off quickly.

1. Can I us

You don't have to leave Brackets to check whether the current browser supports a specific WEB technology.

　　

2. HTML Skeleton

HTML Skeleton can quickly insert basic tags for your HTML files, such as doctype declaration,

　　

3. Brackets Icons

This is a very simple plug-in that adds a file icon to the Brackets sidebar. This icon provides a good visual experience and helps you quickly identify the type of the file you want to edit.

　　

4. js css Minifier

This plugin removes unnecessary characters from your JavaScript and CSS files. This process becomes compressed, which can increase the loading speed of web pages.

5. Emmet

This plug-in is essential if you are engaged in Web Front-end development. It can speed up HTML and CSS writing.

6. Beautify

This plugin allows you to format HTML, CSS, JavaScript, and other code to improve readability.

Of course there are many useful and interesting plug-ins. I will not introduce them one by one here. If you feel good, try it yourself.

 

I'm a little yellow radish, an IT cainiao. You are welcome to share your experiences with me.

Article If You Need To reprint please indicate Reprinted from: http://www.cnblogs.com/Elecrabbit/articles/6442481.html