您现在的位置:首页 >> 前端 >> 内容

前端开发神器:Sublime编辑器快速入门

时间:2017/9/2 9:28:00 点击:

  核心提示:前端的编辑工具众多,选择一款好的编辑器能大大的提高我们的开发效率,提升编程工作的生产力,今天,给大家介绍的是一款堪称前端开发神器的编辑器sublime,让我们一起来学习快速入门吧。首先,我们需要到他的...

前端的编辑工具众多,选择一款好的编辑器能大大的提高我们的开发效率,提升编程工作的生产力,今天,给大家介绍的是一款堪称前端开发神器的编辑器sublime,让我们一起来学习快速入门吧。

首先,我们需要到他的官网去下载,官网地址是:www.sublimetext.com

前端开发神器:Sublime编辑器快速入门

那么,接下来我们点击下载,就可以下载安装文件了,默认下载的是sublime text 3

前端开发神器:Sublime编辑器快速入门

下载完成以后,双击安装文件,安装提示下一步即可完成安装

安装完成以后,按win健,输入sublime 找到安装好的编辑器

前端开发神器:Sublime编辑器快速入门

双击打开编辑器,即可看到sublime text 3 的界面了

前端开发神器:Sublime编辑器快速入门

需要注意的是,mac和windows操作系统下,sublime的操作快捷键差别比较大,我们以windows操作系统为例讲解。

我们打开sublime编辑器后,应该能明显的感觉到两点,第一,启动速度非常快,第二,sublime的界面非常的简洁。

前端开发神器:Sublime编辑器快速入门

sublime有一个方便的特性,就是我们编辑过的代码,即使没有保存,我们打开的时候依然会在,这对我们来说非常的便利。

我们先来了解一下菜单栏里面比较常用的功能,首先就是file菜单,主要是处理文件类的功能,打开文件后能直接自动识别打开文件的类型,sublime text 3 还能直接打开图片,这是前端工程师的福利,,如下图:

前端开发神器:Sublime编辑器快速入门

Edit菜单主要是我们编辑代码的一些常用功能,如下图(图示的只是常用,其他的可自行用一下):

前端开发神器:Sublime编辑器快速入门

Selection 选择菜单,顾名思意,主要用来实现选择功能,主要需要关注的功能如下图:

前端开发神器:Sublime编辑器快速入门

find菜单,主要包含的功能是查找替换功能,和其他的代码编辑器类似:

前端开发神器:Sublime编辑器快速入门

view菜单主要是对sublime编辑器本身界面的配置,比如我们可以显示side bar,效果如下图:

前端开发神器:Sublime编辑器快速入门

点击show side bar 后 ,左边就多了一栏,如下图:

前端开发神器:Sublime编辑器快速入门

然后始一个Goto菜单栏,包含了一个gotoAnything 特性,在我们做比较大的项目的时候,可以实现文件内或者文件之间的导航,这个特性是sublime 编辑器特别优秀的特性,能大大增加我们查找目标文件的效率

前端开发神器:Sublime编辑器快速入门

点击后,会出现一个命令框,可以输入一些跳转的命令:

前端开发神器:Sublime编辑器快速入门

Tools里面还有一个sublime非常优秀的特性,就是命令模式,点击命令模式,就可以输入很多命令执行操作,这个也是sublime编辑器所独有的。其余的菜单就是一些常用的功能,没有特别总要的,最后特别提一下preferences里面的一个特性,setting,里面是sublime编辑器默认的一些样式,显示效果,可以更改

前端开发神器:Sublime编辑器快速入门

点击后,进入到默认的信息配置页面

前端开发神器:Sublime编辑器快速入门

这些就是sublime text 的快速入门,入门了以后呢,就可以玩玩sublime里面的一些高级的东西了,例如多行游标 /goAnything/命令模式/按照插件等,这里额外提一下,emmet插件是前端必备的哦,能用快捷语法大大提高我们的开发幸福指数,下面是一个emmet插件的按照流程:

1. 安装package control

下载package control ,吧他放在packages文件夹下,之后打开preferences,应该多出来两个选项,如下图:

前端开发神器:Sublime编辑器快速入门

2. 然后呢,打开 package control ,选择 install package

前端开发神器:Sublime编辑器快速入门

3. 在输入框输入emmet,点击安装,等待一下

前端开发神器:Sublime编辑器快速入门

4. 安装完成以后,输入快捷语法 !+ctrl+E 看有没有出现如下效果,如果出现,恭喜你安装emmet插件成功了

前端开发神器:Sublime编辑器快速入门

作者:网络 来源:ITsource
  • 上一篇:es6常用方法
  • 下一篇:react组件挂载了解