新手必需用!大道至简的前端编辑器Sublime Text
很多人在进入学习前端的时候(包括我自己),除了选择学习合适的技术,还需要一个得(自)心(己)应(喜)手(欢)的开发工具,一个得心应手的开发工具除了可以令你的效率大大提高,也可以令你在写代码的时候,心情舒畅 O(∩_∩)O。
我的第一个前端开发工具就是Sublime Text ,说一说我对它的理解吧。
在学习前端的时候,我也像很多人那样上网搜一搜前端开发应该选择什么样的开发工具,一搜,结果几乎大部分结果都是推荐 Sublime,于是乎下载了一个,结果下载完打开一看,黑乎乎的窗体,一点也不华丽啊(sublime 的中文译名就是“华丽的”),后来自己琢磨和网上百度了一段时间,终于明白了为啥这么多人说 sublime 好用,很重要的一个原因是它的“自定义性”,就是在 sublime里面,你想要的一切,都可以自定义,自己选择。自己去改变;和另一个特性:快捷键快速编写或许有人会问,这不是瞎折腾吗?什么都需要自己去配自己去捣鼓。但是,到了后面自己写代码的时候,就会明白,这所有的“瞎折腾”都是有必要的。用 Sublime 写一些简单的 demo 的页面那是非常快的,但是,Sublime 也有明显的缺点,对项目的管理等不太方便,代码提示不如其他 IDE强大
1. 跨平台的编辑器。
同时支持Windows、Linux、Mac OS X等操作系统,轻量级的编辑器,支持各种编程语言。
2.sublime 的插件机制。
(怎样安装插件这里就不多说了,网上有很多很好的文章)说真的,安装的插件不需要太多,装太多还不如用专业的IDE(集成开发环境),分享一下我自己用得得心应手的几个插件吧;同一个sublime 的插件,手动下载后,放进无论是 windows系统,还是放进去 Mac 系统,都能安装。
Emmet

Emmet 这个是必须的,html,css,js 的快速智能提示它都能提供,而且还提供各种快捷生成页面html 页面骨架的快捷键.
Sublime Server

sublime 本身浏览页面的方式,默认是用文件路径的方式去访问的,并不是以 http localhost:8080/的方式去访问页面,这很容易发生一些文件路径的误差。

当安装了Sublime Server 插件之后,就可以使用 htttp 的方式去访问页面了。安装完之后在“工具 - sublime server- star sublime server”打开,之后,在页面点击鼠标右键“View in sublimer”之后,可以得到 
Andy JS2
上面说的 Emmet 插件对 JavaScript 的代码提示支持是有限的,因此,可以,安装 AndyJS2这个插件弥补这个缺陷,由于在包管理工具上面已经不能搜索到这个插件,因此,可以手动把这个插件下载下来,下载地址:http://pan.baidu.com/s/1eSFzd2E 下载下来后,直接把文件夹里面的文件拷贝到“首选项- Package”里面,此时就完成安装了
这时候,再去写 JS 代码,就会发现,多了很多其他的智能提示。
也许会有人说,智能提示不强 要装这么多插件,用它 sublime干嘛,还不如用 IDE,例如 Webstorm或者 visual studio ,但是,如果是新手学习,想更熟悉一些语法和代码,那么,请一试 sublime,这种“华丽的智能提示” O(∩_∩)O
ConverToUTF8
如果页面出现乱码了,可以安装这个插件来解除乱码,这个也是必备的插件。
AllAutoComplete 和 PackageResourceViwer
对于文件夹内文件的智能提示,配合修改sublime默认的配置,可以设置 CSS 类名提示,在知乎上有大神的教程地址如下
https://zhuanlan.zhihu.com/p/21824377
还可以利用PackageResourceViwer 修改 sublime 侧边栏的样式和字体大小等
这些是博主自己安装的插件


3.sublime 自带的快捷键快速编写
(1)上面说的,配合 Emmet 快速生成页面骨架
注意,要先点右下角
选择“HTML”格式或者先“ctrl + s”保存页面
在空白页面写上 html:xt //按着键盘的 tab 键 就可以生成 xhtml 的页面骨架

在空白页面写上 html:5 //按着键盘的 tab 键 就可以生成 html5 的页面骨架

(2)html,CSS,快捷语法

类似的语法还有很多很多,这里列举了几个常用的,其余的可以网上搜一下就有,很多。
(3)跨行齐编辑
做法:在需要编辑的文本里,按住鼠标滚轮键,注意,是按住鼠标滚轮键,然后把鼠标往下拉,拉到那些需要编辑的文本的行里,会出现一条竖线,这时候就可以开始编辑了,如图

