Home > Developer > Web Develop

Summary of Sublime Text2 emmet installation (formerly known as Zen Coding)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First, install Sublime (I use version 2), after registration, Sublime Text2.0.2 registration code: http://xionggang163.blog.163.com/blog/static/376538322013930104310297/

I read an article on the Internet about front-end development tools and learned that such a powerful tool exists. Web site is as follows: http://bbs.csdn.net/topics/390758377 inside the 4th point development tool http://www.cnblogs.com/jikey/p/3607133.html has introduced emmet this plug-in.


So I started to think about installing this plug-in. First I found the 2 articles, http://www.ituring.com.cn/article/47310 http://blog.csdn.net/del1214/article/details/8092266

I found my Sublime 2 could not properly open Ctrl + ~ (Control Panel), So, find the http://ifalone.me/636.html found or can not solve later and find the http://www.codeif.com/topic/1167, the original is and QQ pinyin conflict. After resolving the conflict, use the method described in the above article: copy the following code to the console, press enter, and restart. (Main reference: http://www.tuicool.com/articles/2ua2aa)

Import urllib2, OS; pf = 'package Control. sublime-package '; ipp = sublime. installed_packages_path (); OS. makedirs (ipp) if not OS. path. exists (ipp) else None; urllib2.install _ opener (urllib2.build _ opener (urllib2.ProxyHandler (); open (OS. path. join (ipp, pf), 'wb '). write (urllib2.urlopen ('HTTP: // sublime.wbond.net/'{pf.replace ('', '% 20 ')). read (); print 'Please restart Sublime Text to finish installation'



After the installation, restart and start our quick development.

For example, input: body> div>. top>. center> p + h1> # bottom

Press the "tab" key or Ctrl + E to complete the following (strong)

<body><div><div class="top"><div class="center"><p></p>






This brother also encountered such a problem: http://caibaojian.com/sublime-text2-tutorial.html





Share 7 super practical Emmet (zen coding) HTML code tips: http://bbs.html5cn.org/thread-10963-1-1.html




 
    
 
  
  • > Subnode: add an element under the DOM tree.
    • 
 
  
  • + Same level: add an element to the same layer of the DOM tree.
    • 
 
  
  • ^ Up layer: Add and create an element to the up layer.
    • 

 









Http://www.cnblogs.com/leecanz/archive/2012/03/04/2379446.html


Sublime text2 shortcut:




Automatic completion: the shortcut key for Automatic completion is Tab. If you enter cl in the html file and press the tab, the system will automatically fill in "class =". After zencoding is added, it will be even more powerful.


L multi-column Editing: press ctrl and click the mouse to display multiple blinking cursors. You can modify multiple




Or press and hold the mouseKeyDrag,






Code annotation function: ctrl +/, ctrl + shift +/without comments and block comments, and then click it to remove comments, ST2 can automatically identify html, css, or js files and provide different types of annotations.


L row operation: ctrl + alt + ↓, ctrl + alt + ↓ swap up or down two rows, ctrl + enter, insert blank lines after the cursor, ctrl + d select similar, you can refer to the shortcut key list.


L right-click:




The first three, we all know, 4th, show unsaved changes, display unsaved changes, red minus signs indicate deleted content, and green plus signs indicate new content








Key shortcut list


Ctrl + X cut the entire line


Ctrl + L select the entire line (Press and hold-continue to select downstream)


Ctrl + KK Delete from cursor to end of line


Ctrl + Shift + K Delete the entire row


Ctrl + Shift + D copy the entire row where the cursor is located and insert it before this row


Ctrl + J merge rows (multiple rows to be merged have been selected)


Ctrl + KU to uppercase


Ctrl + KL to lowercase


Ctrl + D (Press and hold-continue to select the next same string)


Ctrl + M move the cursor to the start or end position in parentheses


Ctrl + Shift + M select the content in the brackets (Press and hold-continue to select the parent bracket)


Ctrl +/comment out the entire line (if the selected content is used, the effect is the same as that of "Ctrl + Shift +)


Ctrl + Shift +/comment on selected content


Ctrl + Z undo


Ctrl + Y resume undo


Ctrl + M jump to the corresponding parentheses


Alt +. Close the current tag


Ctrl + Shift + A select the cursor position parent tag


Ctrl + Shift + [collapse code


Ctrl + Shift +] Show Code


Ctrl + KT fold Property


Ctrl + K0 show all


Ctrl + U soft undo


Ctrl + T word Interchange


Tab indent automatically completed


Shift + Tab remove indentation


Ctrl + Shift + swap and uplink swap


Ctrl + Shift + swap and downstream


Ctrl + K Backspace Delete from cursor to first line


Ctrl + Enter insert row after cursor


Ctrl + Shift + Enter insert row before cursor


Ctrl + F2 set bookmarks


Next bookmarks on F2


Shift + F2 bookmarks

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
text2 comparison operators also known as relational operators individual values contained in array known as zen of css design storage size of isn t known types of coding languages as result of

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More