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+数字键将当前屏移动到指定屏

 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/399685.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js 去除左右空格

//去左右空格; function trim(s){return s.replace(/(^\s*)|(\s*$)/g, ""); }

在没有域环境的情况下配置完整安装的SharePoint2010和2013

完整安装SharePoint2010。完成后先不要运行配置向导。配置数据库。SharePoint会安装一个POWERSHELL在这里14\CONFIG\POWERSHELL\Registration。运行该目录下的psconsole会打开一个命令行窗口。执行New-SPConfigurationDatabase【回车】DatabaseName <config database name&g…

mysql: union / union all / 自定义函数用法详解

mysql&#xff1a; union / union all http://www.cnblogs.com/wangyayun/p/6133540.html mysql&#xff1a;自定义函数用法详解 http://www.cnblogs.com/caoruiy/p/4485273.html 转载于:https://www.cnblogs.com/bj20170624/p/7605426.html

[C++学习历程]基础部分 C++中的函数学习

本文地址&#xff1a;http://blog.csdn.net/sushengmiyan/article/details/20305815 作者&#xff1a;sushengmiyan 一。静态变量&#xff1a; 局部变量是线程到达定义的地方的时候进行初始化&#xff0c;如果定义在函数中&#xff0c;那么每次函数调用的时候&#xff0c;都会进…

js 表单自动提交

var form document.getElementById(formid);form.submit();

linux下安装Mysql(干货!!!)解决mysql 1130问题,远程登录问题

转载自&#xff1a;http://www.cnblogs.com/xxoome/p/5864912.html linux版本&#xff1a;CentOS7 64位 1、下载安装包“mysql-5.6.33-linux-glibc2.5-x86_64.tar.gz” # 安装依赖 yum -y install perl perl-devel autoconf libaio 2、把下载的安装包移动到/usr/local/下。…

linux命令:ftp

1. 登录&#xff1a; ftp IP_ADDR &#xff1b; 根据提示输入USER_NAME PASS_WORD 或&#xff1a; ftp -i -n IP_ADDR user USER_NAME PASS_WORD ftp -i -n 172.17.17.17 user PUB 123456 2. 下载文件 下载文件通常用get和mget这两条命令。 a) get 格式&a…

flex 有关数据类型强制转

flex 编辑页面里变量的强制类型转化时&#xff0c;竟然不能用 as 比如&#xff1a;在mxml里&#xff0c; private var aa:String"89"; private var bb:Number(Number)aa; 正确 private var aa:String"89"; private var bb:intaa as int ; 不正确 估计这两种…

Openstack Neutron : 安全

目录 - iptable&#xff1a;起源 - tables - chains - rules - 方向 - Security group 安全组&#xff1a; - Firewall 防火墙&#xff1a; - 更高的安全 - 无处安放的安全 - 公共安全 当业务从传统环境迁移到云上之后&a…

SQL语句汇总(三)——聚合函数、分组、子查询及组合查询

https://www.cnblogs.com/ghost-xyx/p/3811036.html SQL语句汇总&#xff08;三&#xff09;——聚合函数、分组、子查询及组合查询 拖了一个星期&#xff0c;终于开始写第三篇了。走起&#xff01; 聚合函数&#xff1a; SQL中提供的聚合函数可以用来统计、求和、求最值等等…

iOS应用国际化教程(2014版)

本文转载至 http://www.cocoachina.com/industry/20140526/8554.html 这篇教程将通过一款名为iLikeIt的应用带你了解最基础的国际化概念&#xff0c;并为你的应用添加国际化的支持。该示例应用有一个标签和一个You Like&#xff1f;按钮&#xff0c;用户无论何时点击You Like?…

公众平台商户接入(微信支付)功能申请教程

场景及类型介绍 商家可以申请公众账号支付和APP&#xff08;应用客户端&#xff09;支付两种接入微信支付方式。 公众账号支付&#xff1a;用户在微信公众帐号内使用微信支付消费&#xff0c;案例&#xff1a;易迅、QQ充值。 APP&#xff08;应用客户端&#xff09;支付&#x…

datatables 自定义按钮及响应点击事件

按钮 {"targets": -1,"class": "but_xq","data": null,"bSortable": false,"defaultContent": "<p><a id\"edit\" href "#\">修改</a > <a id\"del\" …

wxPython python3.x下载地址

2019独角兽企业重金招聘Python工程师标准>>> wxPython python3.x下载地址 http://wxpython.org/Phoenix/snapshot-builds/ 转载于:https://my.oschina.net/laugh2last/blog/504688

hadoop2.2.0 core-site.xml--security properties

<!--- security properties --> <property><name>hadoop.security.authorization</name><value>false</value><description>Is service-level authorization enabled?</description> </property> 注释&#xff1a; <…

【Python】python文件名和文件路径操作

Readme&#xff1a; 在日常工作中&#xff0c;我们常常涉及到有关文件名和文件路径的操作&#xff0c;在python里的os标准模块为我们提供了文件操作的各类函数&#xff0c;本文将分别介绍“获得当前路径”“获得当前路径下的所有文件和文件夹&#xff0c;”删除文件“&#xff…

WordPress 多媒体库添加分类和标签支持

https://www.xhsay.com/wordpress-attachment-taxonomies.html 时不时看到有朋友说 WordPress 这么强大的系统&#xff0c;怎么多媒体附件都不支持分类呢。好吧&#xff0c;目前默认的确是不支持的。今天推荐一款新的插件 Attachment Taxonomies&#xff0c;它可以为多媒体添加…

爬山算法和模拟退火算法简介(转)

源&#xff1a;爬山算法和模拟退火算法简介 一. 爬山算法 ( Hill Climbing ) 介绍模拟退火前&#xff0c;先介绍爬山算法。爬山算法是一种简单的贪心搜索算法&#xff0c;该算法每次从当前解的临近解空间中选择一个最优解作为当前解&#xff0c;直到达到一个局部最优解。 爬山算…

How to connect oracle databse

1. 下載客戶端Oracle Developer Tools for Visual Studio_32bit 安裝后通過配置tnsnames.ora指定連接 C:\app\user name\product\11.2.0\client_1\Network\Admin\SERVER(DESCRIPTION(ADDRESS(PROTOCOLTCP)(HOSTIP Address)(PORT1521))(CONNECT_DATA(SIDSID))) 重啓后可以在VS20…

window使用技巧记录

1.window选择指定区域的方法&#xff1a; 点击一个地方 ——> 按住shift键不放&#xff0c;点击另一个地方 ——> 这时候就会选择了这两个点作为矩形左上角和右下角的矩形区域 2. 当前目录下打开cmd窗口 按住shift键&#xff0c;右键&#xff0c;即可出现打开cmd的选项。…