学习web前端之神器sublime text 3
第一次在博客园写博客,以前都是看别人写的技术在自己慢慢的学习。现在想自己把每天学习的东西理解并记录下来,加深下印象以后可以做个回顾。不知道自己能否坚持每周至少写2篇博文。
古话说的好:工欲善其事,必先利其器。所以我们要找到一个神器来帮助我们更好的学习前端开发,要么记事本怎么样?不错是不错估计要写到猴年马月了。
百度一搜,web前端开发利器有很多,比如:EditPlus,Dreamweaver,HBuilder,Webstorm,Aptana Studio,Sublime text,这么多最后我还是选择了sublime,据说是前端开发神器。
Sublime text:轻量级IDE(集成开发环境),神器神在可扩展性,并包含大量实用插件,我们可以通过安装自己领域的插件来成倍提高工作效率。拥有高效、没有干扰的界面,在编辑方面的多选、宏、代码片段等功能。
一、安装Sublime Text 3
官网/下载网站:http://www.sublimetext.com/3
对应这各个版本,选择最适合你系统的版本下载安装,大约7MB左右,直接下一步即可
二、安装Package Control
安装好了这时候我们想要sublime用的更称手,要安装一个基础的也是sublime必备的包管理:Package Control,用来以后安装插件用的。
点击菜单 View -> Show Console或者 Ctrl + ` 会在底部出现一个命令输入框(sublime控制台),然后将下面的命令拷贝到输入控制台中,回车,等待,安装成功。
安装代码和指导地址:https://packagecontrol.io/installation
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)
在安装Package Control过程中有时候会出先错误,但是安装还是成功的,并没有什么影响。如果安装失败建议你关掉sublime然后在重复上面的操作,在安装Package Control过程中会有点卡顿。
三、安装插件
上面已经安装了Package Control,这是时候我们可以通过快捷键 Ctrl + Shift + P 打开命令面板,然后输入pack就会出现安装
点击红色框中的安装,稍作等待
安装成功后的界面
成功安装Package Control之后,这时候我们在通过 Ctrl + Shift + P 打开命令面板输入想要安装的插件:
在安装插件中也需要等待:
作为一个前端开发人员,我认为需要的插件:
- Emmet:(谁用谁知道)快速生成代码段插件,熟练使用让你键步如飞
如何使用百度一下,你就知道。
- ConvertToUTF8:直接在菜单栏中可以转了,专为中文设计,妈妈再也不通担心中文乱码问题了
- BracketHighlighter:显示我在哪个括号内
- JSFormat:Javascript的代码格式化插件
- AutoFileName:自动完成文件名的输入,如图片选取
- Sublime CodeIntel:代码自动提示
- Bracket Highlighter:类似于代码匹配,可以匹配括号,引号等符号内的范围。
这只是一小部分sublime插件,如果你需要更多百度一下,根据你的喜好去下载你喜欢的插件。
四、快捷键
作为一个开发人员熟练使用快捷键是必须的,这样才能事半功倍。
sublime通用的快捷键这里就不谈了,因为百度上有一堆。下面我要谈的是如何设置自己的快捷键。
当你发现你下了一堆插件,但是有时候去使用一些插件的快捷键却怎么按都不会出现效果,我想这时候你是快捷键冲突了。sublime中的默认快捷键在编辑器中是无法修改的,这时候你需要自定义快捷键,如何自定义下面分享:
Key Bindings - Default是sublime默认的快捷键,点开他你想修改但是sublime是不会让你修改的。
这时候就要用到Key Bindings - User
配置的话跟默认的一样去配置,json格式:
Keys:需要设置的快捷键组合
command:按下快捷键发生的sublime命令,sublime根据命令发生相应的事件。
比如:上图的事件是打开一个新的编辑窗口,当我感觉这个快捷键使用的不爽,于是就修改为ctrl+shift+.保存即可,当然在默认里面是修改不了,把默认中的代码复制到User中。当你在按下快捷键的时候他会执行你User中的快捷键,而不是执行Default中的快捷键。
这个修改快捷键不难,如何去定义一个没有不知道命令的快捷键
五、自定义快捷键
在sublime做任何事情都会有一个命令
如何查看命令?
打开sublime控制台,前面已经说过控制台打开方式:点击菜单 View -> Show Console或者 Ctrl + `会在底部出现一个命令输入框(sublime控制台)
输入 sublime.log_commands(True) 然后回车, 就能监控你所操作的命令。
下面就举个列子,现在我们写好了代码想看效果,一般都在HTML编辑器中鼠标右击Open in Browser(在浏览器中打开)。这种方式不爽,因为我还要去动鼠标。
要获取"在浏览器中打开"这个功能的命令就需要你操作一次,并在控制台中观察它的命令
这样控制台就显示出我们刚刚操作的命令,然后在Key Bindings - User 中设置自己的快捷键。
保存即可。然后就可是使用你自己的定义的快捷键。
注意:当你设置快捷键后,怎么按都不起作用时,并不是你设置错误,是你的快捷键和其他软件或者命令冲突。当快捷键冲突的时候sublime并不会提示你,只是不起作用,这时候你可以换个快捷组合方式去试试
六、sublime不错的功能
按TAB切换到编辑区
Shift+鼠标右键多行选中以及多行编辑
Ctrl+J合并多行
到了这里就要结束今天的博文了。写了半天,第一次写。希望是个好的开始。坚持下来。如有不对之处,还希望各位能指导我这位前端新人。
学习web前端之神器sublime text 3的更多相关文章
- 前端开发神器sublime Text
实用的sublime插件集合 – sublime必备插件 前言 入前端领域开始,就学着使用sublime,一直用起来很顺手,速度是我最欣赏的,快的没有编辑器可以匹敌.还是废话不多扯,入正题.好多有多少 ...
- Web前端开发:Sublime Text 常用插件
在安装这些插件之前,确保你已经安装了Package Control. 安装Package Control方法: 通过菜单栏View->Show Console 或者快捷键Ctrl+` 打 ...
- 编码神器——Sublime Text 包管理工具及扩展大全
Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.还可自定义键绑定,菜单和工具栏.Sublime Text 的主要功能包括:拼写 ...
- 毕业生想学习web前端,应该怎么学才能最快找到工作?
首先无论你要学习任何技能,必须有一个清晰的版图,什么是清晰的版图呢?首先了解你学的技术将来要从事什么工作,这个工作的条件是哪些? 然后你要有一个非常清晰的学习大纲,切记学习任何东西都要系统,不可胡乱的 ...
- HTML5零基础学习Web前端需要知道哪些?
HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...
- 独家分享——大牛教你如何学习Web前端开发
2014-12-18 14:35:42 引语 自从2008年接触网站开发以来到现在已经有六个年头了,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上 ...
- 零基础如何迅速学习HTML5?新手小白学习web前端H5自白!
很多的人在毕业之后才发现原来学的专业不是自己想做的工作,或者专业对口的工作待遇让人觉得并不满意,于是很多人选择培训机构学新的一门技能转换行业.IT行业的web前端H5受到很多学员的青睐.那么学习web ...
- 如何高效的学习WEB前端
IT 行业的变化快是众人皆知的,需要持续去学习新的知识内容.但是,往往我们工作之后,经常发现学习的东西很少了,学习效率非常低,感觉自己到了一个瓶颈期,久而久之,就演变成『一年工作经验,重复去用十年』的 ...
- 新手学习WEB前端流程以及学习中常见的误区
学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理.没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间.精力.金钱.废话不 ...
随机推荐
- LOJ tangjz的背包
题目大意 有 \(n\) 个物品, 第 \(i\) 个物品的体积为 \(i\) 令 \(f(x)\) 为 选择 \(m\) 个物品, 体积和为 \(x\) 的方案数 令 \(V = \sum_{i=1 ...
- tr/td
在HTML中,tr代表行,td代表列. 说明: 1.tr与td必须一起使用,并且输入的内容必须在td里面: 2.td必须在tr里面,表示在一行中的列: 3.在一个tr里面,有x个td,就表示在这一行里 ...
- bzoj 1604: [Usaco2008 Open]Cow Neighborhoods 奶牛的邻居——排序+贪心+set
Description 了解奶牛们的人都知道,奶牛喜欢成群结队.观察约翰的N(1≤N≤100000)只奶牛,你会发现她们已经结成了几个“群”.每只奶牛在吃草的时候有一个独一无二的位置坐标Xi,Yi(l ...
- Ansible 创建用户 Playbook 脚本
创建用户,设置wheel组sudo不需要密码,然后将用户添加到wheel组,并将用户的公钥传输到节点上: --- - name: Linux Create User and Upload User P ...
- 字符设备驱动ioctl实现用户层内核层通信
测试代码实现 memdev.h #ifndef _MEMDEV_H_ #define _MEMDEV_H_ #include<linux/ioctl.h> #ifndef MEMDEV_M ...
- 【MT8382/8121】使用绝对路径编译模块会导致recourse_overlay无法应用的问题
之前为了方便mm模块编译,写了个脚本,实现了在任意模块其子目录下执行脚本即可编译的功能. 其实原理就是一层一层目录地往上寻找Android.mk文件,找到存放Android.mk目录后,就把该目录当作 ...
- [ 手记 ] Oracle 11g安装过程
安装环境: 操作系统:Centos6.4 Desktop 主机名:oracle 内存:2G 安装前准备: 修改主机名: [root@oracle ~]# vim /etc ...
- 利用Java编写简单的WebService实例-转载
使用Axis编写WebService比较简单,就我的理解,WebService的实现代码和编写Java代码其实没有什么区别,主要是将哪些Java类发布为WebService.下面是一个从编写测试例子到 ...
- Android 判断SD卡是否存在和使用容量查询
1.判断SD卡是否存在 返回true表示存在 /* 判断SD卡是否存在 返回true表示存在 */ public boolean avaiableMedia() { String status = E ...
- (一)Centos7安装zabbix3.4 server端
(1)环境准备 关闭firewalld和selinux systemctl stop firewalld systemctl disable firewalld #sed -ri '/^SELINUX ...