相信对于不少写代码的小伙伴来讲,对于开发编辑器都不会陌生,什么editplus,dw,webstorm,hubuilder,vscode,atom,esciplse,vim等萝卜青菜都各有所爱,每一个编辑器都有它的独特之处,本质上并没有优劣之分,只要代码写得好,写得快,就能够了,然而工欲善其事必先利其器,好的工具就是成功的一半,最近一直都在想着,怎么样提升本身的效率,若是老是复性的劳动一件事情,时间久了,以为是毫无心义的,让本身远离刀耕火种的时代,提升效率,同时也是为了减小手残腰椎痛(说得好像不是搬砖的,但是我依旧是个搬砖的),那么今天就我平时的使用跟你们分享一款本身喜欢编辑器sublinmeText3,对于它的使用和学习,我也一直在摸索中,初学者学习笔记使用心得,但愿对正在路上的你有些用...javascript
在sublimeText官网或者百度输入下载sublimeText3下载安装包选择性的安装便可(根据本身的电脑位数(32/64)选择性安装),建议安装英文版的php
快捷键
sublimeText自己具有强大的编辑能力,键盘侠远比鼠标手要快得多,当机械的重复劳动久了就显得毫无心义,多多使用快捷键是提升快速编码的一重要手段,sublimeText分为四种类别css
Ctrl+D
选中光标所占的文本,继续操做则会选中下一个相同的的文本ctrl+G:
输入行号,可快速跳转该行ctrl+p:
输入冒号,在输入行号,可快速跳转到某一行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+←
向左单位性地选中文本Ctrl+Shift+→
向右单位性地选中文本Ctrl+Shift+↑
将光标所在行和上一行代码互换(将光标所在行插入到上一行以前)Ctrl+Shift+↓
将光标所在行和下一行代码互换(将光标所在行插入到下一行以后)Ctrl+Alt+↑
或Ctrl+Alt+
鼠标向上拖动 向上添加多行光标,可同时编辑多行Ctrl+Alt+↓
或Ctrl+Alt+
鼠标向下拖动 向下添加多行光标,可同时编辑多行shift+ctrl+L
ctrl+D
便可将全文中与光标当前所在位置的词相同的词逐一加入选择,而直接按下Alt+F3
便可一次性选择全部相同的词Ctrl+J:
合并选中多行代码为一行:将多行格式的css属性合并为一行ctrl+shift+D:
复制光标所在的整行,插入到下一行Tab
向右缩进。只对光标后(或者选中的)的代码有效Shift
+Tab 向左缩进Ctrl+[
向左缩进。对整行有效Ctrl+]
向右缩进。对整行有效Ctrl+K+K
从光标处开始删除代码至行尾。按住Ctrl,按两次KCtrl+Shift+K
删除整行Ctrl+/
注释单行Ctrl+Shift+/
注释多行Ctrl+K+U
转换大写Ctrl+K+L
转换小写Ctrl+Z
撤销Ctrl+Y
恢复撤销Ctrl+U
软撤销,感受和 Gtrl+Z
同样Ctrl+F2
设置书签,F2切换书签Ctrl+T
左右字母互换Ctrl+F
打开底部搜索框,查找关键字Ctrl+shift+F
在文件夹内查找,与普通编辑器不一样的地方是sublime容许添加多个文件夹进行查找Ctrl+P
打开搜索框。举个栗子Ctrl+G
打开搜索框,自动带:,输入数字跳转到该行代码。举个栗子:在页面代码比较长的文件中快速定位Ctrl+R
打开搜索框,自动带@,输入关键字,查找文件中的函数名。举个栗子:在函数较多的页面快速查找某个函数Ctrl+:
打开搜索框,自动带#,输入关键字,查找文件中的变量名、属性名等Esc
退出光标多行选择,退出搜索框,命令框Ctrl+Shift+P
打开命令框。场景栗子:打开命名框,输入关键字,调用sublime text或插件的功能,例如使用package安装插件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
免打扰模式Alt+shift+数字
,qwer键盘上的数字至于每一个快捷键的使用,平时的学习刻意的练习,开发中多用,长此以往,就熟悉了的,不用刻意去记忆,那么多快捷键,想要记住是不容易的,能够一阶段时间分开阶段的熟练的使用html
插件篇
sublimeText之因此让我喜欢的地方,一方面是它打开文件相比其余编辑器而言,很是的快,并且主色调也很诙谐,最重要的是它强大的插件机制,是占很大优点的,如下是我我的较为喜欢的插件,经常使用的在前vue
在安装各类插件以前,须要安装Package control插件在线安装java
菜单栏-->view-->Show Console(ctrl+
)`node
将下面的配置配置代码输入到控制台,在线安装便可安装文档python
packagecontrol.io/installatio…,根据本身的sublimeText版本进行选择安装linux
安装gif图以下: git
Perferences->package settings
中看到package control这一项,则安装成功ctrl+shift+p
或者菜单栏:
Tools-->command palette调出命令面板, 输入install 调出 Install Package 选项并回车,而后在列表中选中要安装的插件,在输入框中直接输入插件名称可进行搜插件,双击便可自动安装,退出命令面板,在重复的按两次
ctrl+shift+p`可退回上次操做,或菜单栏上选择命令面板固然也能够直接在github上搜,下载安装包,直接放在package目录下就能够了的,示例以下所示
状况一:没法调出Package Control或未安装PackageControl 首次安装或从新安装的方式是同样的,首先打开控制台(Ctrl+~),不过Sublime Text的版本不一样,执行的命令是不同的 对于Sublime Text2输入如下命令执行: import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; 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')
对于Sublime Text 3须要输入以下的命令: import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; 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( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).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)
如上动图所示:选择你须要的sublimeText版本选择性安装既然3都出来了,就不要用2了的 执行完后,Package Control安装成功,此时即可以调出PackageControl命令输入面板(Ctrl+Shift+P),输入install 除了使用上述命令安装法,还可手动安装,须要的可访问官网查看[手动安装package control]https://packagecontrol.io/installation#st3
状况二:弹出Package Control:There are no packages available for installation
This error is happened with IPv6 problem. If yourInternet Service Provider (ISP) does not support for IPv6 you got this error.
具体请参考:
具体文档资料 若是IPV6有问题,curl就会打印相似这样的错误:
curl: (7) Failed to connect to xxxxx...
找到了问题缘由,下面着手解决它 第一步:取得sublime.wbond.net的IPv4地址。在命令提示符中输入如下命令: ping sublime.wbond.net
Package Control
(快捷键Ctrl+Shift+P)开始安装便可
Package Control:Unableto download Emmet.Please view the console for more details./Error while loading PyV8 binary:exit code 3…
Emmet: Loading PyV8 binary from https://raw.github.com/emmetio/pyv8-binaries/master/pyv8-win64.zip Emmet.pyv8loader: Unable to download package from https://raw.github.com/emmetio/pyv8-binaries/master/pyv8-win64.zip Wrong URL error
同时,pyv8下载失败会弹出一个提示框:
Preferences
–
Browser Packages
,而后解压到子目录PyV8内,好比个人对应目录是F:\开发软件工具\编辑器开发工具\sublime\Sublime Text 3\Data\Packages\PyV8\win64(若你的是32位系统,最终目录则为win32),PyV8安装好了之后,而后安装须要的插件就能够了
1. cmd下输入ping sublime.wbond.net连接一下看下sublime.wbond.net这个域名的ip
2. 打开C:\Windows\system32\drivers\etc\hosts文件。
在最后面加上例如 50.116.34.243 sublime.wbond.net这样的对应关系,IP是上面测试的
3. 而后请关闭Submine Text并重启,即不会再弹出更新提醒了
复制代码
一样调出命令行面板ctrl+shift+p
或者菜单栏Tools-->command Palette
,拉动滚动条,能够查看插件全部的命令快捷操做,列出插件(list Packages),移除插件(remove Package)等,以Alignment对齐代码插件为例:先移除后安装,其余插件雷同,在线移除插件过程须要等待一段时间,移除后,可在preferences-->Package settings中插件插件的有无,第二种去除插件的方法就是直接去packages中间的插件文件夹删除掉就能够了的,一旦去除插件,对应的快捷键操做就消失了的
一个很是简单和易于使用的插件,使你的代码组织和美观。当你重温代码时候很是有用.
使用方法:选中要调整的行,而后按 Ctrl+ Alt + A
(如果插件的快捷键与电脑中某些软件的快捷键冲突,那么能够自定义快捷键),固然对齐格式化代码,最好的插件还有别的,好比HTML-CSS-JS Prettify
使用说明:快速格式化html css js 快捷键:ctrl+shift+h
也能够鼠标右键操做, 安装插件后,直接使用时没有效果的,会提示nodejs not fount,安装好该插件后并不能够直接使用,须要添加nodejs的安装位置于插件中
Set Plugin Options,HTMLPretty.sublime-settings
,将node_path中的window路径更改成node的安装位置的路径便可,以下图所示Emmet绝对的节省时间,可减小重复的体力劳动,您能够轻松快速地编写HTML,CSS,使用方法: ctrl + alt + enter ,而且开始输入Emmet风格的,只要清晰结构,链式的写法+tab键就能够
<div class="container">
<ul class="img">
<li><img src="images/1.jpg" alt="" width="700" height="400"></li>
<li><img src="images/2.jpg" alt="" width="700" height="400"></li>
<li><img src="images/3.jpg" alt="" width="700" height="400"></li>
<li><img src="images/4.jpg" alt="" width="700" height="400"></li>
<li><img src="images/5.jpg" alt="" width="700" height="400"></li>
</ul>
<ul class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="bg"></li>
</ul>
</div>
复制代码
利用emmet快速生成html结构好比:如上结构div.container>ul.img>li*5>img[src="images/$.jpg"][width="700"][height="400"]^^ul.nav>li{$}*5
,这里的大于号至关于css中的子选择器,进入下一级,能够计算,联想css中的选择器使用,就以为不神奇了,只要清晰布局结构,就能够快速写html,而css的编写,只要知道元素属性,无需写全,按一下tab键就会自动补全了,好比:常见的meta标签:meta:vp
,meta:utf
,link:css
,link:favicon
,cc
:ie6
,cc:ie
,cc:noie``,-transition
,-box-shadow
....更多内容可参考手册,是由规律可寻找的.
快速的编写css
至于更多的丰富的emmet的使用可参考官网的APIemmetAPI,不得不说真的很强大,大大的解放了劳动力
SublimeTmpl
能新建 html
、css
、javascript
、php
、python
、ruby
六种类型的文件模板,全部的文件模板都在插件目录的templates
文件夹里,能够自定义编辑文件模板,生成本身所须要的,一次性的配好模板,无需重复的输入一些毫无心义的劳动,一劳永益
SublimeTmpl默认的快捷键
ctrl+alt+h → html
ctrl+alt+j → javascript
ctrl+alt+c → css
ctrl+alt+p → php
ctrl+alt+r → ruby
ctrl+alt+shift+p → python
复制代码
配置本身个有的模板信息:
preferemces
-->package settings
-->sublimeTmpl
-->setting default
按照格式进行配置添加本身想要的信息
preferemces
-->Browser packages
-->SublimeTmpl
-->templates
-->xxx.tmpl
自动将px转化为rem的插件,作移动端网站,rem布局时,该插件就很方便了
安装好后,设置基准值:"px_to_rem": 数值,我这里设置是100也就是100px=1rem,具体得设置值根据你的适配而定
文件保存scss格式,按ctrl+B,可直接将scss编译成css(在sublime中目录中支持中文路经,可是在koala中存储的scss目录文件不能带有中文,不然编译时就会出错,不过目录名都命名为英文),不过这里有意思的是:与koala对比,若css中使用@rem:xxrem;在sublime中却编译不过,而在koala中,是能够编译经过的
保存自动编译 SublimeOnSaveBuild(若是没有安装这个插件,每次都要手动的从新编译一次,ctrl+B),经过sass,less编译的css通常都是压缩的,在一行显示,若想要换行显示,右键执行run csscomb
,让css自动排序
CSS3 私有前缀自动补全插件,显然也是颇有用的
设置快捷键,选择菜单Preferences
> Key Bindings – User
,按照规则,将下面代码添加到里面去
{ "keys": ["ctrl+alt+shift+p"], "command": "autoprefixer" }
复制代码
使用一个取色器改变颜色 使用方法: ctrl + shift + c
js序列化,仍是很好用的
DocBlocker 是在Sublime平台上开发一款自动补全代码插件,支持JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ and Rust.等众多语言
标签匹配,HTML/XML标签缩进、补全和校验
相似于代码匹配,能够匹配括号,引号等符号内的范围(示例代码中最左侧的花括号),这个以为也很重要,当缺一个匹配时,左侧一边会有一个问号提示,很是人性化
自动关联图片,css,js等资源路径插件
ctrl+B
他会将markdown文件转换为html格式,直接打开就能够了,每次写完一次,若想看到新的效果,须要每次ctrl+B
编译一次,刷新浏览器能够看到最新的效果(安装了自动保存编译的插件代替ctrl+B),可是不知道为何无效ctrl+B
能够转换为html格式文件,在浏览器中打开,会发现它的色调也不是很好看,那么怎么更改呢?既然是html文件,直接更改样式属性就行了,以下gif所示Bootstrap框架、HTML5标签属性提示性的插件,是少数支持sublime text 3的后缀提示的插件,HTML5标签提示sublime text3自带,不过JQuery提示仍是颇有用处的,也可设置要提示的语言
不管是css中的class,Id,js中命名是件很纠结的事情,有了这个插件能够随时的在编辑器中进行中英互译,没必要退出软去浏览器找百度,Google翻译,或者是打开电脑安装的翻译应用软件,真的很好用,有时不会那么快,关闭那些占高宽带的应用,速度会好些的,注意以上的全部插件安装和如今的翻译,是在有网络的条件下才能够进行的,也就是说能看得了岛国动做大片,刷得了韩国欧巴才能够愉快的玩耍,固然已经装好的插件,至于有网没有网无所谓了的,可是凡要访问获取外网数据的,另当别论,只有在有网的条件才能够
选中所要翻译的词汇-->鼠标右键--Translate-CN--current text(当前文本)/input text(调出输入框面板可手动输入查找翻译)
WakaTime能够作到精确地统计到你花在某个项目上的时间;WakaTime针对不一样的IDE,拥有不一样的插件,在Sublime上安装着插件,就能统计到我使用Sublime进行的全部项目的行为.能够高效管理和知晓本身code时间,而且,统计完善, 记得有一次看到群里的一伙伴晒出来,瞬间感受B格高了,最近也一直在用,本身用用还挺能够,能够知道一天当中哪些代码块写得量,有助于调整本身的进度,约束本身
具体使用:先安装该插件后:preferences
--->packages settings
-->wakaTime
-->wakaTime dashboard
没有帐号的,注册一个帐号登录便可,在这个过程当中,会获得一个api_key,将后面的一串字符串输入到安装该插件时提示的控制台输入便可,也能够本身配置在wakaTime的settings user中以对象字面量的方式配置一下就能够了的
检查所有打开文件,类似自动补全插件
代码提示工具,打开Sublime建立个文件试一下,若是还不行就按下 ctrl+shift+space 开启提示功能
给CSS属性进行排序的格式化插件。若是你想保持的代码干净整洁,而且但愿按必定的顺序排列
若是您想检查浏览器是否支持你包括在你的代码中的CSS和HTML元素,那么这是你须要的插件。全部您须要作的就是选择有疑问的元素,插件将为你作其他的事情
当你编写代码时,因为错误或别的某些缘由,会产生一些没必要要的空格。须要注意的是多余的空格有时也会形成错误。这个插件会自动删除这些没必要要的空格
转码成utf-8,解决乱码问题
打开的文件夹都太多了, 来用这个来管理文件夹
这多是对程序员颇有用的插件。SublimeREPL 容许你在 Sublime Text 中运行各类语言(NodeJS,Python,Ruby,Scala 和 Haskell 等等)
Vue(*.vue)高亮插件
写 CSS可自动添加 -webkit 等私有词缀,Ctrl+Alt+X触发
用node,Grunt等等要调出控制台的,装上就能用,Tips:快捷键 ctrl+shift+T
呼出当前文件路径的控制台
侧边栏加强插件,注意该插件只支持 Sublime Text 3,不支持旧版本的 Sublime Text 2
Preferences->Key Bindings - User打开用户快捷键设置,copy下面的设置
[
//firefox
{
"keys": ["f1"],
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files\\Mozilla Firefox\\firefox.exe",
"extensions": ".*"
}
},
//chorme
{
"keys": ["f2"],
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Users\\manfr\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
"extensions": ".*"
}
},
//IE
{
"keys": ["f3"],
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
"extensions": ".*"
}
},
//safari
{
"keys": ["f4"],
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files (x86)\\Safari\\Safari.exe",
"extensions": ".*"
}
}
]
复制代码
keys是按键,application是浏览器应用程序路径,注意反斜杠的要转义。extensions是匹配全部的文件后缀格式,SublimeText3中f1-f12中只有f11被默认为全屏命令,其余的没设置。也就是说,任意个浏览器一字排开按过去测试
设置一键浏览文件的时候了,浏览器安装的目录跟Windows有点区别,看下面
[
//firefox
{
"keys": ["f1"],
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "/usr/lib/firefox/firefox",
"extensions": ".*"
}
},
//chorme
{
"keys": ["f2"],
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "/opt/google/chrome/google-chrome",
"extensions": ".*"
}
}
]
复制代码
火狐是centos,redhat等自带的,目录如上。而后Chrome是我本身装的,基本上也应该是这个目录。装好以后找个文件按F1和F2检测下就好
添加右键菜单 有时候要开个文件要开个SublimeText3,又要拉文件,麻烦。这里介绍将Sublime添加到右键菜单
1. 打开注册表,开始→运行→regedit
2. 在 HKEY_CLASSSES_ROOT→ * → Shell 下面新建项命名为SublimeText
3. 右键SublimeText项,新建字符串值,命名为Icon,值为 “sublime_text.exe所在路径,0”,例如:C:\Program Files\Sublime Text 3\sublime_text.exe,0
4. 右键SublimeText项,新建项,命名为command,默认值为 “sublime_text.exe所在路径 %1”,例如:C:\Program Files\Sublime Text 3\sublime_text.exe %1
复制代码
关于sublimeText的内容就先介绍到这,主要介绍sublimeText自己的一些经常使用的快捷键使用和插件的使用,它只是众多开发编辑中的一个工具而已,众多的快捷键配合插件的使用,真的很强大,我以为必定程度上是能够解放体力劳动的,以前,我忽略快捷键和插件的使用,总以为那些快捷键记起来是负担,插件也没有什么,写代码的速度一直提不上去,可是如今,我以为能偷懒就要偷懒,刻意的让本身去多用,重复性的劳动是长久以往,是毫无心义的,对于sublimeText这一神器,新的东西还有本身待续发掘...菜鸟一直行走在路上
Alignment
(代码对齐):快捷键:ctrl+Alt+A
,也能够本身自定义HTML-CSS-JS Prettify
:代码格式化(鼠标右键选该项便可)Emmet
插件(最为强大)emmetAPIemmetAPI点击便可查看SublimeTmpl
快速生成文件模板cssRem
安装,与px转化remsass,less
安装(上文中以sass为例,less同理)SublimeOnSaveBuild
保存自动编译Autoprefixer
Colorpicker
取色器插件JsFormat
js序列化DocBlockr
Sublime平台上开发一款自动补全代码插件Tagify,
Tag
标签匹配,HTML/XML标签缩进、补全和校验BracketHighlighter
相似于代码匹配,能够匹配括号autofilename
自动关联图片,css,js等资源路径插件MarkdownEditing
(markdown编辑插件),markdown Preview
(markdown预览插件,也便是在浏览器预览)Javascript-API-Completions
支持Javascript、JQuerytranslate-CN
中英互译插件WakaTime
记录你Code时间微信公众号:itclancoder
itclancoder QQ交流群:643468880,欢迎各位大佬多交流,共同进步