关键词：
在众多的开发工具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回车。会弹出一个输入框。以后的插件都在这里面安装。有时候调出输入框的时候很久。注意下面状态栏的=符号来回跑动说明正在处理当中
二、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>
解释以上代码
1 <snippet>
2 <content><![CDATA[ 你需要插入的代码片段${1:name},test,${2} ]]></content>
3 <!-- 可选：快捷键，利用Tab自动补全代码的功能 -->
4 <tabTrigger>cygnet</tabTrigger>
5 <!-- 可选：使用范围，不填写代表对所有文件有效。附：source.css和test.html分别对应不同文件。 -->
6 <scope>source.js</scope>
7 <!-- 可选：在snippet菜单中的显示说明（支持中文）。如果不定义，菜单则显示当前文件的文件名。 -->
8 <description>My Fancy Snippet</description>
9 </snippet>
${1:name}表示代码插入后，光标所停留的位置，可同时插入多个。其中:name为自定义参数（可选）
${2}表示代码插入后，按Tab键，光标会根据顺序跳转到相应位置（以此类推）。
3.保存在PackagesUser目录下（例 X:Sublime Text 2.0DataPackagesUser），文件命名为cygnet-code，后缀名.sublime-snippet。
4.打开一个HTML文件。输入cygnet按下tab会自动生成你定制的代码块
sublimetext工具使用(代码片段)
安装SublimeText3官网下载选择对应的版本安装。完事后，要安装一个基础的、必备的包管理：PackageControl，用来以后安装插件用的。安装指导https://sublime.wbond.net/installationimporturllib.request,os,hashlib;h=‘7183a2d3e96f11eeadd761d777e62404‘+‘e330... 查看详情
在sublimetext下搭建python环境(代码片段)
SublimeText3安装插件以支持python开发为什么要这么干用到的资源需要注意的问题总结为什么要这么干Python开发可以使用文本编辑器来写代码，但是python的语法编译对代码块书写的缩进要求严格，纯靠手工会非常费劲且枯燥&#... 查看详情
在sublimetext下搭建python环境(代码片段)
SublimeText3安装插件以支持python开发为什么要这么干用到的资源需要注意的问题总结为什么要这么干Python开发可以使用文本编辑器来写代码，但是python的语法编译对代码块书写的缩进要求严格，纯靠手工会非常费劲且枯燥&#... 查看详情
如何在博客中使用sublimetext风格的代码样式
1、安装sublimeText3 2、安装插件sublimehighlight,简单点其实跟安装其他ST插件是一样的，先Ctrl+Shift+P调出controlpanel，然后输入installpackage，不用输完，当输入了Install后便出来了，然后回车等待插件列表的显示，这个过程大概有个几... 查看详情
sublimetext3常用插件安装与使用
packagecontroller的安装https://packagecontrol.io/安装了它就可以更好的进行插件的安装和管理复制代码，打开控制面板【ctrl+·】将代码拷贝，即可进行安装。安装成功后，重新打开，如图即可看到安装成功。安装面板，【ctrl+shift+p】可... 查看详情
python的pyyaml模块详解(代码片段)
...原文链接简介安装简单安装从源码安装最常被问到的问题使用详解加载YAML转储YAML构造、表示和解析YAML语法文档块序列块映射流集合标量别名标签YAML标签和Python3对象字符串转换名称和模块对象简介Python的PyYAML模块是Python的YAML解... 查看详情
sublimetext3安装及常用插件安装
...用的代码编辑器来进行selenium3+Python3的自动化测试。使用SublimeText3非常适合。1、下载安装 首先到http://www.sublimetext.com/3 根据你的电脑配置下载对应的安装包，然后不断的点击next，然后blablabla......就可以安装好了... 查看详情
sublimetext3中packagecontrol的安装与使用方法
PackageControl插件本身是一个为了方便管理插件的插件，在Sublimetext3中，PackageControl的安装方法一开始出来的方法是要先安装Git，再输入代码来安装，原因说是“sublimetext3更新的python的函数，说白了就是API不同了，导致基于python开... 查看详情
sublimetext3的一些插件安装方法和使用
sublimetext部分插件使用方法在线安装packageControl的方法： ctrl+~输入如下代码： importurllib2,os;pf=‘PackageControl.sublime-package‘; ipp 查看详情
sublimetext2/3中packagecontrol的安装与使用方法
...行，不出意外即完成安装。以下提供ST3和ST2的安装代码：SublimeText3：import urllib.request,os; pf = ‘Package Control.sublime-packag 查看详情
sublimetext3下载与安装以及解决安装installpackage时遇见的问题(代码片段)
最近下载安装sublimeText3后，在安装InstallPackage时遇到了几个问题，网上搜了一大圈终于解决了，特此记录为以后之便。一、下载安装sublimeText31.sublimeText3下载官网地址：https://www.sublimetext.com/3打开链接，选择对应系统的版本下... 查看详情
如何优雅地使用sublimetext
SublimeText：一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件，不仅具有华丽的界面，还支持插件扩展机制，用她来写代码，绝对是一种享受。相比于难于上手的Vim，浮肿沉重的Eclipse，VS，即便体积轻巧迅速启动... 查看详情
sublimetext3编辑器的安装和使用
1.首先下载并安装Sublime_Text_3.3143_Setup如图：2.安装PackageControl安装packagecontrol有两种方式，一种是代码的方式，一种是手工的方式。我们这里选择手工的方式。（1）点击Preferences>BrowsePackage...定位到InstalledPackages文件夹。（2）将P... 查看详情
猿如意中的sublimetext开发工具详情介绍(代码片段)
...1f;2.2如何下载猿如意？ 2.3如何在猿如意中下载SublimeText ？三、sublimetext介绍四、软件安装过程五、软件界面六、sublimetext功能特点介绍七、sublimetext使用/体验感受7.1使用/体验感受 7.2执行python代码 一、工具... 查看详情
sublimetext编辑器及插件emmet安装使用
ONESublimeText的安装官网下载：SublimeText下载对应版本SublimeText（WindowsorOSX），安装完成后打开如下图所示。 TWO PackageControl的安装点击菜单栏View->ShowConsole打开console，输入如下代码：import urllib.request,os; 查看详情
在mac上使用sublimetext3搭建opencv3开发环境(代码片段)
安装sublimetext3 打开mac终端，安装brew 安装opencv3，终端输入下面的coomand：brewinstall[email protected]注意：@3表示安装的版本，如果不加@3，那么会默认安装最新的版本；建议安装版本3。 在sublimetext3中添加buildsystemTools-&g... 查看详情
sublimetext的安装过程记录(代码片段)
SublimeText是编写HTML代码、CSS层叠样式表、JS代码的利器，本身很小，只有20M左右。轻量，可扩展。本文记录下SublimeText的安装过程。首先进入官网，下载最新版的安装文件。http://www.sublimetext.com/为了以后方便取用&#x... 查看详情
sublimetext3所安装的插件
安装的版本是sublimetext3使用packagecontrol组件在线安装点击view——>showcontrol 出现以下界面：（我的是已经安装过的） 然后将下面一段代码复制粘贴到控制台（亲测有效），回车，importurllib.request,os;pf=‘PackageControl.s... 查看详情