Sublime Text 3 初试牛刀

Posted 筱风能动浪,岸树不遮山

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Sublime Text 3 初试牛刀相关的知识,希望对你有一定的参考价值。

每次我在其他视频网站上看学习视频的时候,看着老师用的编辑器高大上档次,而我一般用Notepad,和Dreamweaver去编辑网页,需要每一行代码,打进去,效率低。
最近看到sublime编辑器,在网上搜了一下说是最受欢迎的,就毫不犹豫的下载下来,初试牛刀一下下,把我搜索的功能和与前端浏览器交互的插件简答介绍一下。
前端实时可视化开发工具:LiveStyle

支持样式文件的修改,也可以在浏览器端编辑样式代码,会自动更新到你的样式表中。

浏览器端:

下载一个chrome浏览器,在 chrome网上应用店搜索LiveStyle添加至chrome。
可能会让你下载一个LiveStyle App,如果需要就下载,用的时候启动App就可以

Sublime端:
1.sublime官网下载地址:https://www.sublimetext.com/3
下载好了打开软件,点击Tool》command palette...>>pc.. 或者按Ctrl+shift+p,选择Install Package

等待一会,在弹出的install package输入框中输入livestyle并回车,等待几秒钟;就安装好了。

重启sublime,打开浏览器端的livestyle按钮就可以实现css可视化开发啦!

还有两种插件:browsersync,安装比较简单,可以实现任何文件的修改,只能在代码段修改,需要node.js配合使用,实现局部的刷新,对手机平板的实时交互效果很好。
browsersync:https://browsersync.io/

Livereload不仅支持样式,也支持所有文件的修改,只能在代码段修改,浏览器可以即时呈现。

Livereload:http://livereload.com/
Sublime快捷方法的应用

 1.自动完成

自动完成的快捷键是Tab,如果在html文件中输入cl按tab或自动补全为class=“”;

 2.多列编辑

按住Ctrl点击鼠标出现多个闪烁的光标可以同时修改多处,或者按住鼠标中间滑轮那个键拖拽选择多列。

3.代码注释功能:Ctrl+/,Ctrl+shift+/分别末行注释和块注释,再按一下就能取消,它可以识别html、css、js不同的文件

4.输入div.box>div.header+div.main+div.footer,并按下tab键会有神奇的代码段生成。

5.Ctrl+Shift+\' 可以选择一对标签

6.Ctrl+D选择当前光标所在的词并高亮显示,再次点击出现下一个位置

7.Alt+R切换到正则匹配模式的搜索框,多文件搜索Ctrl+Shift+F

8.跳转

Ctrl+p会列出当前文件,输入文件名然后Enter跳转到该文件

Ctrl+G然后输入行号,回调到指定的那一行
9.打开多窗口编辑
编辑代码时,有时候会有好多页面关联,可以分屏。Alt+Shift+2进行左右分屏,Alt+Shift+8进行上下分屏;分屏之后,使用Ctrl+数字跳到指定屏,使用Ctrl+Shift+数字键将当前屏移动到指定屏

 

以上是关于Sublime Text 3 初试牛刀的主要内容,如果未能解决你的问题,请参考以下文章

配置Sublime Text2的python运行环境(Sublime Text 3也类似)

sublime text 3sublime text 3 汉化

fedora安装sublime text教程

Sublime Text 3编译Sass - Sublime Text安装Sass插件

Sublime Text 3 python 配置

sublime text 3安装