新手必需用!大道至简的前端编辑器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哈!

				
时间: 2024-10-11 06:10:14

新手必需用!大道至简的前端编辑器Sublime Text的相关文章

咳咳,软工新手读《大道至简》读后感

<大道至简>读后感 本书是周爱民先生把这本<大道至简>表达为"阐述软件工程的思想核心",书中又分为八个章节,接下来我想把我对每个章节的认识分开来介绍. 在第一章节中,周爱民先生将编程归类为公式"程序等于算法加结构",同时周爱民先生也将编程认为是一件简单的劳动工作.一个程序无论多么复杂,都可以将其拆分为无数多个不同的结构,然后用算法把它们编织出来.这就想文中的例子,把愚公移山的工程拆分成多个顺序.分支和循环.文中的观点就是"算法是对一

前端开发 sublime text 常用插件和配置

前端开发sublimeconfig mac配置 此文件目录中文件主要是关于sublime的插件配置,快捷键配置,主题和字体配置. 插件列表 所有插件都可以使用Package Control安装,具体的安装方法可以自行谷歌安装,不在本文的介绍范围之内.也可以是使用git 手动安装. 1.autoprefixer 该插件主要使编写css更加的方便和快捷,可以配置快捷键给标签属性添加浏览器厂商前缀.安装前需要确定电脑安装node. 配置快捷键如下: //autoprefixer快捷键设置 { "key

大道唯简----存储架构演变之剖析

随着云计算和大数据的发展,传统的基于主机的存储架构已逐渐向网络化.虚拟化.海量云存储发展,从分散走向集中,存储的性能.效率和扩展性.灵活性被企业普遍关注.从更高层次看,存储不仅需要提供数据的管理.数据复制.快照.镜像.迁移等例行性事物,更要能处理数据的灾难恢复.数据一致性.虚拟化融合.弹性计算与资源扩展等工作,这些都依赖于良好的存储架构来满足. 结合企业的IT建设,我们可以把存储架构的演变归纳为三个阶段. 第一个阶段是存储基本架构的演进过程. 在企业建立初期,用户的数据规模并不大,存储需求也相对

读《大道至简》第2章有感

大道至简第二章主要讲了“懒人创造了方法”,在这一章节中作者就同一时代得愚公和李冰在挖山时的方法做了比较,结论显而易见,李冰的烧山之法完胜愚公.是的,愚公只会日复一日的“勤劳”挖山,按他的说法山总有一天会被“愚子愚孙”挖完,但是时间也未免有点长.我们都知道做任何项目都是有时间限制的,任何一个程序的运行时间也不能太长,不然会很影响软件的工作效率.这就不得不说一个项目的正确的管理方法和一款软件的好的架构和算法. 孔子曾说过“学而不思则罔”,所以我们做任何事情之前必需要做的事便是思考,拿到一个项目,接到

无心插柳还是大道至简

这篇文章还是说一下做网站和站长的这些事. 说之前,先简单叙述一下自己的经历.接触网站和SEO是2014年4月,从零开始的,当时水平也就会看个网页,编辑个QQ空间,也许还要百度一下.当时网上看见说做个网站做淘宝客可以赚钱,还花了290多元买了SEO视频课程,做了人生第一个网站,一个卖东北黑木耳的淘宝客网站,一路学习做站.SEO,作为兴趣爱好,站长生涯也就此开始. 之后又做了几个别的站,一共赚了几千块钱,到了2015年4月左右,一个冲动的决定,我辞去干了7年的国企工作,原因是受不了国企的扯皮和死板,

《大道至简---软件工程实践者的思想》阅读笔记一

07大道至简——软件工程实践者的思想阅读笔记之一 2015-05-29 16:41 第一章编程的精益 作者将<列子·汤问篇>中的<愚公移山>与软件工程巧妙的结合起 来,通过分析证明其实在两千多年前的愚公除了在移山的过程中担任 “项目组织者,团队经理,编程人员等众多角色”,还已经具备了编 程人员的基本素质. <愚公移山>                                项目管理 惩山北之塞,出入之迂                       项目原始需求的

读《大道至简》随感

终于结束了. 十几天的暑假时间,每天不定时间的阅读,让我完完整整的阅读完了<大道至简>.整本书不是很长,主要是作者关于自己十年来对自己在编程方面的总结与经验之谈,由浅入深的从各个方面阐述编程的历史与怎样去学习编程,怎样去做一个合格的程序员.全书共110页,分为八章,每一章中作者这都会引用若干的实例去论证自己说的正确性,同时也使用这些例子使读者更直接.更能深刻的理解作者想要表达内容.书中趣闻不断,很适合我们这种刚开始接触编程的新手去研读. 这本书我到现在为止一共读过两遍,刚在 读第一遍的时候,只

大道至简第一章伪代码

一.愚公移山 Import.java.大道至简.*; Import.java.愚公移山.*; Punlic class yishan { Public static void main (string [] args) { While(山不平) { 叩石垦壤,箕?于渤海之尾: If(愚公不死) { 愚公与子孙一起移山: } Else { 子又生孙,孙又生子......子子孙孙,无穷匮也: } } System.print.ln("山已移完"): } } 二.会不会写程序 Public

《大道至简》第五章读后感

失败的过程也是过程,我觉得这句话很有深意,阅读完大道至简第五章,我又有了很深的感触. 首先是“做过程不是做工程”,过程是为了实现某种目的而经历的一些事情,过程有很多种,虽然经历了某种过程,但不一定能实现某种功能.做完过程的每一个阶段,并不等于做工程.做过程不是做工程的精义,也不是最终目的. 然后是“做过场”,做过场就好像是一种形式一样,做了没必要做的事情,就是浪费时间. 做工程的最终目的是实现客户的要求,工程只是一种实现的途径.最初做开发的前辈们,不用什么工程或者过程,也一样编出了程序,也一样解