Introduce a niche IDE and an IDE

Introduce a niche IDE and an IDE

What IDE do you usually use as a front-end engineer? atom, webstorm, sublime, or vscode?

Today, we will introduce a niche IDE, Adobe's open-source project Brackets, and provide support for Windows and OS X platforms. Brackets features simplicity and quickness, and does not have many views or panels. I feel that using Brackets in front-end development will save a lot of extra operations. For example, press the broken F5 key! Real-time preview is supported to avoid switching between the browser and IDE.

Official website address: http://brackets.io/because the project is on github So download speed to see the character!

The official support for simplified Chinese is provided, but it seems that the font support is not very good. Select debug-> language-> simple chinese on the menu bar to change to the Simplified chinese version.

The right sidebar is a quick preview from top to bottom. After ctrl + s is saved, the browser automatically updates the display effect. However, this function currently only supports Chrome. The next step is the Extension Manager. Here we mainly download or view some of the required plug-ins, but there are currently few supported, but I will list some common ones later. The next step is the quick formatting tool, which is similar to the beautify plug-in. You can quickly optimize the html, css, and js formats for easy reading.

After formatting:

The last quick html generation tool is different from sublime. This tool supports selective addition of content.

Brackets shortcut

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 the font size of the editing area

Ctrl/Cmd + 0 reset the font size of the editing area

Ctrl/Cmd + Alt + P enable the instant preview function

Ctrl/Cmd +/line comment

Ctrl/Cmd + Alt +/block comment

 

Common Brackets plug-ins

1. Code formatting plug-in: Beautify

Open the Brackets plug-in Manager and search for beauets installation.
After the installation is complete, select Edit → beautify (or press ctrl + alt + L) on the menu to format the code.

2. HTML code editing: Emmet

The most powerful HTML and CSS quick editing plug-in should be known at the front end!

3. CSS and JS compression plug-ins: Minify

A powerful plug-in that integrates CSS and JS compression to automatically generate. min files in the same directory.

4.css 3 code auto-completion plug-in: auto prefix

Use css3 data on CanIUse to automatically complete the css3 prefix and browser compatibility, but it may be somewhat new. Some old browsers will be discarded.

5. When the editor is closed, all unsaved Files are automatically saved: Autosave Files on Window Blur.

Similar to sublime, phpstorm, and webstorm.

6. Brackets topic: theme

This extension is used to use a CodeMirror-based Topic set. After the extension is installed, the "Themes" menu appears in the Application menu. You can select a topic for the application interface.

 

I don't know if this IDE doesn't suit your taste?