每次我在其他视频网站上看学习视频的时候,看着老师用的编辑器高大上档次,而我一般用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+数字键将当前屏移动到指定屏

转载于:https://www.cnblogs.com/cheryshi/p/7603339.html

Sublime Text 3 初试牛刀相关推荐

  1. python3 爬虫(初试牛刀)

    此文章仅供学习交流使用 在学习爬虫之前,把最近对于 VMware 的网络学习做个总结 接下来,步入正题! 分析 Robots 协议 禁止所有爬虫访问任何目录的代码: User-agent: * Dis ...

  2. matlab 小练习,matlab初试牛刀__小练习

    % T1 % 最好还是设 h=2 D=1 clear,clc; h=2;D=1; x=-2*D:0.01:2*D; y=h*(x>D)+h/D.*x.*(abs(x)<=D)-h*(x % ...

  3. 初试牛刀---css中的小细节

    在css中,标签<a>等为行内元素,若对行内元素设置大小不起作用,需改变其display属性将其变成快捷元素 如: .a:link{ width:10px; height:10px; di ...

  4. 奥运转播加速上云,阿里云导播台初试牛刀

    10月11日晚,北京冬奥组委与国际奥林匹克转播机构进行了云视频传输技术测试,工作人员通过阿里云传输技术,对布宜诺斯艾利斯青奥会游泳.三人篮球.BMX小轮车三项赛事项目进行多路电视转播测试,监测了实时传 ...

  5. 搜索引擎--范例:django之初试牛刀

    这学期学了一门课<信息检索>,也就是传说中的搜索引擎 大作业自然而然的让我们自己做一个小型的搜索引擎.于是乎,我们本次的主题就诞生了 我也是边学边用,下面和大家一起分享我在这个过程中学到的 ...

  6. 将Sublime Text 2配置为C#代码编辑器(附配置文件)

    有时候我们需要编写一些小的代码片段时,在Visual Studio中创建一个工程就显得有点杀鸡用牛刀的感觉了,所有说对于一个程序员来说一款轻巧的代码编辑器还是很有必要的.原来我用的主要的Notepad ...

  7. 收藏:因为有这篇Sublime Text使用教程,我立即卸载掉了Notepad+...

    点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料 作者:lucida 链接:http://lucida.me/blo ...

  8. Sublime Text使用教程【转】

    本文转载自:http://lucida.me/blog/sublime-text-complete-guide/ 摘要(Abstract) 本文系统全面的介绍了 Sublime Text,旨在成为最优 ...

  9. Sublime Text的使用技巧

    来到腾讯之后,基本上整个团队都在使用Sublime Text这款编辑神器.虽说自己以前在写python的时候略有接触过,但只是把它当做简单的文本编辑器.来到这边后,才逐渐的体会到这款神作的牛逼之处. ...

最新文章

  1. 如何在框架外部自定义C++ OP
  2. 2009下半年网络管理员试题及答案
  3. 创建的二叉树后续非递归遍历结果为_一入递归深似海,从此offer是路人
  4. 【存储过程】MySQL存储过程/存储过程与自定义函数的区别
  5. 【剑指offer - C++/Java】14、链表中倒数第k的节点
  6. 如何让手机1秒打开健康码 ,任何机型!
  7. union[c++] in gamedev
  8. (回溯法)和为n的所有不增正整数和式分解算法
  9. vue在线引入阿里矢量图标
  10. DSP2812学习笔记-Flash固化操作
  11. USPS国际快递查询单号
  12. Office2010打开多个excel文件时,开多个excel而不是同一个切换
  13. MySQL之Innodb引擎的4大特性
  14. python字符类型是英文_Python中常见数据类型
  15. 详解oracle多种表连接方式,详解Oracle多种表连接方式
  16. 感谢老师,更感谢自己
  17. 搜索引擎推广公司引擎推广方法及技巧
  18. 怎么恢复360强力删除的文件?数据恢复这样做
  19. 计算机应用word单元测试2,计算机应用基础测试题2
  20. 假设有100个瓶子,其中只有1瓶有毒药,你现在有7只老鼠,怎么检测出那一瓶是由毒的(老鼠喝到有毒的就会死)

热门文章

  1. sqlserver游标概念与实例全面解说
  2. 288. Unique Word Abbreviation
  3. Centos6.4 本地yum源配置
  4. MySQL的mysql_insert_id和LAST_INSERT_ID
  5. [评论]为什么程序员的社会地位不高?--转载
  6. Weblogic调试延长时间
  7. Java网络01基本网络概念
  8. Powershell-获取DHCP地址租用信息
  9. Git submodule 的笔记
  10. ORA-01555 原因与解决