在众多的开发工具IDE当中。作者现在唯独深爱sublime text(以下简称st)。以前做后台开发使用visual studio(以下简称vs),以及实行前后端分工也是配合后台使用vs.这里要讲述两个概念：前后端分离与前后端分工。分离是指：前端独立完成搭建前端系统。数据只需要后端提供API接口调用即可。前端渲染HTML页面（俗称前端开发工程师）。分工是指按照设计切成静态页面，写一些交互js,配合后端完成项目开发。服务端渲染HTML页面（俗称页面仔）。在全职做前端的时候，也尝试使用webstorm(以下简称ws)，在学校偶尔用过dreamweaver(以下简称dw)。个人感觉dw的界面丑陋不堪。一点都没有逼格。作为一名前端开发工程师，当然要选用逼格高一点的开发工具。目前前端开发工具比较出名的使用比较普遍的也就是st和ws了。现在说说st的优点：1.界面炫酷。2.高亮颜色好看。3.轻量小巧。作者语录：装逼从点滴开始，从现在开始。从开发工具开始。写代码一定要风骚。作为一名逼格高的程序猿，必须要有好的开发工具。正如高手都有一把属于自己的武器。惊羽的斩龙剑。小凡的摄魂棍，雪琪的天琊神剑。书书的武器那是百宝箱啊。青云f4.
一、Package Control的安装
在st所有的插件当中。一定要先安装package control。可以理解为插件安装包的管理器吧。所有的插件都是通过这这里面下载安装的。
1.按下Ctrl + ~ 调出st的控制台
2.复制以下代码到控制台
a.适合st3:
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())
b.适合st2:
import urllib2,os; 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( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
3.按下Ctrl + Shift + p 输入pci选中Install Package回车。会弹出一个输入框。以后的插件都在这里面安装。有时候调出输入框的时候很久。注意下面状态栏的=符号来回跑动说明正在处理当中
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
二、SVN插件的安装
在项目开发当中怎么少得了svn的使用。除非你一个人能开发完成项目
1.前提是你电脑当中已安装svn。这里相当于设置快捷键调用svn
2.复制以下代码到控制台（Ctrl + ~）
a.适合st3:
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(' ',' ')).read())
b.适合st2:
import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;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 finish installation')
3.在网上下载SubLime Texe2/3的SVN插件
4.点击Preferences - 浏览资源包
5.在文件资源管理器中。新建svn文件夹。将下载好的svn插件放入到svn文件夹里面
6.在项目文件右键插件是否有svn commit ，svnupdate 检验是否安装成功
三、代码语法检查插件
1.按下 Ctrl + Shift + p输入pci选中Install Package回车
2.输入sublimeLinter进行安装
3.安装完成后继续按下 Ctrl + Shift + p输入pci选中Install Package回车。
4.输入SublimeLinter-jshint进行安装
5.由于jshint组件依赖于nodejs里面的jshint.所以在nodejs环境下必须全局安装jshint. 在cmd窗口执行 npm install -g jshint 使用jshint -v 查看其版本检验是否安装成功
6.如果没有安装nodejs环境，上面第五点是运行不起的。接下来简要说明一下安装nodejs环境。如果已安装可忽略直接下一步
a.进入官网下载相应的系统。下面以window为例
b.进行傻瓜式的下一步操作直到完成。
c.记住要配置环境变量
d.使用node -v && npm -v 查看其版本检验是否安装成功
7.安装css代码校验也是同样。进入插件库里面安装sublimeliter-csslint插件
8.nodejs环境下也要安装csslint。在cmd窗口执行 npm install -g csslint
9.配置：在preferences-Pageckage Settings-SublimeLinter-Settings-User粘贴下面代码就OK
{
"user": {
"debug": false,
"delay": 0.25,
"error_color": "D02000",
"gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
"gutter_theme_excludes": [],
"lint_mode": "background",
"linters": {
"jshint": {
"@disable": false,
"args": [],
"excludes": []
}
},
"mark_style": "outline",
"no_column_highlights_line": false,
"passive_warnings": false,
"paths": {
"linux": [],
"osx": [],
"windows": []
},
"python_paths": {
"linux": [],
"osx": [],
"windows": []
},
"rc_search_limit": 3,
"shell_timeout": 10,
"show_errors_on_save": false,
"show_marks_in_minimap": true,
"syntax_map": {
"html (django)": "html",
"html (rails)": "html",
"html 5": "html",
"javascript (babel)": "javascript",
"magicpython": "python",
"php": "html",
"python django": "python",
"pythonimproved": "python"
},
"warning_color": "DDB700",
"wrap_find": true
}
}
四、定制一段代码块
1.tools - 新建代码片段(New Snippet)
2.你会看到以下代码，首先不要懵逼
<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[ 你需要插入的代码片段${1:name},test,${2}]]></content>
<!-- 可选：快捷键，利用Tab自动补全代码的功能 -->
<tabTrigger>cygnet</tabTrigger>
<!-- 可选：使用范围，不填写代表对所有文件有效。附：source.css和test.html分别对应不同文件。 -->
<scope>source.js</scope>
<!-- 可选：在snippet菜单中的显示说明（支持中文）。如果不定义，菜单则显示当前文件的文件名。 -->
<description>My Fancy Snippet</description>
</snippet>
${1:name}表示代码插入后，光标所停留的位置，可同时插入多个。其中:name为自定义参数（可选）
${2}表示代码插入后，按Tab键，光标会根据顺序跳转到相应位置（以此类推）。
3.保存在\Packages\User目录下（例 X:\Sublime Text 2.0\Data\Packages\User），文件命名为cygnet-code，后缀名.sublime-snippet。
4.打开一个HTML文件。输入cygnet按下tab会自动生成你定制的代码块
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
Normal
0
7.8 磅
0
2
false
false
false
EN-US
ZH-CN
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;
mso-font-kerning:1.0pt;}