Development and debugging tools for page production (1)_html/css_WEB-ITnose

Original source: jingwhale Welcome to share your original work on Bole Toutiao

Introduction to development tools

Development tools are generally divided into two types: text editors and integrated development environments (IDE)

Commonly used text editors: Sublime Text, Notepad, EditPlus, etc.

Commonly used IDEs: WebStorm, Intellij IDEA, Eclipce etc.

Here we mainly introduce how to use the Sublime Text editor, which basically meets our needs for front-end development tools.

1. Features of Sublime Text:

Cross-platform, fast startup

Multi-line selection

Various practical plug-ins

Snippets

Support VIM compatibility mode

Sublime Text Get address ：http://www.sublimetext.com/

2. Commonly used plug-ins

Package Control: Before installing other plug-ins, first install Package Control

Emmet: Web developer’s toolkit that can greatly improve your HTML and CSS workflow

SublimeCodeIntel: Coding tips

DocBlocker: Comment js code

JSFormat: Format js code

Terminal: Use vim command

2.1 Package Control

Before installing other plug-ins, first install Package Control. The specific steps are as follows:

Use the Ctrl ` shortcut key or open the command line through the View->Show Console menu,

Sublime text3Paste the following code:

1

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('',' ')).read())

Sublime text2Paste the following code:

1

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( '',' ' )).read()); print( 'Please restart Sublime Text to finishinstallation')

If everything goes well, you will see the Package Settings and Package Control menus under the Preferences menu.

It may be impossible to install using code due to various reasons, then you can manually install Package Control through the following steps:

a.Package Control download address:
b.Click Preferences>BrowsePackages menu
c.Enter the upper directory of the opened directory, and then enter the Installed Packages/directory
d.Download Package Control.sublime-package and copy to the Installed Packages/ directory
e.Restart SublimeText.

2.2 Emmet

Emmet is a web developer's toolkit that can greatly improve your HTML and CSS workflow.

Basically, most text editors will allow you to store and reuse chunks of code, which we call "snippets." While snippets are great for boosting your productivity, most implementations have the disadvantage that you must first define your code snippets, and they can't be extended at runtime. Emmet takes the concept of fragments to a new level: you can set expressions in the form of CSS that can be dynamically parsed, and then get the corresponding content based on the abbreviation you enter. Emmet is mature and well suited for front-end developers writing HTML/XML and CSS code, but can also be used for programming languages.

2.2.1 Install Emmet

a, Use the shortcut key combination ctrl shift P to call up the command panel
b, in the panel Enter "install package" and press Enter
c, then enter "Emmet" and wait for the installation to complete.

2.2.2 Using Emmet 1) html initialization

Enter "!" or "html:5", and then press the Tab key:

html:5 or !: for HTML5 document type
html:xt : for XHTML transitional document type
html:4s: for HTML4 strict document type

2) Operation within the head tag

introduces an external style sheet: link:css tab

1

Introduces internal style sheet: style tab

1

Introduce external js files: script:src tab

1

< ;script src= "" >

Introducing internal js files: script tab

1

<script></script>

Add favicon: link:favicon tab

1

Set character encoding: meta:utf tab

1

< meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" >

Set compatibility mode meta :compat tab

1

< meta http-equiv = "X-UA-Compatible" content = "IE=7" > ;

The demonstration is as follows:

3) Body content editing

● Tag: Tag name (tab)

●id: Tag name# Class name (tab), can be followed by multiple classes

Category: Tag name. id name (tab), can only be followed by one id

Only enter .item, then Emmet will proceed based on the parent tag Determination, usually div. For example, if you enter .item in

,
will be generated.

The following are all implicit tag names:

li: is used in ul and ol
tr: used in table, tbody, thead and tfoot
td: used in tr
option: used in select and optgroup

●Content of tag: Tag name{Content}

Attributes within tag : Tag name [attribute name = attribute value], such as: a[href=www.baidu.com]

Supplementary:

Form method attribute

form:post(get)

Input attribute add abbreviation (part)

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

>: child element symbol, representing nested elements
: sibling tag symbol
^:You can raise the label before the symbol by one line

●Group()
can be quickly done by nesting and brackets Generate some code blocks, such as input (.foo>h1) (.bar>h2), the following code will be automatically generated:

● Define multiple elements *
To define multiple elements, you can use the * symbols. For example, ul>li*3 can generate the following code

●Counter $
When we do "carousel", name the element (id or class), there will be a counting bit. At this time, we can use $ to implement it, as follows:

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

2.2.3 CSS abbreviation 1). Value

For example, to define the width of an element, just enter w100 to generate

1

width : 100px;


In addition to px, other units can also be generated, such as inputting h10p m5e, the result is as follows

1

2

height : 10% ;

margin : 5em ;

Unit alias list: p means %, e means em, x means ex

2). Additional attributes

@f

3). Fuzzy matching

If you are not sure about some abbreviations, Emmet will match the closest syntax based on your input content, such as entering ov:h, ov-h, ovh and oh, the generated code is Same:

1

overflow : hidden ;

4). Vendor prefix

If you enter non-W3C standard CSS attributes, Emmet will automatically add the vendor prefix. For example, if you enter trf, it will generate:

1

2

3

4

5

-webkit-transform: ;

-moz-transform: ;

-ms-transform: ;

-o-transform: ;

transform: ;

If you do not want to add all prefixes, you can use an abbreviation to specify, for example, -wm-trf means only adding -webkit and -moz prefixes:

prefix The abbreviations are as follows: w means -webkit-, m means -moz-, s means -ms-, o means -o-

5). Gradient

input lg(left, #fff 50%, #000), will generate the following code:

1

2

3

background-image : -webkit-linear-gradient( left , #fff 50% , #000 );

background-image : -o-linear-gradient( left , #fff 50% , #000 );

background-image : linear-gradient(to right , #fff 50% , #000 );

2.3. Commonly used shortcut keys 1), command pad (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 palette, type sshtml to set the html context sshtml, type sscss to set the css context, type ssjs to set the js context, so as to perform code highlighting and prompts in the context.

2), search (Ctrl p)

:Search for the number of lines , such as: :300, search for 300 lines

@ Positioning Function in js, selector in css, such as: @show, locate the show method

# in the js file to find the keyword , such as : #this, search for this

3) Move the cursor to the img or background-image tag, press ctrl u, Emmet will automatically read the size of the image and add it. 4) Multi-line selection

Select a keyword and press Ctrl d to select multiple identical keywords (one will be added each time you press it).

5) The shortcut keys for editing points are ctrl alt left and ctrl alt right. 6) Quickly remove redundant matching start tags and closing tags, shortcut key: ctrl k.

In some large HTML codes, sometimes there are too many tags nested. Use Emmet to remove tags.

7) Number increment/decrement can be done with three values: 0.1, 1 and 10

The shortcut keys are: alt up/down, ctrl up/down, and alt shift up /down.

8), move the code position up and down, ctrl shift alt up/down 9), mathematical calculation expressions

With Emmet, you can perform simple numerical operations in HTML and CSS files, it’s amazing, enter 4 *8 Press ctrl shift y again, Emmet can give the final result.

2.4 DocBlocker

Installation

a, Use the shortcut key combination ctrl shift P to call up the command panel
b, Enter "install package" in the panel and press Enter
c, Then enter "DocBlocker" and wait for the installation to complete

Use

above the function to be commented, and press The '/**' tab key comments the code.

2.5 SublimeCodeIntel

SublimeCodeIntel is a very powerful code prompt plug-in.

a, Use the shortcut key combination ctrl shift P to call up the command panel
b, Enter "install package" in the panel and press Enter
c, Then enter "SublimeCodeIntel" and wait 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, Then add the following code in it (if If you need, the shortcut key combinations can be defined by yourself):
{"keys": ["ctrl shift r"], "command": "reindent" , "args": {"single_line": false}}

c, Install JSFormat
●Use the shortcut key combination ctrl shift P to call up the command panel
●Enter "install package" in the panel and press Enter
● Then enter "format" (which means formatting), and find the language corresponding to the formatting operation you want in the pop-up list. Here we are formatting js, select JSFormat, and wait for the installation to complete.

Use

to select the unformatted code and press ‘Ctrl Shift r’ to format the code.

2.7 Terminal

Installation

a, Use the shortcut key combination ctrl shift P to call up the command panel
b , Enter "install package" in the panel and press Enter
c, Then enter "Terminal" and wait for the installation to complete.

Use

Press the esc key anywhere to enter the vim command state. You can use the vim command. To exit, press a.

3. snippet

Snippet is a smart template that is inserted into the text and makes the text suitable for the current code environment. Programmers always keep rewriting some simple code snippets. This kind of work is tedious and boring, and the emergence of Snippet will make Code more efficient.

Snippet can be stored in any folder. Snippet files are XML files with .sublime-snippet as the extension. They can be named XXX.sublime-snippet. The way to create your own snippet is through the menu bar Tools->New Snippet.

3.1 The newly created files are as follows:

1

2

3

4

5

6

7

8

9

; ![CDATA[

Hello, ${1:this} is a ${2:snippet}.

]]>

  < !-- Optional: Set a tabTrigger to define how to trigger the snippet -->

; ;!-- Optional: Set a scope to limit where the snippet will trigger --> 🎜>

The above code is simplified for easier understanding:
1

2

3

4

5

6

7

8

9

                                     - Optional: Tab trigger to activate the snippet -->
hello

->

; source.python

; ;description>My Fancy Snippet

A brief introduction to the four components of snippet:

content: It must contain ,otherwise it will not work. Type your snippet here to write your own code snippets
tabTrigger: Characters or strings used to trigger code snippets. For example, in the above example, entering hello in the editing window and pressing tab will output Type your snippet here this code snippet
scope: Indicates that your code snippet will be activated in that language environment. For example, the above code defines source.python, which means that this code snippet will be activated in the python language environment.
description: Displays the description of the code snippet . If not written, the file name of the code snippet will be used as the description by default

Commonly used scopes (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:

1

2

3

4

5

6

7

8

9

;hello world!