Development tools for page authoring

Development tools for page authoring

Reproduced in http://www.cnblogs.com/jingwhale/p/4421021.html

NetEase Cloud Class Notes

Introduction to Development tools

Development tools are generally divided into two types: a text editor and an integrated development environment (IDE)

Common text editors: Sublime Text, notepad++, EditPlus, etc.

Common Ides: Webstorm, Intellij idea, ECLIPCE, etc.

We mainly describe how to use the sublime text editor, which basically satisfies our needs for front-end development tools.

First, the characteristics of Sublime text:

Cross-platform, start-up fast

Multi-line selection

Various utility plugins

Snippets

Supports VIM compatibility mode

Sublime text get address: http://www.sublimetext.com/

Second, the common plug-in

Package Control: before installing another plug-in, first install the

emment: Web Developer toolkit that can greatly improve your HTML and CSS workflow

Sublimecodeintel: Code hints

Docblocker: comment on JS code

jsformat: formatting JS code

Terminal: using the VIM command

2.1 Package Control

Before installing the other plug-ins, first install the package Control, with the following steps:

Use CTRL + ' shortcut keys or open the command line via the View->show console menu,

Sublime text3 Paste the following code:

Import Urllib.request,os; PF = ' Packagecontrol.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 ())

Sublime text2 Paste the following code:

Import Urllib2,os; pf= ' Packagecontrol.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 (' Restart Sublime Text to Finishinstallation ')

If it goes well, you can now see the package settings and the package control two menus under the Preferences menu.

You may not be able to use code installation for a variety of reasons, and you can manually install the package Control by using the following steps:

A. Package Control:http://files.cnblogs.com/files/jingwhale/packagecontrol.zip
B. Click the Preferences>browsepackages menu
c. Go to the upper directory of the Open directory and then enter the installed packages/directory
d. Download the package control.sublime-package and copy it to the installed packages/directory
E. Restart Sublimetext.

2.2 Emment

Emment is a web Developer toolkit that can greatly improve the workflow of your HTML and CSS.

Basically, most text editors will allow you to store and reuse some blocks of code that we call "fragments." While fragments can be a good way to drive your productivity, most implementations have a drawback: you have to define your code snippet first, and you can't expand it when you run it. Emmet the concept of fragments to a new level: You can set the CSS form to dynamically parse the expression, and then according to the abbreviations you entered to get the corresponding content. Emmet is very mature and well suited for front-end developers who write Html/xml and CSS code, but can also be used in programming languages.

2.2.1 Installation Emment

A, through the shortcut key combination ctrl+shift+p Summon command panel
B, enter "install package" in the panel and return
C, then enter "Emment", waiting for the installation to complete.

2.2.2 using EMMENT1) HTML initialization

Enter "!" or "Html:5", then press the TAB key:

html:5 or!: for HTML5 document types
html:xt: For XHTML transition Document types
html:4s: for HTML4 Strict document types

2) head tag inside operation

Introducing an external style sheet: Link:css+tab

<link rel= "stylesheet" href= "Style.css" >

Introducing an internal style sheet: Style+tab

<style></style>

Introduction of external JS file: Script:src+tab

<script src= "" ></script>

Introduction of Internal JS file: Script+tab

<script></script>

Add Site icon: Link:favicon+tab

<link rel= "shortcut icon" type= "Image/x-icon" href= "Favicon.ico" >

Set character encoding: Meta:utf+tab

<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >

Set compatibility Mode Meta:compat+tab

<meta http-equiv= "x-ua-compatible" content= "ie=7" >

The demo is as follows:

3) Body Body content editing

Tags: tag name (+tab)

ID: tag name #+ class name (+tab), can be followed by multiple classes

class: tag name . +id name (+tab), can only be followed by an ID

When you enter only. Item, the Emmet is determined by the parent tag, typically a div. For example, entering. Item in <ul> will generate <li class= "item" ></li>.

Here are all the implicit tag names:

li: used in UL and OL
tr: for table, Tbody, THEAD, and Tfoot
TD: used in TR
option: for Select and Optgroup

contents of Tag : Tag name { content }

