使用的是日文版Windows系统,在编辑中文时很多编译器不支持中文,保存后出现严重的乱码。今天决定安装Sublime Text版本2.0.2。
在这里介绍一下,下载及安装Sublime Text的方法。
1) 点击以下链接访问Sublime Text官网。
2) 点击「Downalod」。
在这里直接点击「Download 佛如Windows」也可以。
3) 下载Sublime Text版本2.0.2。
在这里选择的是Windows32位版,需根据实际情况选择下载的版本。
1) 双击下载的「Sublime Text 2.0.2 Setup.exe」文件之后,点击「Next」。
2) 安装目录使用默认,点击「Next」。
3) 勾选「Add to explorer context menu」后,点击「Next」。
4) 点击「Install」安装Sublime Text。
5) 点击「Finish」完成Sublime Text的安装。
如果没有安装Sublime Text的Package Control的话,可以进行手动安装。
1) 点击以下链接,访问Package Control官网。
2) 启动Sublime Text之后,依次点击「Preferences」->「Browse Packages」。
3) 选择「Sublime Text 2\Installed Packages」目录
点击「Browse Packages」的目录是「Sublime Text 2\Packages」,需要选择「Sublime Text 2\Installed Packages」目录。
4) 安装Package Control
把下载的「Package Control.sublime-package」文件存放到「Sublime Text 2\Installed Packages」目录下。
5) 重启Sublime Text后,就可以在「Preferences」下出现了「Package Control」。
最近编辑PHP和HTML及CSS时间较多,因此安装如下Sublime Text插件。有多种多样的插件根据实际需要安装就可以。而安装插件的方法是一样的以SublimeCodeIntel为例,介绍安装Sublime Text插件的方法。
1) 启动Subliem Text之后依次点击「Preferences」->「Package Control」。
或者使用快捷键「Ctrl + Shift + p」启动Package Control。
2) 输入「Package Control:ins」。
3) 输入安装的插件名「SublimeCodeIntel」。
在这里输入插件名称的一部分的话,会显示相关插件名称。
安装完成SublimeCodeIntel插件之后会显示如下页面,但是并不是所有插件都会显示类似信息。
4) 重启Sublime Text,完成插件的安装。
Emmet的使用方法可参照Emmet官网,可以大大的减少编写代码的时间。
Sublime Text是一个代码编辑器,也是HTML和散文先进的文本编辑器。
本文通过实例来介绍项目中常用快捷键和插件的用法,熟悉快捷键和引用插件可以极大地提高我们的开发效率。
输入“html:5”后点击Tab键或输入“!”后点击Ctrl+E都能转换为html5的骨架结构,转换为的代码如下图:
Tips:需安装Emmet插件;
右下角的文本类型要选为“html”。
输入“div.wrapper>div.header>span.title{标题}”或“ul.lis>li*5>p.title+p.content”后点击Tab可以快速生成相应的代码,转换为的代码如下图:
Tips:上面两种写法只是其中的一部分,大家可以自己练习多种组合;
img[src="face/bd/$.gif"] +Tab,bd目录下自动从1开始到最后,适合于一次性增加从1--多个的图片。
“Ctrl+Shift+P”用于快速更改文件类型(js/css)(第一图)、安装插件(第二图)等,如下图:
“Ctrl+G”用于快速定位到行数,比如审查元素知道修改的样式在那一行,就可以点击快捷键,然后输入行数,就能定位到相应的位置进行修改;
“Ctrl+C”用于撤回信息,而“Ctrl+Y”用于恢复信息,都可多次操作;
“Ctrl+/”用于注释信息,可单行也可以多行;
“Ctrl+F”用于查找输入的内容,可往前、往后或全部查找;
“Ctrl+Shirt+D”用于复制游标所在行;
“Ctrl+D”用于选择游标所在单词,连续“Ctrl+D”实现多个选择(选择与第一次选择相同的单词);如果中间有要跳过的相同单词,可以先点击“Ctrl+K”再点击“Ctrl+D”;
“Alt+F3”用于选择所有与游标所在单词相同的单词,跟上面一个快捷键对于批量修改非常方便。
“Alt+Shift+1/2/3”,后面数字表示要显示多少列,如下图,对于参照html编写css和js有很大的便利。
Tips:从标题到这块是最经常用到的快捷键,一定熟悉记住。
“Ctrl+] ”增加缩进,“Ctrl+] ” 减小缩进,好的排版有利于查看;
“Ctrl+Shift+V”保持缩进粘贴,直接用“Ctrl+V”有时会导致显示排版乱了,使用该快捷键可以保持原来的排版;
“Ctrl+PgUp”往前切换Tab栏的文件,“Ctrl+PgDn”往后切换Tab栏的文件;
“/**+Tab”常用于js的自动补全注释信息和内容;
“Ctrl+P”用于快速查找并打开文件,点击快捷键后打开命令面板,直接点击就可以打开文件,也可以进行搜索操作;
“Ctrl+L”用于选择单行;
“Ctrl+H”用于查找替换,可替换单个或全部替换;
“Ctrl+Shift+Enter”在当前上方添加一行;
右键点击“Open Containing Folder”可以打开该文件的本地目录。
“Ctrl+Shift+P”打开命令面板,输入range点击第一条就会出现了,然后输入开始和结束数字,可以批量修改序号,需安装插件Text Pastry。
“跟踪函数ctags”在使用函数调转功能前,需要先生成.tags文件,只需在项目文件管理器的项目文件上右键点击Ctags:Rebuild Tags即可(注意,在改动文件之后会重新生成.tags);所有工作都准备充分之后,就可以在函数名上右键点击navigate 头definition跳转到指定函数了,返回用jump back,需安装插件ctags。
直接安装:直接下载安装包解压缩到Packages目录(菜单->preferences->Browse Packages);
使用Package Control组件安装(在线安装):点击“Ctrl+`”,然后输入“import urllib.request,os; pf = 'Package Control.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 Text程序;如果在Perferences->中看到package control这一项,则安装成功。
Tips:输入代码为3版本,其他版本代码可以百度搜索。
用Package Control安装插件的方法,按下“Ctrl+Shift+P”调出命令面板,输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。
比如“Emmet”,在搜索框输入“Emmet”,列表就会显示插件“Emmet”,然后点击该条数据,就会开始安装该插件,安装信息可查看左下角。
Tips:安装插件时保持网络畅通,避免插件由于网络原因奔溃。
常用插件的用法说明:
Emmet(原名 Zen Coding):一种快速编写html/css的方法;
Autoprefixer:CSS3私有前缀自动补全插件;
AutoFileName:显示路径下文件名;
SyncedSidebarBg:自动同步侧边栏底色为编辑窗口底色;
HTML-CSS-JS Prettify:html/css/js格式化工具,依赖node.js,格式化的HTML不能有中文和中文符号等,HTMLPrettify.sublime-settings路径对应node安装目录,使用快捷键“Ctrl+Shift+H”;
sublimelinter:检查js语法;
jQuery:补全JQ代码;
Text Pastry:可以一次性改批量序号,用法快捷键里面有介绍;
ctags:跟踪函数,用法快捷键里面有介绍;
Less2Css:保存less文件时候自动生成css文件,windows下,Less2CSS对lessc.cmd有依赖,请下载:https://github.com/duncansmart/less.js-windows/releases后并将其路径( E:/Less)添加至系统环境变量中;一般建议生产环境不使用less,所以这个还是蛮方便的;
SideBarEnhancements:设置浏览器,如下图。
Sublime Text 是一套跨平台的文本编辑器,支持基于Python的插件。Sublime Text 是专有软件,可通过包(Package)扩充本身的功能。大多数的包使用自由软件授权发布,并由社区建置维护。
“Go to anything”功能:可快速跳至文件、符号或行数。
“Command palette”功能:弹性快捷键功能。
多行选择功能:同时修改多内联容。
基于 Python 语言的外挂 API。
针对个别项目使用不同的编辑器设置。
通过 JSON 文件自定义设置值。
跨平台(Windows、Linux 和 Mac OS X)。
兼容 TextMate 的语言标记语法。
3.1 Package Control
除了自身拥有无数实用功能和特性之外,它还能安装使用各种扩展/皮肤/配色方案等来增强自己。现在介绍的这个 Package Control 可以看做是一个ST2的扩展管理器,使用它,你可以用非常神奇、非常简单方便的方法去下载、安装、删除 Sublime Text 2 的各种插件、皮肤等,相信我,想更好地使用 ST2 绝对不能没有它!不过 ST2 本身并没有自带这个工具,我们需要自行安装它,方法很简单:
1、在 SublimeText2 的目录里面找到 Data > Installed Packages 的文件夹 (如没有请手动新建)
2、在这里下载 Package Control.sublime-package 文件
3、将下载到的文件放进去 Installed Packages 里面
4、重新启动 Sublime Text 即可如果 Package Control 已经安装成功,那么 Ctrl+Shift+P 调用命令面板,我们就会找到一些以“Package Control:”开头的命令,我们常用到的就是几个 Install Package (安装扩展)、List Packages (列出全部扩展)、Remove Package (移除扩展)、Upgrade Package (升级扩展)。
但如果你按照上面的方法确实搞不定,可以试试按键盘 Ctrl+~ (数字1左边的按键)调出控制台,然后拷贝下面的代码进去并回车,它会自动帮你新建文件夹并下载文件的,与上面的方法最终效果是一样的:
import urllib2,os,hashlib; h = '2deb499853c4371624f5a07e27c334aa' + 'bf8c4e67d14fb0525ba4f89698a6d7e1'; pf = 'Package Control.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()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
3.2 GBK to UTF8
将文件编码从GBK转换成UTF8,快捷键Ctrl+Shift+C
3.3 zenCoding
zenCoding是一种快速的html、css编写方式。默认用tab键.
已经更名为Emmet。
3.4 JS Format
一个JS代码格式化插件。默认ctrl+alt+f
3.5 BracketHighlighter
括弧高亮插件,清晰明了
3.6 Git
代码版本管理
3.7 HTML格式化
TAG
3.8 SideBarEnhancements
配置浏览器打开文件
在sublime-text中设置浏览器预览
3.9 docblockr
安装DocBlockr插件后,在function上一行输入/**,然后按Tab就自动补全注释,生成注释如下所示:
/**
* [clone description]
* @param {[type]}
* @return {[type]}
*/
function
clone(obj){
}
3.10 HTML/CSS/JS prettify
HTML/CSS/JS格式化插件
Sublime Text 2 - 性感无比的代码编辑器!程序员必备神器!跨平台支持Win/Mac/Linux
前端开发必备!Emmet使用手册
Emmet:HTML/CSS代码快速编写神器
Sublime text 2编辑器
*请认真填写需求信息,我们会在24小时内与您取得联系。