你的位置:首页 > 软件开发 > ASP.net > 页面制作之开发调试工具(1)

页面制作之开发调试工具(1)

发布时间:2015-04-27 16:00:53
原文出处: jingwhale 欢迎分享原创到伯乐头条开发工具介绍开发工具一般分为两种类型:文本编辑器和集成开发环境(IDE)常用的文本编辑器:Sublime Text、Notepad++、EditPlus等常用的IDE:WebStorm、Intellij I ...

页面制作之开发调试工具(1)

原文出处: jingwhale   欢迎分享原创到伯乐头条

开发工具介绍

开发工具一般分为两种类型:文本编辑器和集成开发环境(IDE)

常用的文本编辑器:Sublime Text、Notepad++、EditPlus等

常用的IDE:WebStorm、Intellij IDEA、Eclipce等

我们这里主要介绍如何使用Sublime Text编辑器,它基本满足我们对前端开发工具的需求。

一、Sublime Text的特点:

跨平台、启动快

多行选择

各种实用插件

Snippets

支持VIM兼容模式

Sublime Text获取地址:http://www.sublimetext.com/

二、常用的插件

Package Control:安装其他插件之前,首先先安装Package Control

Emmet:Web开发者的工具包,可以大大提高你的HTML和CSS的工作流程

SublimeCodeIntel:代码提示

DocBlocker:对js代码进行注释

JSFormat:格式化js代码

Terminal:使用vim命令

2.1 Package Control

安装其他插件之前,首先先安装Package Control,具体步骤如下:

使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行,

Sublime text3粘贴如下代码:

1

Sublime text2粘贴如下代码:

1

如果顺利的话,此时就可以在Preferences菜单下看到Package Settings和Package Control两个菜单了。

可能由于各种原因,无法使用代码安装,那可以通过以下步骤手动安装Package Control:

a.Package Control下载地址:http://files.cnblogs.com/files/jingwhale/PackageControl.zip

引入内部样式表:style+tab

1

引入外部js文件:script:src+tab

1

引入内部js文件:script+tab

1

添加网站图标:link:favicon+tab

1

设置字符编码:meta:utf+tab

1

设置兼容模式meta:compat+tab

1

演示如下:

页面制作之开发调试工具(1)

3)  body体内容编辑

●标签:标签名(+tab)

●id:标签名#+类名称(+tab),可以跟多个类

类:标签名.+id名称(+tab),仅可以跟一个id

页面制作之开发调试工具(1)

只输入.item,则Emmet会根据父标签进行判定,一般为div。比如在<ul>中输入.item,就会生成<li></li>。

页面制作之开发调试工具(1)

下面是所有的隐式标签名称:

li:用于ul和ol中

页面制作之开发调试工具(1)

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

2).  附加属性

@f+

页面制作之开发调试工具(1)

3).  模糊匹配

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

1

页面制作之开发调试工具(1)

4).  供应商前缀

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

1

页面制作之开发调试工具(1)

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

前缀缩写如下:表示 -webkit-、m 表示 -moz-、 表示 -ms-、o 表示 -o-

5).  渐变

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

1
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唤出命令面板

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

1

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

content:其中必须包含<![CDATA[…]]>,否则无法工作, Type your snippet here用来写你自己的代码片段

3.3 在html里输入hello,按回车,显示如下:
1

页面制作之开发调试工具(1)

四、 [F5] Web开发免刷新(保存即刷新)

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

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

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

页面制作之开发调试工具(1)

4.2 新建项目文件夹,将项目文件夹路径拷贝至添加项目列表框,点击添加

页面制作之开发调试工具(1)

4.3 将项目文件夹拖至sublime中,新建项目所需文件,并刷新浏览器

页面制作之开发调试工具(1)

点击进入要编辑的html页面。

4.4 尽情的在sublime里编辑html、css代码,保存(ctrl+s),页面会自动刷新。

更多可以阅读:

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

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


原标题:页面制作之开发调试工具(1)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录