每次我在其他视频网站上看学习视频的时候,看着老师用的编辑器高大上档次,而我一般用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 初试牛刀的更多相关文章

  1. 周末充电之WPF(一).初试牛刀

    追的剧已经赶上更新的速度了,突然觉得一下子就闲了.趁着这点时间,刚好学点 WPF .看到这边,好多人估计得感叹技术宅约等于单身狗,哈哈.好了,赶紧进入学习状态. 关注 WPF 或者说对它感兴趣其实多半 ...

  2. 初试牛刀:实时天气WebService

    1.引入WebService:http://www.webxml.com.cn/WebServices/WeatherWebService.asmx 2.声明接口→界面获取值传入接口→接口返回值处理→ ...

  3. redis初试牛刀

    先来无事就学学redis.可是并没有想的那么美好.首先要解释一下,redis主流是安装在lunx系统中的,甚至官网直接没有给出windows版本.要下载windows只能去所谓的githup.好吧我在 ...

  4. python初试牛刀

    需求:在L7的一台机器上做nginx配置,然后代码分发到别的所有的机器上.由于目录中有很多配置文件,而且防止误操作,需要修改配置之前先备份原配置.然后需要在运行修改配置的脚本之前,先弹出界面,告知操作 ...

  5. HBase 2、HBase安装与初试牛刀

    官方帮助文档:http://hbase.apache.org/book.html  PDF:http://hbase.apache.org/apache_hbase_reference_guide.p ...

  6. iOS 视图调试器(Debug View Hierarchy) 之 初试牛刀

    参考:http://blog.csdn.net/th_gsb/article/details/44856795 由于iOS的界面开发大多都是用代码实现的,编写的时候,那就是看不见摸不着的情况.所以,如 ...

  7. PyQt4 初试牛刀一

    建立了一个MainWindow,创建最基本的菜单栏.状态栏.工具栏,并重新定义了"X"关闭的默认行为. # -*- coding: utf-8 -*- import sys fro ...

  8. PyQt4 初试牛刀二

    一.最小话托盘后,调用showNormal()后窗口不刷新,解决办法如下: 重写showNormal 方法,调用父类方法后,repaint窗体 def showNormal(self):     su ...

  9. [学习OpenCV攻略][003[初试牛刀——显示图片]

    cvLoadImage(路径) 加载指定路径的图片到内存 cvNamedWindow("窗口名称", 属性) 创建窗口,窗口名称用来被其他函数引用,属性:0表示窗口大小不变,CV_ ...

  10. OpenCV:初试牛刀-带滚动条的视频播放-2

    视频播放时点击窗口关闭按钮(即小叉号)关闭窗口 隐藏console控制台 使用VideoCapture和createTrackbar实现滚动条控制视频播放 #include<iostream&g ...

随机推荐

  1. 谈谈MyBatis持久层框架

    谈谈 MyBatis 源自官方文档:MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作. ...

  2. BIO ,NIO ,AIO

    一.同步阻塞I/O(BIO): 服务器实现模式: 一个连接一个线程,即客户端有连接请求时服务器就需要启动一个线程进行处理 弊端:如果这个连接不做任何事情会造成不必要的线程开销 解决措施:可以通过线程池 ...

  3. #min-max容斥#51nod 1355 斐波那契的最小公倍数

    题目 对于 \(n\leq 50000,a_i\leq 10^6\),求 \(\large lcm(fib(a_1),fib(a_2),\dots,fib(a_{n-1}),fib(a_n))\) 分 ...

  4. #模拟#U137456 数字

    题目 牛牛和他的小伙伴们高高兴兴的吃完了蛋糕,吃完蛋糕之后就到了牛牛和他的小伙伴们最喜欢的环节了--猜数 字, 这次是牛牛的生日,大家决定让牛牛来制定规则,由于牛牛的生日是4月7日,所以牛牛特别喜欢数 ...

  5. MogDB SQLdiag 使用指南

    MogDB SQLdiag 使用指南 本文出处:https://www.modb.pro/db/411957 前提条件 需要保证用户提供训练数据. 如果用户通过提供的工具收集训练数据,则需要启用 WD ...

  6. C++ 递归与面向对象编程基础

    C++ 递归 递归是一种使函数调用自身的技术.这种技术提供了一种将复杂问题分解为简单问题的方法,从而更容易解决问题. 递归可能有点难以理解.理解其工作原理的最佳方法是通过实验来尝试. 递归示例 将两个 ...

  7. 记一次 .NET某炉膛锅炉检测系统 崩溃分析

    一:背景 1. 讲故事 上个月有个朋友在微信上找到我,说他们的软件在客户那边隔几天就要崩溃一次,一直都没有找到原因,让我帮忙看下怎么回事,确实工控类的软件环境复杂难搞,朋友手上有一个崩溃的dump,刚 ...

  8. clearValidate()和resetFields()表单校验的用法和区别

    目标:实现表单重置和清除验证 1.整个表单的校验移除 <Form ref="form" rule={this.rules}> <FormItem prop=&qu ...

  9. 特殊border的样式 -- CSS3实现三种切角效果

    效果一: 代码:<div class="cornerCut">corner cutcorner cutcorner cutcorner cut</div> ...

  10. Linux下的常见基本指令

    pwd //显示当前用户所在的路径 ls //显示当前路径下的文件名或者目录名称 ls-l //显示当前路径下的文件或者目录的更详细的属性信息 cd 一个目录路径 //进入一个目录,进去后,可以用pw ...