Properties within tags : label name [property name = attribute value], such as: a[href=www.baidu.com]

Add:

Form Method Property

Form:post (GET)

Input attribute add abbreviation (partial)

Input->INP
Input:hidden->input:h
input:text->input:t
input:password->input:p
input:checkbox->input:c
input:radio->input:r
Input:submit->input:s
input:button->input:b

Nesting

: A child element symbol that represents a nested element
+: sibling tag symbol
^: You can raise the label in front of the symbol by one line

Group ()
You can quickly generate blocks of code, such as input (. foo>h1) + (. bar>h2), by nesting and parentheses , and automatically generate the following code:

Define multiple elements *
To define multiple elements, you can use the * symbol. For example, UL>LI*3 can generate the following code

Counter $
When we do "carousel", give the element a name (ID or Class), there will be a count of digits, this time, we can use it to achieve, as follows:

Various operations can be reasonably combined to write code blocks of complex styles.

2.2.3 CSS abbreviation 1). Value

For example, to define the width of an element, simply enter w100to generate

width:100px;

In addition to PX, other units can be generated, such as input h10p+m5e, the result is as follows

height:10%;  Margin:5em;

List of unit aliases : p for%,e for EM,x for ex

2). Additional Properties

@f+

3). Fuzzy Matching

If you are unsure of some abbreviations, Emmet will match your input to the closest syntax, such as input ov:h, ov-h, OVH, and oh, and the generated code is the same:

Overflow:hidden;

4). Vendor Prefix

If you enter a non-standard CSS property, Emmet automatically adds a vendor prefix, such as input TRF, which generates:

-webkit-transform:;  -moz-transform:;  -ms-transform:;  -o-transform:;  Transform:;

If you do not want to add all the prefixes, you can use abbreviations to specify, such as-WM-TRF to add only the-webkit and-moz prefixes:

The prefix is abbreviated as follows: w means-webkit-,m means-moz-, s represents-ms-,o represents-o-

5). Gradient

Entering LG (left, #fff 50%, #000) generates the following code:

Background-image:-webkit-linear-gradient (left, #fff 50%, #000); Background-image:-o-linear-gradient (left, #fff 50%, # Background-image:linear-gradient (to right, #fff 50%, #000);

2.3. Common shortcut keys 1), command Board (CTRL+SHIFT+P)

Commonly used, when creating a new file (to save the file), set the context of the file: press Ctrl+shift+p to bring up the command board, type sshtml to set the HTML context sshtml, type the SSCSS settings CSS context, type SSJS settings js context, This makes the code highlighting and prompting in the context.

2), find (Ctrl+p)

: Find rows , such as:: 300, find 300 rows

@ positioning js function , CSS selector, such as: @show, positioning the JS file Show method

# Find keywords , such as: #this, find this

3), move the cursor to the IMG or Background-image label, and press Ctrl+u,emmet to automatically read the dimensions of the picture and add it. 4), multi-line selection

Select a keyword and press ctrl+dto select multiple identical keywords (one per click).

5), edit point shortcut keys are Ctrl+alt+left, Ctrl+alt+right, respectively. 6), quickly remove the extra matching start tag and closing tag, shortcut key: Ctrl+k.

In some large HTML code, sometimes the label is nested too much, remove the label by Emmet the function.

7), number increment/decrement, can increment/decrement with 0.1, 1 and 103 values

The shortcut keys are:Alt+up/down, Ctrl+up/down, and Alt+shift+up/down.

8), move up and down mobile code position, CTRL+SHIFT+ALT+UP/DOWN9), mathematical calculation expression

With Emmet in the HTML and CSS files can be simple numeric operations, magic, input 4*8 and then press Ctrl+shift+y, Emmet can give the final result.

2.4 Docblocker

Installation

A, through the shortcut key combination ctrl+shift+p Summon command panel
B, enter "install package" in the panel and return
C, then enter "Docblocker", waiting for the installation to complete

Use

At the top of the function you want to annotate, press the '/** ' +tab key to annotate the code.

2.5 Sublimecodeintel

Sublimecodeintel is a very powerful code hint plugin.

