Sublime text for modules installed using code blocks

Among the many IDE tools for development. The author now Only loves sublime text (hereinafter referred to as St). Previous background development using Visual Studio (hereinafter referred to as VS), and the implementation of the front-end division of labor is also used in conjunction with background vs. two concepts are described here: front-end separation and front-end division. Separation means: The front end system is completed independently. The data only requires the backend to provide API interface calls. Front-end rendering of HTML pages (commonly known as front-end development engineers). Division of labor refers to the design into static pages, write some interactive JS, with the backend to complete the project development. The server renders the HTML page (commonly known as the page Aberdeen). While working full-time on the front end, try using Webstorm (hereinafter referred to as WS) and occasionally use Dreamweaver (hereinafter referred to as DW) at school. Personal feeling DW's interface is ugly. There is no force at all. As a front-end development engineer, of course, the use of a high point of development tools. At present the front-end development tools are more famous for the use of more commonly known as St and WS. Now talk about the advantages of ST: 1. The interface is cool. 2. The highlight color is good. 3. Light weight and small size. The author quotes: The installation force starts from the drip, starts from now. Start with the development tools. Write code must be coquettish. As a tall program ape, there must be good development tools. Just as a master has a weapon that belongs to him. Surprised feather of the chop Gaiden. Small any's soul stick, snow-Chi's Day Eric Sword. The book's weapon, that's toolbox. Tsing F4.

One, the installation of the package control

Among all the plugins in St. Be sure to install the package control first. It can be understood as the manager of the plugin installation package. All the plugins are installed through this download.

1. Press CTRL + ~ to bring up ST's console

2. Copy the following code to the console

A. Suitable for ST3:

