Required for beginners! Avenue to simplicity front-end editor Sublime Text, sublimetext

Required for beginners! Avenue to simplicity front-end editor Sublime Text, sublimetext

Many people, including myself, need(Self) Heart (Self) should (HI) Hand (Huan)Development tools, a handy development tool can not only greatly improve your efficiency, but also make you feel comfortable when writing code.

My first front-end development tool is Sublime Text. Let's talk about my understanding of it.

When I was learning the front-end, I also searched for what kind of development tools should I choose for front-end development, just like a lot of people. Almost all of the results were recommended for Sublime, So I downloaded one, after the results are downloaded and opened, the black form is not gorgeous at all (the Chinese translation of sublime is "gorgeous"). Later, I thought about it and Baidu online for a while, I finally understood why sublime is easy to use by so many people, one of the important reasons is its"CustomizationIn sublime, everything you want can be customized and selected by yourself. Change it by yourself; and another feature: quick writing of shortcuts may ask, isn't that difficult? You need to configure your own dump for everything. However, when you write your own code later, you will understand that all the "Blind tossing" is necessary. It is very fast to use Sublime to write some simple demo pages. However, Sublime also has obvious disadvantages, which are not convenient for project management. The Code prompts are not as powerful as other ides.

1. cross-platform editor.

It also supports Windows, Linux, Mac OS X and other operating systems, lightweight editors, and various programming languages.

 

2. sublime plug-in mechanism.

(There are a lot of good articles on the Internet about how to install plug-ins.) To be honest, there is no need to install too many plug-ins. It is better to use professional IDE (integrated development environment) to install too many plug-ins ), share with me a few plug-ins that I can use with ease. The same sublime plug-ins can be installed after being manually downloaded and put into a windows system or a Mac system.

Emmet

 

 EmmetThis is required. Quick and intelligent prompts of html, css, and js can be provided, and shortcut keys for quickly generating the html page skeleton of pages are also provided.

Sublime Server

By default, sublime accesses the page through the file path instead of http localhost: 8080, this can easily cause some file path errors.

 

After the Sublime Server plug-in is installed, you can use htttp to access the page. After the installation is complete, open "tool-sublime server-star sublime server" and Right-click "View in sublimer" on the page.

 

Andy JS2

The Emmet plug-in mentioned above has limited support for JavaScript code prompts. Therefore, you can install the AndyJS2 plug-in to make up for this defect, because the plug-in cannot be found on the package management tool, therefore, you can manually download this plug-in,: http://pan.baidu.com/s/1eSFzd2E download, directly copy the file in the folder to the "preference-Package", then the installation is complete

At this time, I will write the JS Code again, and I will find that many other smart prompts are added.

Some people may say that smart prompts do not have to install so many plug-ins. Why should we use them as sublime? IDE, such as Webstorm or visual studio? However, if you are a beginner, to get familiar with some syntax and code, try sublime. This kind of "gorgeous smart prompt" O (strong _ strong) O

 

ConverToUTF8

If garbled characters appear on the page, you can install the plug-in to remove the garbled characters. This is also a required plug-in.

AllAutoComplete and PackageResourceViwer

For the smart prompts of files in the folder, you can set the CSS class name prompt by modifying the default configuration of sublime. The tutorial address of zhihu is as follows:

 https://zhuanlan.zhihu.com/p/21824377

You can also use PackageResourceViwer to modify the style and font size of the sublime sidebar.

These are plug-ins installed by bloggers themselves.

 

3. Quick Writing of sublime's built-in shortcut keys (1) As mentioned above, use Emmet to quickly generate a page skeleton

Note: select "HTML" in the lower right corner or press "ctrl + s" to save the page.

On the blank page, write html: xt // press the tab key on the keyboard to generate the xhtml page skeleton.

 

On the blank page, write html: 5 // press the tab key on the keyboard to generate the html5 page skeleton.

(2) html, CSS, and quick syntax

There are many other similar syntaxes. Here we will list several common syntaxes. The rest can be searched online.

(3) Cross-row editing

Practice: in the text to be edited, press and hold the scroll wheel key. Note that you press and hold the scroll wheel key, and then pull the mouse down to the lines of the text to be edited, a vertical line appears, and you can edit it now,

 

For myself, Sublime Text is indeed a good Code editor. I will write two other editor Visual Studio Code and IDE Webstorm that I like very much in the future.

I wrote the first long blog article here first. I have to say that writing a blog is really a very tiring thing. It is almost the same as writing a report in a school. However, I can learn about it in a warm-up manner, I think of a lot of things I learned and learned before. This is a good thing!