对我自己而言,Sublime Text 确实是个不错的代码编辑器,以后会写其他两个我也很喜欢的编辑器 Visual Studio Code 和 IDE Webstorm。
第一篇长的博文就先写到这里了,不得不说,写博客确实是件挺累人的事情,差不多跟在学校写报告差不多,但是,能温故而知新,想起很多以前学到的和接触到的东西,这是一件好事情O(∩_∩)O哈!
新手必需用!大道至简的前端编辑器Sublime Text的更多相关文章
- 解决前端开发sublime text 3编辑器无法安装插件的问题
今天在笔记本电脑上安装了个sublime,但是却出现无法装插件的问题.于是稍微在网上查了些资料,并试验了一番,写了如下文章. 安装插件的步骤: 弹出 选中install package 如果出现如下问 ...
- 使用代码编辑器Sublime Text 3进行前端开发及相关快捷键
推荐理由: Sublime Text:一款具有代码高亮.语法提示.自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受.相比于浮肿沉重的Eclipse, ...
- Golang 受欢迎的原因:大道至简
前言 Golang自2009年发布第一个版本,2012年发布1.0版本.在这10年的时间里,不断有开发者加入Golang的阵营中,不断共建Golang生态.其中比较有代表性的Golang编写软件作品是 ...
- 《大道至简》第一章读后感--JAVA语言伪代码形式
import.java.大道至简.*; //一·愚公移山 import.java.愚公移山.*; public class YuGongYiShan { //原始需求:惩山北之塞,出入之迂 //项目沟 ...
- 《大道至简》第一章——编程的精义_读后感(Java伪代码形式)
<大道至简>第一章——编程的精义_读后感(Java伪代码形式)1.愚公移山//愚公为团体的项目组织者.团体经理.编程人员.技术分析师等//子孙荷担者三人为三名技术人员//遗男为外协//目标 ...
- 《大道至简》第一章读后感(java语言伪代码)
中秋放假之际读了建民老师介绍的<大道至简>的第一章,其中以愚公移山的故事形象的介绍向介绍编程的精义.愚公的出现要远远早于计算机发展的历史,甚至早于一些西方国家的文明史.但是,这个故事许是我 ...
- 《大道至简》第三章读后感+ppt课后作业
大道至简读后感 ——第三章团队 古人云“三人为众”,众则是指团体或团队.对于一个团队而言,重要的是凝聚力,大家能在一起把拳头握紧那么产生的力量就不紧紧是能以1+1=2 来 ...
- 《大道至简》之第一章:编程的精义读后感(JAVA伪代码)
——大道至简之编程的精义读后感(JAVA伪代码) import.java.大道至简.*; import.java.愚公移山.*; public class YuGongYiShan{ 愚公 = {项目 ...
- 大道至简---软件工程实践者的思想------------java伪代码形式读后感第一章
import.java.大道至简.*; 1.编程的精义----愚公移山 /* 原始需求的产生:惩山北之塞,出入之迂 项目沟通的基本方式:聚室而谋曰 项目的目标:毕力平险,指通豫南,达于汉阴 技术方案: ...
随机推荐
- kaggle kernel使用指南
有几个要注意的地方: 1.可以选择CPU或GPU,但是机器学习模型一般的CPU就够了,最近(2019.04)使用GPU的话一小时后总是会断开连接,这时候要跑久一点的cell就凉了. 2.导入文件:支持 ...
- js的跨域问题和解决办法
我们在开发中,经常会遇到跨域请求数据问题,那么什么是跨域呢?跨域就是js在不用域之间的数据传输或者通信,比如你在使用ajax从另外一个域请求数据,或者你的页面引入了iframe,要从iframe中获取 ...
- Dubbo的Api+Provider+Customer示例(IDEA+Maven+Springboot+dubbo)
项目结构 dubbo-demo dubbo-api:提供api接口,一般存储实体类和接口服务 dubbo-provider:dubbo生产者提供服务,一般存储接口具体实现 dubbo-customer ...
- JS之作用域与闭包
JS之作用域与闭包 作用域在JS中同样也是一个重要的概念.它不复杂,因为ES5中只有全局作用域和函数作用域,我们都知道他没有块级作用域.但在ES6中多了一个let,他可以保证外层块不受内层块的影响 ...
- openerp学习笔记 对象间关系【多对一(一对一)、一对多(主细结构)、多对多关系、自关联关系(树状结构)】
1.多对一(一对一)关系:采购单与供应商之间的关系 'partner_id':fields.many2one('res.partner', 'Supplier', required=True, sta ...
- Oracle PL/SQL编程之包(packages)
1.简介 包用于在逻辑上组合过程和函数,它由包规范和包体组成. 我们可以使用create package来创建包,代码如下: ok,包创建完成,通过包的代码发现包的功能就是申明包中包含的过程和方法,红 ...
- Oracle 通过子查询批量添加、修改表数据
1.通过查询快速创建表 create table test1(id,job,mgr,sal) as () ) ---这是一个分页查询 ok,表创建成功 2.通过查询快速创建视图 create or r ...
- twitter storm常用命令
1.提交Topologies命令格式:storm jar [jar路径] [拓扑包名.拓扑类名][stormIP地址][storm端口][拓扑名称][参数]eg:storm jar /home/sto ...
- Django 入门项目案例开发(中)
关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. 昨天已经描述了如何搭建Django的开发环境,今天描述业务流程,具体我们要实现一个什么样的业务 ...
- Firebird execute block 批处理
火鸟的批处理,效率好高,使用简单. execute block as declare variable i ; begin ) do begin :i = :i + ; insert into m_u ...