一、前言之前
从设计到前端,有过一段时间是懵懵懂懂的状态,缺乏对整个职业更加深入的了解。后来混迹于各个前端大牛的博客,在各个QQ群里聆听各路大神的经验之谈,坚定了前端之路的信心。一直收藏各类精华的帖子和网址,分门别类;关注很多知名网站和各路大神的博客,时刻感觉到要了解的东西太多,要学习的东西太多。越是深入,越是觉得自己欠缺的东西很多,却总是静不下心,手头上的东西也看不进去,这状态不行,得改变,静心看书,将高程和语言精粹多看几遍,多练习,试着写笔记,不求进步神速,只求一步一个脚印,养成良好习惯,一点一点积累,向大牛靠拢。
二、前言
说到前端开发,有个合适的工具很重要,工欲善其事必先利其器。editplus、notepad++都是不错的工具,体积轻巧,启动迅速,但是插件功能太少;dw太大。sublime text将是一个不错的选择,将各类的插件配置完毕后,你会发现原来编辑器也可以如此的性感妖娆,不少前端er纷纷抛弃用了数年的“伙伴”,投入了她的怀抱。ST2不是免费的,但可以永久免费使用,只是在保存的时候,偶尔会弹出要你购买注册的对话框。官网地址:http://www.sublimetext.com/2
三、界面功能
这是安装了插件后的界面,黑色大气美观,代码高亮功能非常性感,写js的时候,感觉最为深刻。
三、设置
界面上各种功能区域就不一一详细介绍了,下面介绍重点的DIY和快捷键
第一个是用户设置,第二个用户快捷方式设置,不要在default中设置,免得更新后丢失。
{
"detect_slow_plugins": false,
"font_size": 13,
"highlight_line": true,
"ignored_packages": "Vintage",
"line_padding_bottom": 1,
"line_padding_top": 1,
"margin": 4,
"tab_size": 2,
"update_check": false,
"word_wrap": true
}
将配置代码复制进去,具体的数值可以根据需要修改
打开第二个文件,里面设置各种自定义的快捷方式
各类强大的快捷方式:
Ctrl+L 选择整行(按住-继续选择下行)
Ctrl+KK 从光标处删除至行尾
Ctrl+Shift+K 删除整行
Ctrl+Shift+D 复制光标所在整行,插入在该行之前
Ctrl+J 合并行(已选择需要合并的多行时)
Ctrl+KU 改为大写
Ctrl+KL 改为小写
Ctrl+D 选词 (按住-继续选择下个相同的字符串)
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)
Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)
Ctrl+Shift+/ 注释已选择内容
Ctrl+Z 撤销
Ctrl+Y 恢复撤销
Ctrl+M 光标跳至对应的括号
Alt+. 闭合当前标签
Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+KT 折叠属性
Ctrl+K0 展开所有
Ctrl+U 软撤销
Ctrl+T 词互换
Tab 缩进 自动完成
Shift+Tab 去除缩进
Ctrl+Shift+↑ 与上行互换
Ctrl+Shift+↓ 与下行互换
Ctrl+K Backspace 从光标处删除至行首
Ctrl+Enter 光标后插入行
Ctrl+Shift+Enter 光标前插入行
Ctrl+F2 设置书签
F2 下一个书签
Shift+F2 上一个书签
四、插件安装
这是st最为强大的地方--各类强大的插件。ST2是支持插件扩展的,首先,我们需要安装Package Contro,ctrl+`调出命令行工具,输入import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
回车即可。
点击Preferences→Package Control(或是ctrl+shift+p),显示以下弹窗:
n Disable Package :禁用插件
n enable Package :启用插件
n Install Package :安装插件
n List Package :查看已安装插件列表
n Remove Package :移除插件
n Upgrade Package :升级插件
鼠标移动,直接点击List Package也可以
选择安装插件后,一般过几秒就会弹出安装插件对话框,输入插件名称,下面的列表会自动匹配
点击即可,它会自动安装。有的时候安装不上,是万恶的河蟹大婶。可以从github上将插件下载解压放在安装报目录下
五、插件介绍
插件功能非常多,挑选几个很常用的介绍
ps:如果按照过程中提示pyV8报错之类的,要预先安装,如果按照不上,参考第四点
1、Tag插件:可以为web开发者提供html和css标签,很方便快捷,对于web前端设计者非常实用。
2、Alignment:主要用于代码对齐,据说最新版已经自动集成了这个插件
3、BracketHighlighter:代码高亮,非常实用
4、converToUTF8: 转utf8
5、ZenCoding(emmet 、emmet css snippets):前端必备,快速开发HTML/CSS
一个空白的html页面,在其中输入html:xt然后按下Tab键盘,页面自动生成html标头
输入 .left#header_left>ul>li*4>a[target="_blank"]{测试$}然后按Tab键,然后生成html代码
6、jquery:语法提示插件提示,非常棒
7、jsformat:格式化js代码,这个插件很有用,我们有时在网上看到某些效果,想查看是怎么实现的,但是代码被压缩过,很难阅读,不用怕,用ST2打开,右键即可,也可以设置快捷键
压缩后,压缩前的对比
8、autoprefixr:CSS3私有前缀自动补全插件
9、sidebarEnhancements:侧边栏,这个功能很棒
sidebar的颜色修改 :打开 安装目录PackagesTheme - Default/Default.sublime-theme文件,所有操作都在该文件里面进行。
边栏背景色修改成了
1 {
2 "class": "sidebar_tree",
3 "row_padding": [8, 3],
4 "indent": 12,
5 "indent_offset": 17,
6 "indent_top_level": false,
7 "layer0.tint": [30, 30, 30],
8 "layer0.opacity": 1.0,
9 "dark_content": false
10 },
名文字颜色改成了
1 {
2 "class": "sidebar_label",
3 "color": [150, 150, 150],
4 "font.bold": false
5 // , "shadow_color": [250, 250, 250], "shadow_offset": [0, 0]
6 },
分割线颜色改成了
1 {
2 "class": "sidebar_container",
3 "layer0.tint": [10, 10, 10],
4 "layer0.opacity": 1.0,
5 "layer0.draw_center": false,
6 "layer0.inner_margin": [0, 0, 1, 0],
7 "content_margin": [0, 0, 1, 0]
8 },
10、HTML-CSS-JS Prettify:可以将CSS格式化成一行,也可以将一行格式化成多行。
插件下载地址:https://gist.github.com/2863474 下载解压缩之后,将compact_expand_css_command.py放到*Sublime Text 2PackagesUser
然后,重启一下st2,选择Preferences>Key Bindings - User
加入以下代码:
{ "keys": ["ctrl+shift+]"], "command": "compact_expand_css", "args": { "action": "expand" } },
{ "keys": ["ctrl+shift+["], "command": "compact_expand_css", "args": { "action": "compact" } }
保存,搞定。打开一个css文件试试,非常酷的体验
六、后记
sublime text 还有其他的常用插件,功能强大。各种人性化的细节设计,全面的功能和扩展机制,使用后定会喜欢上它
HTML-CSS-JS Prettify:格式化
ChineseLocalization:汉化
javascript-snippets:js片段