A, through the shortcut key combination ctrl+shift+p Summon command panel
B, enter "install package" in the panel and return
C, then enter "Sublimecodeintel", waiting for the installation to complete.

2.6 Jsformat

Installation

A, first open the user key binding file through the following path:
Preferences→key Bindings–user
B, and then add the following code in it (the shortcut key combinations can be defined if you need them):
{"Keys": ["Ctrl+shift+r"], "command": "Reindent", "args": {"Single_line": false}}

C, installation Jsformat
Ctrl+shift+p the command panel with shortcut key combinations
Enter "Install package" in the panel and return
Then enter "format" (that is, the format of the meaning), in the pop-up list to find the corresponding format you want to do the language, here we are the JS format, select Jsformat, wait for the installation to complete.

Use

Select the code that is not formatted, and press ' ctrl+shift+r ' to format the code.

2.7 Terminal Installation

A, through the shortcut key combination ctrl+shift+p Summon command panel
B, enter "install package" in the panel and return
C, then enter "Terminal", waiting for the installation to complete.

Use

Press ESC at any point to enter the VIM command state, you can use the VIM command. Exit, press A.

Third, snippet

Snippet is a smart template inserted into the text and makes the text appropriate for the current code environment. Programmers are always rewriting simple snippets of code that are tedious and boring, and that snippet's presence makes code more efficient.

Snippet can be stored in any folder, the snippet file is an XML file with the. sublime-snippet extension, which can be named Xxx.sublime-snippet, creating its own snippet way for the menu bar Tools->new Snippet.

3.1 The new file is as follows:

<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>

Simplify the above code for ease of understanding:

<snippet>    <content><![ Cdata[type your snippet here]]></content>    <!--Optional:tab trigger to activate the snippet--    & Lt;tabtrigger>hello</tabtrigger>    <!--optional:scope The TAB trigger'll be active in--    < Scope>source.python</scope>    <!--optional:description to show in the menu--    <description >my Fancy snippet</description></snippet>

A brief introduction to the snippet four components:

content: which must contain <! [cdata[...] Otherwise, it will not work, Type your snippet here to write your own code snippet
Tabtrigger: The character or string used to throw a snippet, as in the above example, typing hello in the edit window and pressing TAB will output the Type your snippet here code snippet
scope: Indicates that your code snippet will be activated in that locale , such as the above code defines Source.python, meaning that this snippet will be activated in the Python language environment.
Description: Shows the description of the code snippet and, if not written, uses the file name of the code snippet as a description

Common scope (language class source, Label class text):

HTML: text.html
CSS: source.css
Javascript: source.js
JSON: Source.json
SASS: source.sass
XML: text.xml
Markdown: text.html.markdown
Ruby: Source.ruby
PHP: source.php
Latex: Text.tex.latex

Java: Source.java

JSP: text.html.jsp

3.2 Modify the newly created file as follows:

<snippet>    <content><![ Cdata[<div>hello world!</div>]]></content>    <!--optional:set a tabtrigger to define how to Trigger the snippet-    <tabTrigger>hello</tabTrigger>    <!--optional:set a scope to limit Where the snippet would trigger-    <scope>text.html</scope></snippet>

3.3 Enter Hello in HTML and press ENTER to display the following:

<div>hello world!</div>

Iv. [F5] Web Development Refresh free (save as refresh)

[F5] is a Web page development-free tool that supports all editors and browsers, allowing you to automatically refresh the page while saving your code.

Get Address: http://getf5.com/

4.1 Unzip, open F5.exe, automatically open default browser

4.2 Create a new project folder, copy the project folder path to the Add Item list box, click Add

4.3 Drag the project folder to sublime, create the required files for the project, and refresh the browser

Click to enter the HTML page you want to edit.

Enjoy the sublime editing HTML, CSS code, and F5 implementation of the Save (ctrl+s) page will be automatically refreshed.

More to read:

Http://www.w3cplus.com/tools/emmet-cheat-sheet.html

http://www.douban.com/note/299431022/

Reproduced must be reproduced in the words, the original author and the original post address.

Development tools for page authoring