Import Urllib.request,os; PF = ' package control.sublime-package '; IPP = Sublime.installed_packages_path (); Urllib.request.install_opener (Urllib.request.build_opener (Urllib.request.ProxyHandler ())); Open (Os.path.join (IPP, PF), ' WB '). Write (Urllib.request.urlopen (' http://sublime.wbond.net/' + pf.replace (', '%20 ')) . Read ())

B. Suitable for ST2:

if 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 (' Restart Sublime Text to finish installation ')

3. Press CTRL + Shift + p to enter PCI Select Install package enter. An input box will pop up. Future plugins are installed in this area. Sometimes it's a long time to bring up the input box. Note the = Sign of the status bar below indicates that it is being processed

Ii. Installation of SVN plugin

In the project development, how to get less svn use. Unless you can develop a project by yourself.

1. If you have SVN installed on your computer. This is equivalent to setting the shortcut key call SVN

2. Copy the following code into the console (Ctrl + ~)

A. Suitable for ST3:

Import  urllib.request,os;pf= ' package control.sublime-package '; Ipp=sublime.installed_packages_path (); Urllib.request.install_opener (Urllib.request.build_opener (Urllib.request.ProxyHandler ())); Open (Os.path.join ( IPP,PF), ' WB '). Write (Urllib.request.urlopen (' http://sublime.wbond.net/' +pf.replace (', ')). Read ())

B. Suitable for ST2:

Import  urllib2,os;pf= ' package control.sublime-package '; Ipp=sublime.installed_packages_path (); Os.makedirs ( IPP) ifnotos.path.exists (IPP) Elsenone;urllib2.install_opener (Urllib2.build_opener (urllib2. Proxyhandler ())), open (Os.path.join (IPP,PF), ' WB '). Write (Urllib2.urlopen (' http://sublime.wbond.net/' +pf.replace ( ","). Read ());p rint (' Restart Sublime Text to finish installation ')

3. Download Sublime TEXE2/3 's svn plugin online

4. Click Preferences-Browse Resource packs

5. in File Explorer. Create a new SVN folder. Put the downloaded SVN plugin into the SVN folder.

6. If there is an SVN commit in the project file right-click Plugin, svnupdate verify the installation is successful

Third, code syntax check plug-in

1. Press Ctrl + Shift + p to enter PCI Select Install package Enter

2. Enter Sublimelinter for installation

3. After the installation is complete, press Ctrl + Shift + p to enter PCI to select the install package enter.

4. Enter Sublimelinter-jshint for installation

5. Because the Jshint component relies on the jshint inside the Nodejs, the Jshint must be installed globally in the NODEJS environment. Perform NPM install-g jshint in the cmd window using jshint-v to see if the installation was successful

6. If the NODEJS environment is not installed, the 5th above is not operational. Next, briefly describe the installation Nodejs environment. If it is installed, ignore the direct next step

A. Go to the official website to download the appropriate system. Let's take window as an example

B. Take the next step of the fool until you are done.

C. Remember to configure environment variables

D. Use node-v && npm-v to see if its version verification was successfully installed

7. The same is true for installing CSS code validation. Enter the plugin library to install the Sublimeliter-csslint plugin

Installation of Csslint in 8.nodejs environment is also needed. Perform NPM install-g csslint in cmd window

9. Configuration: Paste the following code on Preferences-pageckage settings-sublimelinter-settings-user OK

{"User": {"Debug": false, "delay": 0.25, "Error_color": "D02000", "Gutter_theme": "Packag Es/sublimelinter/gutter-themes/default/default.gutter-theme "," gutter_theme_excludes ": []," Lint_mode ":" BAC                Kground "," Linters ": {" Jshint ": {" @disable ": false," args ": [],        "Excludes": []}, "Mark_style": "Outline", "No_column_highlights_line": false,        "Passive_warnings": false, "paths": {"Linux": [], "OSX": [], "Windows": []        }, "Python_paths": {"Linux": [], "OSX": [], "Windows": []}, "Rc_search_limit": 3, "Shell_timeout": Ten, "Show_errors_on_save": false, "Show_marks_in_minimap": Tru E, "Syntax_map": {"HTML (Django)": "HTML", "HTML (Rails)": "HTML", "HTML 5": "htm L "," JavascriPT (Babel) ":" JavaScript "," Magicpython ":" Python "," PHP ":" html "," Python Django ":" Pyth On "," pythonimproved ":" Python "}," Warning_color ":" DDB700 "," Wrap_find ": True}}

Iv. Customizing a block of code

1.tools-New Code snippet (new Snippet)

2. You will see the following code, first of all do not be ignorant

<snippet>    <content><!  [Cdata[hello, ${1:This} is a ${2: Snippet}.] ></content>    <!--optional:set a tabtrigger to define what to trigger the snippet-    <!--<ta Btrigger>hello</tabtrigger>-    <!--optional:set a scope to limit where the snippet would trigger--&G t;    <!--<scope>source.python</scope>--></snippet>

Explain the above code

1 <snippet>2     <content><![ cdata[you need to insert the code snippet ${1:name},test, ${2} ]]></content>3     <!--optional: Shortcut keys with tab Auto-complete code- 4     <tabTrigger>cygnet</tabTrigger>5     <!--Optional: Use range, do not fill in the representative for all files valid. Attached: Source.css and test.html correspond to different documents respectively. -6     <scope>source.js</scope>7     <!--Optional: Display instructions in the Snippet menu (Chinese is supported). If not defined, the menu displays the file name of the current file. -8     <description>my Fancy snippet</description>9 </snippet>

${1:name} indicates where the cursor is positioned after the code is inserted, and can be inserted more than once. Where: Name is a custom parameter (optional)

${2} indicates that after the code is inserted, pressing the TAB key, the cursor jumps to the appropriate position (and so on) in order.

3. Save in \packages\user directory (example X:\Sublime Text 2.0\data\packages\user), file name Cygnet-code, suffix. Sublime-snippet.

4. Open an HTML file. Input cygnet Press TAB to automatically generate your custom code block

Sublime text for modules installed using code blocks