Front-end technology-development and debugging tools_html/css_WEB-ITnose

Development and debugging tools for page production (1)

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

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

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 text2Paste 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( 'Please restart Sublime Text to finishinstallation')

If everything goes well, you will now be able to 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 Emment

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

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 "Emment" and wait for the installation to complete.

2.2.2 Use Emment 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) Operations within the head tag

Introduce external style sheet: link:css tab

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

Introduce internal style sheet: style tab

<style></style>

Introduce external js files: script:src tab

<script src=""></script>

Introduce internal js file: script tab

<script></script>

Add website icon: link:favicon tab

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

settings 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 demonstration is as follows:

3) Body content editing

●Tags: Tag name (tab)

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

Class: Tag name. id The name (tab) can only be followed by an id

. If you only enter .item, Emmet will determine it based on the parent tag, which is usually div. For example, if you enter .item in ff6d136ddc5fdfeffaf53ff6ee95f185, 9604d36f5470805d630707577fa3eb63bed06894275b65c1ab86501b08a632eb will be generated.

Here are all the implicit tag names:

li：用于ul和ol中
tr：用于table、tbody、thead和tfoot中
td：用于tr中
option：用于select和optgroup中

●标签的内容：标签名{内容}

标签内的属性：标签名[属性名=属性值]，如：a[href=www.baidu.com]

补充：

表单method属性

form:post（get）

input属性添加缩写（部分）

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

●嵌套

>：子元素符号，表示嵌套的元素
+：同级标签符号
^：可以使该符号前的标签提升一行

●分组（）
可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo>h1)+(.bar>h2)，会自动生成如下代码：

●定义多个元素*
要定义多个元素，可以使用*符号。比如，ul>li*3可以生成如下代码

●计数器 $
在我们做”轮播“时，给元素的命名（id或者class），都会有一个计数位，这个时候，我们就可以使用 $ 它来实现了，如下：

可以合理组合各种操作来写出复杂样式的代码块。

2.2.3 CSS缩写 1).  值

比如要定义元素的宽度，只需输入w100，即可生成

width: 100px;

除了px，也可以生成其他单位，比如输入h10p+m5e，结果如下

height: 10%;  margin: 5em;

单位别名列表： p 表示%、e 表示 em、x 表示 ex

2).  附加属性

@f+

3).  模糊匹配

如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：

overflow: hidden;

4).  供应商前缀

如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trf，则会生成：

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

如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：

前缀缩写如下： w 表示 -webkit-、m 表示 -moz-、 s 表示 -ms-、o 表示 -o-

5).  渐变

