无敌的Java前台后台开辟工具,Text3应用详细明白
分类:澳门新萄京最大平台

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

2015/04/14 · CSS, HTML5, JavaScript · 调试

原文出处: jingwhale   

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

Sublime Text简介

Sublime Text - 性感的代码编辑器、程序员之必备神器

Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器。Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。SublimeText的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。SublimeText是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

开发工具介绍

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

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

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

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

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

安装Sublime Text 3插件的方法:

直接安装

安装Sublime text 3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages)。

一、Sublime Text的特点:

跨平台、启动快

多行选择

各种实用插件

Snippets

支持VIM兼容模式

Sublime Text获取地址:

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

使用package control安装

网址()

package control 是用来安装其它插件的插件,为了方便管理插件的插件,可以安装删除其他插件

这个特殊的“插件包”,可以很容易地安装、升级、删除,甚至非常方便地查看您已经安装在SublimeText中的包或插件的列表。它通过菜单和对应的行为使这些过程变得非常容易和有组织。

  1. 按Ctrl `或View > Show Console调出console

  2. 粘贴以下代码到底部命令行并回车:

 import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( '' pf.replace(' ', ' ')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

  1. 重启Sublime Text 3。

  2. 如果在Perferences->package settings中看到package control这一项,则安装成功。在Perferences下面会多出package settings和package control两个选项。

如果由于某种原因,控制台安装不成功(如在您的网络上有一个代理),请执行以下步骤来手动安装Package Control:

  1. 点击Preferences > Browse Packages… 

  2. 浏览文件夹,进入Installed Packages/

3. 下载 Package Control.sublime-package 复制到Installed Packages/ 

  1. 重启 Sublime Text

二、常用的插件

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

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

SublimeCodeIntel:代码提示

DocBlocker:对js代码进行注释

JSFormat:格式化js代码

Terminal:使用vim命令

一、Sublime Text的特点:

用Package Control安装插件方法:

首先进入package control 的官网(),找到自己想要的插件,将插件的名字复制下来,然后去sublime里面去安装

  1. 按下Ctrl Shift P调出命令面板

  2. 输入install 或package调出 Install Package 选项并回车,输入刚才找好的插件名称,然后在列表中选中要安装的插件。

澳门新萄京 1

2.1 Package Control

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

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

Sublime text3粘贴如下代码:

JavaScript

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

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 text2粘贴如下代码:

JavaScript

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

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

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

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

a.Package Control下载地址:
b.点击Preferences>BrowsePackages菜单
c.进入打开的目录的上层目录,然后再进入Installed Packages/目录
d.下载Package Control.sublime-package并复制到Installed Packages/目录
e.重启SublimeText。

跨平台、启动快

常用Sublime Text 3插件:

2.2 Emmet

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

基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展。Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员,但也可以用于编程语言。

澳门新萄京 2

多行选择

1. Emmet

编辑器中最流行的插件之一。Emmet,前身Zen Coding也是web开发者提高生产力最有效的方法之一。按下Tab键,Emmet就能把一个缩写展开成一个HTML和CSS代码块,Emmet的使用方法(), Emmet官网, Emmet package control.

解决Sublime提示 Sublime Text Error while loading PyV8 binary:exit code 1 Try to manually install Pyv8 form

  1. 去gihub下载 PyV8,连接地址:

2. 解压文件至PackagesPyV8文件夹内(Preferences – Browser Packages),重启解决。

2.2.1 安装Emmet

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

各种实用插件

2. Synced​Sidebar​Bg

侧边栏颜色与主题一致

2.2.2 使用Emmet

Snippets

3. SideBarEnhancements

这个插件可以给SublimeText的边栏菜单带来扩充的功能,包括:在当前工程文件夹中新建文件,移动文件或文件夹,产生文件或文件夹的副本,在新窗口或浏览器中打开,刷新等。

1) html初始化

输入“!”或“html:5”,然后按Tab键:

澳门新萄京 3

html:5 或!:用于HTML5文档类型
html:xt:用于XHTML过渡文档类型
html:4s:用于HTML4严格文档类型

支持VIM兼容模式

4. Auto​File​Name

自动补全文件路径-非常方便。

2) head标签内操作

引入外部样式表:link:css tab

CSS

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

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

引入内部样式表:style tab

CSS

<style></style>

1
<style></style>

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

JavaScript

<script src=""></script>

1
<script src=""></script>

引入内部js文件:script tab

JavaScript

<script></script>

1
<script></script>

添加网站图标:link:favicon tab

CSS

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

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

设置字符编码:meta:utf tab

XHTML

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

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

设置兼容模式meta:compat tab

XHTML

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

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

演示如下:

澳门新萄京 4

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

5. ColorPicker

如果你经常要查看或设置颜色值,这个插件可以很方便地调用你本机的调色板应用。

Sublime text3 插件ColorPicker(调色板)不能使用快捷键的解决方法

convertToUTF8和ColorPicker快捷键会产生冲突,convertoUTF8的默认转换GBK的快捷键 和 ColorPicker打开调色板的快捷键都是ctrl shift c 。如果你两个插件都安装了的话,就需要进行自定义了。

解决方法:打开Sublime Text --> Preferences --> Browse Packages,找到ConvertToUTF8文件夹并进入,找到对应操作系统的Default.sublime-keymap文件,直接修改成 

[
{ "keys": ["ctrl shift alt c"], "command": "convert_to_utf8", "args": {"encoding": "GBK", "stamp": "0" } }
]

3)  body体内容编辑

●标签:标签名( tab)

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

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

澳门新萄京 5

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

澳门新萄京 6

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

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

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

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

澳门新萄京 7

补充:

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

●嵌套

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

澳门新萄京 8

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

澳门新萄京 9

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

澳门新萄京 10

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

澳门新萄京 11

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

二、常用的插件

6. Theme - Soda

现在我正在使用的主题与配色

使用方法

  • Open your User Settings Preferences file Sublime Text -> Preferences -> Settings - User
  • Add (or update) your theme entry to be "theme": "Soda Light 3.sublime-theme" or "theme": "Soda Dark 3.sublime-theme"
2.2.3 CSS缩写

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

7. Piatto

piatto light配色方案很好看

1).  值

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

CSS

width: 100px;

1
width: 100px;

澳门新萄京 12
除了px,也可以生成其他单位,比如输入h10p m5e,结果如下

CSS

height: 10%; margin: 5em;

1
2
height: 10%;  
margin: 5em;

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

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

8. Spacegray

2).  附加属性

@f

澳门新萄京 13

SublimeCodeIntel:代码提示

9.Theme - Nil

3).  模糊匹配

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

CSS

overflow: hidden;

1
overflow: hidden;

澳门新萄京 14

DocBlocker:对js代码进行注释

10. Convert​To​UTF8

通过本插件,您可以编辑并保存目前编码不被 Sublime Text 支持的文件,特别是中日韩用户使用的 GB2312,GBK,BIG5,EUC-KR,EUC-JP 等。ConvertToUTF8 同时支持 Sublime Text 2 和 3。

4).  供应商前缀

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

CSS

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

1
2
3
4
5
-webkit-transform: ;  
-moz-transform: ;  
-ms-transform: ;  
-o-transform: ;  
transform: ;

澳门新萄京 15

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

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

JSFormat:格式化js代码

11. IMESupport

还在纠结 Sublime Text 中文输入法不能跟随光标吗?试试「IMESupport 」这个插件吧!目前只支持 Windows,在搜索等界面不能很好的跟随光标。

5).  渐变

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

CSS

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

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

Terminal:使用vim命令

12. jQuery

提供jquery的一些snippets片段 ,方便直接调用

2.3、常用的快捷键

2.1 Package Control

13. Material Theme

配色方案很好看,但是有一点暗了

1)、命令板(Ctrl Shift p)

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

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

14. html5

该插件提供许多 html5相关的标签等snippets,也非常实用。

crtl shift p 输入相关内容,可以看到有代码片段,后面是其快捷键

澳门新萄京 16

2)、查找(Ctrl p)

:查找行数,如::300,查找300行

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

#查找关键字,如:#this,查找this

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

15. Js​Format

在你写javascript代码时,按下 Ctrl Alt f 快捷键后,js代码自动格式化对齐,赶快试一试吧!

3)、将光标移动到img或background-image标签上,按下ctrl u,Emmet会自动读取图片的尺寸并添加。

Sublime text3粘贴如下代码:

16. JavaScript Completions

澳门新萄京 17

4)、多行选择

选中一个关键字,按Ctrl d,可以选择多个相同的关键字(每按一次,增加一个)。

1import

17. Bracket​Highlighter

括号以及标签层级显示,不用担心选中的代码属于哪个代码块,一目了然。

澳门新萄京 18

5)、编辑点快捷键分别为ctrl alt left、ctrl alt right。

urllib.request,os; pf = 'PackageControl.sublime-package'; ipp =

19. All Autocomplete

Sublime Text 默认的 Autocomplete 功能只考虑当前的文件,而 AllAutocomplete 插件会搜索所有打开的文件来寻找匹配的提示词。

6)、快速的移除多余的匹配的开始标签与闭合标签,快捷键:ctrl k。

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

sublime.installed_packages_path();urllib.request.install_opener(

20. Color Highlighter

澳门新萄京 19

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

快捷键分别是:alt up/down、ctrl up/down、和alt shift up/down

urllib.request.build_opener(urllib.request.ProxyHandler()) );

21. PHPCS 

8)、上下移动移动代码位置,ctrl shift alt up/down

open(os.path.join(ipp, pf),'wb').write(urllib.request.urlopen(

22. Sublime​Linter-php

9)、数学计算表达式

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

'' pf.replace('',' ')).read())

23. Doc​Blockr

可以生成优美的注释,高效的注释

2.4 DocBlocker

安装

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

Sublime text2粘贴如下代码:

24. AngularJS

AngularJs 补全

25. SVG-Snippets

SVG-Snippets - 设置自定义的SVG片段。

26. CSS Format

有多种css格式化风格

使用方法,安装完成后,在Edit中找到CSS Format,选择相应格式

澳门新萄京 20

27. A File Icon

文件图标

澳门新萄京 21

28. Sublime​Linter-jshint

可以让sublime有javascript语法检查。

安装方法:

 1. 安装SublimeLinter插件( 通过Package Control 来安装)

 2. 安装Node.js

  node -v   输出版本信息,验证安装是否成功。

  澳门新萄京 22

 3. 安装jshint

  SublimeLinter-jshint 是基于 nodeJS 下的 jshint 的插件,实际上 SublimeLinter-jshint 调用了 nodeJS 中 jshint 的接口来进行语法检查的。

  在命令行下输入如下代码:npm install -g jshint 完成安装

 4. 安装好了上面的依赖后,在Package Control中搜索SublimeLinter-jshint插件,然后确认安装。

29. Sublime​Linter-csslint

Sublime​Linter-csslint是用来检查css错误的,安装方法类似于SublimeLinter-jshint

安装方法:

 1. 安装SublimeLinter插件( 通过Package Control 来安装)

 2. 安装Node.js

 3. 安装csslint

  在命令行下输入如下代码:npm install -g csslint完成安装

  1. 安装好了上面的依赖后,在Package Control中搜索SublimeLinter-csslint插件,然后确认安装。

30. Emmet Css Snippets

Emmet Css Snippets是可以自动提示CSS、LESS和SASS语法的sublime text插件。

它的特点有:

  • 可以自动提示CSS、LESS和SASS语法。
  • 有两个版本:has-Prefix 或 no-Prefix。
  • 智能自动完成。
  • 可以提示伪元素。
  • 可以提示扩展属性。

语法参考:

31. Terminal

在当前文件打开终端

32. Vue Syntax Highlight

使vue后缀的代码文件高亮

33. Markdown​Editing

markdown编辑支持高亮

34. scss

支持scss高亮

 

使用

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

澳门新萄京 23

1import

Sublime Text 如何关闭自动更新?

点击菜单栏“Preferences”=> "Settings-User" 进入个人参数设置页面;在大括号"{}"里面插入下面代码:"update_check": false, 保存就行了

2.5 SublimeCodeIntel

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

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

urllib2,os; pf='PackageControl.sublime-package'; ipp =

Sublime主题

在设置一个新的主题时,需要设置``color_scheme和theme两个方面,前者决定了打开不同类型文件的配色,后者决定了Tab栏,SideBar大小和图标,以及相应字体的大小设置。

 sublime 主题(theme)与配色方案(color_scheme),激活主题,不激活主题,使用的只是配色文字,Sublime Text -> Preferences -> Settings - User

Add (or update) your theme entry to be "theme": "XXX.sublime-theme"

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,等待安装完成。

sublime.installed_packages_path(); os.makedirs(ipp ) if not

查看已安装插件

快捷键 Ctrl Shift P,在对话框中输入“list”,选择“Package Control:List Packages”。

Sublime会列出所有已安装的插件。这样可以很方便地了解自己已经安装了哪些插件。

Disable Package:禁用插件

enable Package:启用插件

Install Package:安装插件

List Package:查看已安装插件列表

Remove Package:移除插件

Upgrade Package:升级插件

使用

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

澳门新萄京 24

os.path.exists(ipp) else None;

移除插件

有时候我们需要移除自己不想要的插件,具体操作如下:快捷键 Ctrl Shift P,在对话框中输入“remove”,选择“Package Control: Remove Packages”。 然后在出现的插件列表中点选你要移除的插件。

2.7 Terminal

urllib2.install_opener(urllib2.build_opener( urllib2.ProxyHandler( )));

自定义Sublime

Perferences - Settings-Default中是sublime的默认设置,Settings-user是用户用来自定义设置的,自定义只需复制Settings-Default中的值,粘贴在Settings-User中改变其值就行了,

如复制"line_numbers": true,粘贴在Setttings-User将true改为false保存则行号消失。

安装

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

open( os.path.join( ipp, pf),'wb' ).write( urllib2.urlopen(

侧边栏的显示与隐藏

刚安装好的sublime侧边栏是不显示的,显示的方法是:View > Side Bar > Show Open Files.

使用

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

'' pf.replace( '',' ' )).read()); print(

Sublime改变默认字体

sublime text的默认字体是Consolas

改变默认字体: Preferences-Settings-User

如改变字体为微软雅黑添加:"font_face": "Microsoft YaHei",

澳门新萄京 25

三、snippet

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

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

'Please restart Sublime Text to finishinstallation')

Sublime中增加格式化代码的快捷键

其实在sublime中已经自建了格式化按钮:

Edit -> Line -> Reindent

只是sublime并没有给他赋予快捷键,所以只需加上快捷键即可

Preference -> Key Bindings -user
中括号内添加(比如添加:ctrl alt f)
{ "keys": ["ctrl alt f"], "command": "reindent" }

3.1 新建的文件如下:

JavaScript

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

1
2
3
4
5
6
7
8
9
&lt;snippet&gt;
    &lt;content&gt;&lt;![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]&gt;&lt;/content&gt;
    &lt;!-- Optional: Set a tabTrigger to define how to trigger the snippet --&gt;
    &lt;!-- &lt;tabTrigger&gt;hello&lt;/tabTrigger&gt; --&gt;
    &lt;!-- Optional: Set a scope to limit where the snippet will trigger --&gt;
    &lt;!-- &lt;scope&gt;source.python&lt;/scope&gt; --&gt;
&lt;/snippet&gt;

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

JavaScript

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

1
2
3
4
5
6
7
8
9
&lt;snippet&gt;
    &lt;content&gt;&lt;![CDATA[Type your snippet here]]&gt;&lt;/content&gt;
    &lt;!-- Optional: Tab trigger to activate the snippet --&gt;
    &lt;tabTrigger&gt;hello&lt;/tabTrigger&gt;
    &lt;!-- Optional: Scope the tab trigger will be active in --&gt;
    &lt;scope&gt;source.python&lt;/scope&gt;
    &lt;!-- Optional: Description to show in the menu --&gt;
    &lt;description&gt;My Fancy Snippet&lt;/description&gt;
&lt;/snippet&gt;

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

content:其中必须包含<![CDATA[…]]>,否则无法工作, 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

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

创建可复用的代码片段

我们在编写代码的时候,总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴,大大影响效率。我们利用Sublime Text的snippet功能,就能很好的解决这一问题。通俗的讲,就是把我们常用的代码分别保存起啦,然后通过插件的形式来反复调用。

在菜单上点击Tools -> New Snippet,会新建一个xml文件页签:

这时你会看到如下示例代码:

<``snippet``>

``<``content``>``<![CDATA[

style="color: #0000ff;">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``>

content 里面就是代码模版:${序号:默认值} ,序号相同的地方光标会同时停在那可以多处同时编辑。序号大小就是tabindex。在实际使用代码的时候,可以使用tab切换光标位置。

tabTrigger是指输入该字符串后tab就是在光标插入content中的内容。

scope是指在何种文件类型中使用,如<``scope``>text.html</``scope``>则定义了仅在html文件中使用,所以此时如果我们打开的是css或其他格式的文件,那将无法插入代码段。

现在,你应该有了个大致的了解。那我们就开始自己动手编写一个实例:

<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="loveyunk" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<title>${1}</title>
</head>
<body>
Hello, ${2:this} is a ${3:snippet}.
</body>
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger> style="color: #ff00ff;">html5</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>

创建完毕以后,保存在PackagesUser目录下(例 X:Sublime TextDataPackagesUser),后缀名.sublime-snippet。

此时我们打开一个html文件,输入html5,再按Tab键,刚才我们所编写的代码段,就插入了进来。并且此时的光标停留在我们所标记的${1}位置处,如果我们再按下Tab,那么光标就跳转到${2}的位置。this会被选中。

3.2 修改新建的文件如下:

JavaScript

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

1
2
3
4
5
6
7
8
9
&lt;snippet&gt;
    &lt;content&gt;&lt;![CDATA[
&lt;div&gt;hello world!&lt;/div&gt;
]]&gt;&lt;/content&gt;
    &lt;!-- Optional: Set a tabTrigger to define how to trigger the snippet --&gt;
    &lt;tabTrigger&gt;hello&lt;/tabTrigger&gt;
    &lt;!-- Optional: Set a scope to limit where the snippet will trigger --&gt;
    &lt;scope&gt;text.html&lt;/scope&gt;
&lt;/snippet&gt;

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

Sublime Text 小技巧

  1. 一般推荐下载便携版本(Portable version),这样拿来拿去很方便,也不用安装,而且插件和主体在一个目录下,便携。

2. 查找打开过的文件:Ctrl P,然后输入最近的文件名通过上下箭头键就可以即时预览到文件内容。

3. 快速切换语法模式:CTRL SHIFT P,输入JS,回车切换语法模式为JS模式,css回车,则切换为css模式,主要是找到set Syntax: 选项

4. 文件嵌套较多时用GoTo Anything(快捷键 ctrl p)来查找,符号功能:css文件中输入@搜出所有的css,在css中添加属性可以采用模糊匹配的方法(其中的几个字母),js中@可以查找函数

5. Ctrl D :选择游标所在单词,连续Ctrl D 实现多行选择(选择与第一次选择相同的单词)Ctrl K Ctrl D 跳过当前选择,选择下一个,ctrl D-->Atl F3全选匹配内容

  1. Soda 主题 Piatto Light 配色方案

  2. 按住鼠标中键往下拉,可同时进行多行编辑

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

XHTML

<div>hello world!</div>

1
<div>hello world!</div>

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

sublime代码折叠展开

Ctrl Shift [ 折叠代码
Ctrl Shift ] 展开代码

澳门新萄京 26

b.点击Preferences>BrowsePackages菜单

Sublime Text 3快捷键

选择类

  • Ctrl D 选中光标所占的文本,继续操作则会选中下一个相同的文本。
  • Alt F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名、函数名等。
  • Ctrl L 选中整行,继续操作则继续选择下一行,效果和 Shift ↓ 效果一样。
  • Ctrl Shift L 先选中多行,再按下快捷键,会在每行行尾插入光标,即可同时编辑这些行。
  • Ctrl Shift M 选择括号内的内容(继续选择父括号)。举个栗子:快速选中删除函数中的代码,重写函数体代码或重写括号内里的内容。
  • Ctrl M 光标移动至括号内结束或开始的位置。
  • Ctrl Enter 在下一行插入新行。举个栗子:即使光标不在行尾,也能快速向下插入一行。
  • Ctrl Shift Enter 在上一行插入新行。举个栗子:即使光标不在行首,也能快速向上插入一行。
  • Ctrl Shift [ 选中代码,按下快捷键,折叠代码。
  • Ctrl Shift ] 选中代码,按下快捷键,展开代码。
  • Ctrl K 0 展开所有折叠代码。
  • Ctrl ← 向左单位性地移动光标,快速移动光标。
  • Ctrl → 向右单位性地移动光标,快速移动光标。
  • shift ↑ 向上选中多行。
  • shift ↓ 向下选中多行。
  • Shift ← 向左选中文本。
  • Shift → 向右选中文本。
  • Ctrl Shift ← 向左单位性地选中文本。
  • 无敌的Java前台后台开辟工具,Text3应用详细明白。Ctrl Shift → 向右单位性地选中文本。
  • Ctrl Shift ↑ 将光标所在行和上一行代码互换(将光标所在行插入到上一行之前)。
  • Ctrl Shift ↓ 将光标所在行和下一行代码互换(将光标所在行插入到下一行之后)。
  • Ctrl Alt ↑ 向上添加多行光标,可同时编辑多行。
  • Ctrl Alt ↓ 向下添加多行光标,可同时编辑多行。

编辑类

  • Ctrl J 合并选中的多行代码为一行。举个栗子:将多行格式的CSS属性合并为一行。
  • Ctrl Shift D  复制光标所在整行,插入到下一行。
  • Tab 向右缩进。
  • Shift Tab 向左缩进。
  • Ctrl K K 从光标处开始删除代码至行尾。
  • Ctrl Shift K 删除整行。
  • Ctrl / 注释单行。
  • Ctrl Shift / 注释多行。
  • Ctrl K U 转换大写。
  • Ctrl K L 转换小写。
  • Ctrl Z 撤销。
  • Ctrl Y 恢复撤销。
  • Ctrl U 软撤销,感觉和 Gtrl Z 一样。
  • Ctrl F2 设置书签
  • Ctrl T 左右字母互换。
  • F6 单词检测拼写

搜索类

  • Ctrl F 打开底部搜索框,查找关键字。
  • Ctrl H 查找与替换。
  • Ctrl shift F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找,略高端,未研究。
  • Ctrl P 打开搜索框。举个栗子:1、输入当前项目中的文件名,快速搜索文件,2、输入@和关键字,查找文件中函数名,3、输入:和数字,跳转到文件中该行代码,4、输入#和关键字,查找变量名。
  • Ctrl G 打开搜索框,自动带:,输入数字跳转到该行代码。举个栗子:在页面代码比较长的文件中快速定位。
  • Ctrl R 打开搜索框,自动带@,输入关键字,查找文件中的函数名。举个栗子:在函数较多的页面快速查找某个函数。
  • Ctrl : 打开搜索框,自动带#,输入关键字,查找文件中的变量名、属性名等。
  • Ctrl Shift P 打开命令框。场景栗子:打开命名框,输入关键字,调用sublime text或插件的功能,例如使用package安装插件。
  • Esc 退出光标多行选择,退出搜索框,命令框等。

显示类

  • Ctrl Tab 按文件浏览过的顺序,切换当前窗口的标签页。
  • Ctrl PageDown 向左切换当前窗口的标签页。
  • Ctrl PageUp 向右切换当前窗口的标签页。
  • Alt Shift 1 窗口分屏,恢复默认1屏(非小键盘的数字)
  • Alt Shift 2 左右分屏-2列
  • Alt Shift 3 左右分屏-3列
  • Alt Shift 4 左右分屏-4列
  • Alt Shift 5 等分4屏
  • Alt Shift 8 垂直分屏-2屏
  • Alt Shift 9 垂直分屏-3屏
  • Ctrl K B 开启/关闭侧边栏。
  • F11 全屏模式
  • Shift F11 免打扰模式

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

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

获取地址:

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

澳门新萄京 27

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

澳门新萄京 28

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

澳门新萄京 29

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

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

更多可以阅读:

赞 1 收藏 评论

澳门新萄京 30

c.进入打开的目录的上层目录,然后再进入Installed Packages/目录

Sublime Text 中英文对照

澳门新萄京 31

澳门新萄京 32

澳门新萄京 33澳门新萄京 34

澳门新萄京 35澳门新萄京 36

澳门新萄京 37澳门新萄京 38

澳门新萄京 39澳门新萄京 40

澳门新萄京 41澳门新萄京 42

澳门新萄京 43澳门新萄京 44

澳门新萄京 45澳门新萄京 46

澳门新萄京 47澳门新萄京 48

澳门新萄京 49澳门新萄京 50

 

 

d.下载Package Control.sublime-package并复制到Installed Packages/目录

e.重启SublimeText。

2.2 Emment

Emment是一个Web开发者的工具包,可以大大提高你的HTML和CSS的工作流程。

基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展。Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML

和 CSS 代码的前端开发人员,但也可以用于编程语言。

2.2.1 安装Emment

a、通过快捷键组合ctrl shift P唤出命令面板

b、在面板中输入“install package”后回车

c、接着输入“Emment”,等待安装完成。

2.2.2 使用Emment

1) html初始化

输入“!”或“html:5”,然后按Tab键:

html:5 或!:用于HTML5文档类型

html:xt:用于XHTML过渡文档类型

html:4s:用于HTML4严格文档类型

2) head标签内操作

引入外部样式表:link:css tab

1

引入内部样式表:style tab

1

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

1

引入内部js文件:script tab

1

添加网站图标:link:favicon tab

1

设置字符编码:meta:utf tab

1

设置兼容模式meta:compat tab

1

演示如下:

3)  body体内容编辑

●标签:标签名( tab)

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

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

只输入.item,则Emmet会根据父标签进行判定,一般为div。比如在

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

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,即可生成

1width: 100px;

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

1

2

height: 10%; 

margin: 5em;

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

2).  附加属性

@f

3).  模糊匹配

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

1overflow: hidden;

4).  供应商前缀

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

1

2

3

4

5

-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),会生成如下代码:

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, #无敌的Java前台后台开辟工具,Text3应用详细明白。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 新建的文件如下:

1

2

3

4

5

6

7

8

9

    

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

]]>

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

1

2

3

4

5

6

7

8

9

    

    hello

    source.python

    My Fancy Snippet

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

content:其中必须包含,否则无法工作, 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 修改新建的文件如下:

1

2

3

4

5

6

7

8

9

    

hello world!

]]>

    hello

    text.html

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

1

hello world!

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

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

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

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

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

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

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

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

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:无敌的Java前台后台开辟工具,Text3应用详细明白

上一篇:节流和防抖函数场景介绍,浅谈javascript函数节流 下一篇:没有了
猜你喜欢
热门排行
精彩图文