输入lg(left, #fff 50%, #000)，会生成如下代码：

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、常用的快捷键 1）、命令板（Ctrl+Shift+p）

常用，新建文件时（为对文件进行保存），设置文件的语境：按Ctrl+Shift+p调出命令板，键入sshtml设置html语境sshtml，键入sscss设置css语境，键入ssjs设置js语境，这样进行所在语境的代码高亮和提示。

2）、查找（Ctrl+p）

: 查找行数，如：:300，查找300行

@  定位js里的函数、css里的选择器，如：@show，定位js文件中的show方法

# 查找关键字，如：#this，查找this

3）、将光标移动到img或background-image标签上，按下ctrl+u，Emmet会自动读取图片的尺寸并添加。 4）、多行选择

选中一个关键字，按Ctrl+d，可以选择多个相同的关键字（每按一次，增加一个），如下：

5）、编辑点快捷键分别为ctrl+alt+left、ctrl+alt+right。 6）、快速的移除多余的匹配的开始标签与闭合标签，快捷键：ctrl+k。

在一些大型的HTML代码中，有时标签嵌套的太多，通过Emmet移除标签这一功能。

7）、数字递增/递减，可以以0.1、1和10三个值进行递增/递减

快捷键分别是：alt+up/down、ctrl+up/down、和alt+shift+up/down。

8）、上下移动移动代码位置，ctrl+shift+alt+up/down 9）、数学计算表达式

有了Emmet在HTML和CSS文件中都可以进行简单的数字运算，神奇了，输入4*8再按ctrl+shift+y，Emmet能给出最终的结果。

2.4 DocBlocker

安装

a、通过快捷键组合ctrl+shift+P唤出命令面板
b、在面板中输入“install package”后回车
c、接着输入“DocBlocker”，等待安装完成

使用

在要注释函数的上方，按‘/**’+tab键对代码进行注释。

2.5 SublimeCodeIntel

SublimeCodeIntel是一个非常强大的代码提示插件。

a、通过快捷键组合ctrl+shift+P唤出命令面板
b、在面板中输入“install package”后回车
c、接着输入“SublimeCodeIntel”，等待安装完成。

2.6 JSFormat

安装

a、首先通过以下路径打开用户按键绑定文件：
     Preferences → Key Bindings ? User
b、然后在其中添加以下代码（如果你有需要的话，其中的快捷键组合是可以自己定义的）：
    {"keys": ["ctrl+shift+r"], "command": "reindent" , "args": {"single_line": false}}

c、安装JSFormat
    ●通过快捷键组合ctrl+shift+P唤出命令面板
    ●在面板中输入“install package”后回车
    ●接着输入“format”（即格式化的意思），在弹出的列表中找到对应你所想要进行格式化操作的语言，这里我们是对js格式化，选择JSFormat，等待安装完成。

使用

选中没有格式化的代码，按‘Ctrl+Shift+r’对代码进行格式化。

2.7 Terminal

安装

a、通过快捷键组合ctrl+shift+P唤出命令面板
b、在面板中输入“install package”后回车
c、接着输入“Terminal”，等待安装完成。

使用

任意处按esc键进入vim命令状态，可以使用vim命令。退出，按a。

三、snippet

Snippet 是插入到文本中的智能模板并使这段文本适当当前代码环境。程序员总是会不断的重写一些简单的代码片段，这种工作乏味无聊，而Snippet的出现会让Code更加高效。

Snippet可以存储在任何的文件夹中，Snippet文件是以.sublime-snippet为扩展的XML文件，可以命名为XXX.sublime-snippet，创建自己的snippet的方式为菜单栏Tools->New Snippet。

3.1 新建的文件如下：

<snippet>    <content><![CDATA[Hello, ${1:this} is a ${2:snippet}.]]></content>    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->    <!-- <tabTrigger>hello</tabTrigger> -->    <!-- Optional: Set a scope to limit where the snippet will trigger -->    <!-- <scope>source.python</scope> --></snippet>

为了方便理解简化以上代码:

<snippet>    <content><![CDATA[Type your snippet here]]></content>    <!-- Optional: Tab trigger to activate the snippet -->    <tabTrigger>hello</tabTrigger>    <!-- Optional: Scope the tab trigger will be active in -->    <scope>source.python</scope>    <!-- Optional: Description to show in the menu -->    <description>My Fancy Snippet</description></snippet>

简要介绍一下snippet四个组成部分:

content:其中必须包含2963dcafef8686bc91e578183ecdbb7f,否则无法工作, Type your snippet here用来写你自己的代码片段
tabTrigger:用来引发代码片段的字符或者字符串, 比如在以上例子上, 在编辑窗口输入hello然后按下tab就会在编辑器输出Type your snippet here这段代码片段
scope: 表示你的代码片段会在那种语言环境下激活, 比如上面代码定义了source.python, 意思是这段代码片段会在python语言环境下激活.
description :展示代码片段的描述, 如果不写的话, 默认使用代码片段的文件名作为描述

常用的scope（语言类source，标签类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 修改新建的文件如下：

<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 will trigger -->    <scope>text.html</scope></snippet>

3.3 在html里输入hello，按回车，显示如下：

<div>hello world!</div>

四、 [F5] Web开发免刷新（保存即刷新）

[F5]是支持所有编辑器和浏览器的网页开发免刷工具，让你在保存代码的同时，自动刷新页面。

获取地址：http://getf5.com/

4.1 解压，打开f5.exe，自动打开默认浏览器

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

4.3 Drag the project folder into sublime, and create a new file required for the project , and refresh the browser

Click to enter the html page to be edited.

4.4 Feel free to edit html and css codes in sublime, save (ctrl s), and the page will automatically refresh.

You can read more:

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

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

Reprinting must be marked with the word reprint, the original author and the original blog post address.