Sublime编辑器快速入门

た入场券 2022-06-09 07:08 177阅读 0赞

前端的编辑工具众多，选择一款好的编辑器能大大的提高我们的开发效率，提升编程工作的生产力，今天，源码时代Web前端学科讲师给大家介绍的是一款堪称前端开发神器的编辑器sublime,让我们一起来学习快速入门吧。  
首先，我们需要到他的官网去下载，官网地址是: [www.sublimetext.com][]  
  
![111854lc067y6g6tdfff6q.png][]    
那么，接下来我们点击下载，就可以下载安装文件了，默认下载的是sublime text 3  
  
![111856k72ezd7q6ttyqyyp.png][]    
下载完成以后，双击安装文件，安装提示下一步即可完成安装  
安装完成以后，按win健，输入sublime 找到安装好的编辑器  
  
![111858i1wqkqbw5yy5efrb.png][]    
双击打开编辑器，即可看到sublime text 3 的界面了  
  
![111902uznnq95kg3pmen6b.png][]    
需要注意的是，mac和windows操作系统下，sublime的操作快捷键差别比较大，我们以windows操作系统为例讲解。  
我们打开sublime编辑器后，应该能明显的感觉到两点，第一，启动速度非常快，第二，sublime的界面非常的简洁。  
  
![111906wmylezy0ogri1rvn.png][]    
sublime有一个方便的特性，就是我们编辑过的代码，即使没有保存，我们打开的时候依然会在，这对我们来说非常的便利。  
我们先来了解一下菜单栏里面比较常用的功能，首先就是file菜单，主要是处理文件类的功能，打开文件后能直接自动识别打开文件的类型，sublime text 3 还能直接打开图片，这是前端工程师的福利，,如下图：  
  
![111911l1279jd92770abj9.png][]    
Edit菜单主要是我们编辑代码的一些常用功能，如下图(图示的只是常用，其他的可自行用一下)：  
  
![111914k3hs62aysy16sjs6.png][]    
Selection 选择菜单，顾名思意，主要用来实现选择功能，主要需要关注的功能如下图：  
  
![111917o27pal443ar227ay.png][]    
find菜单，主要包含的功能是查找替换功能，和其他的代码编辑器类似：  
  
![111921e8d4y8hejz3bwmb4.png][]    
view菜单主要是对sublime编辑器本身界面的配置，比如我们可以显示side bar,效果如下图：  
  
![111925yx6qo16i6c6l881x.png][]    
点击show side bar 后 ，左边就多了一栏，如下图：  
  
![111928g548h4kbpp4s4ruf.png][]    
然后始一个Goto菜单栏，包含了一个gotoAnything 特性，在我们做比较大的项目的时候，可以实现文件内或者文件之间的导航，这个特性是sublime 编辑器特别优秀的特性，能大大增加我们查找目标文件的效率  
  
![111931rcemcr8bhjc080jm.png][]    
点击后，会出现一个命令框，可以输入一些跳转的命令：  
  
![111935z7d6wy9i83zi3wyh.png][]    
Tools里面还有一个sublime非常优秀的特性，就是命令模式，点击命令模式，就可以输入很多命令执行操作，这个也是sublime编辑器所独有的。其余的菜单就是一些常用的功能，没有特别总要的，最后特别提一下preferences里面的一个特性，setting,里面是sublime编辑器默认的一些样式，显示效果，可以更改  
  
![111939c2h6whmm7zx6xzdt.png][]    
点击后，进入到默认的信息配置页面  
  
![111942ftqvvo3vdzgvtdtn.png][]    
这些就是sublime text 的快速入门，入门了以后呢，就可以玩玩sublime里面的一些高级的东西了，例如多行游标 /goAnything/命令模式/按照插件等，这里额外提一下,emmet插件是前端必备的哦，能用快捷语法大大提高我们的开发幸福指数，下面是一个emmet插件的按照流程：  
1. 安装package control  
下载package control ，吧他放在packages文件夹下，之后打开preferences，应该多出来两个选项，如下图：  
  
![111946ahggwjwu0rg8az1y.png][]    
2. 然后呢，打开 package control ，选择 install package  
  
![111949zbjbi86c6b5cjcsz.png][]    
3. 在输入框输入emmet，点击安装，等待一下  
  
![111952b1ifaes0ser0kyv0.png][]    
4. 安装完成以后，输入快捷语法 !+ctrl+E 看有没有出现如下效果，如果出现，恭喜你安装emmet插件成功了  
  
![111956nsvveerrd9aovoa1.png][]

Sumlime编辑器快速入门1516.png (478.19 KB, 下载次数: 148)

[下载附件][Link 1]

2017-6-22 11:19 上传

本文来源：http://bbs.itsource.cn/thread-1480-1-1.html

[www.sublimetext.com]: http://www.sublimetext.com/
[111854lc067y6g6tdfff6q.png]: /images/20220609/95996d6771db48af9b84fea4378c0d21.png
[111856k72ezd7q6ttyqyyp.png]: /images/20220609/f27d7081f3604376a8ba42e26304093f.png
[111858i1wqkqbw5yy5efrb.png]: /images/20220609/fa2e9d8253d044f1baa80b1e2064d1ed.png
[111902uznnq95kg3pmen6b.png]: /images/20220609/fa4df1e3911942c8b12f5f722d85b3b2.png
[111906wmylezy0ogri1rvn.png]: /images/20220609/e026cfb0e68d4405a4d44bc55c0eff87.png
[111911l1279jd92770abj9.png]: /images/20220609/aea98074e9854ac1a163c172ae495ec6.png
[111914k3hs62aysy16sjs6.png]: /images/20220609/c0a709b6593046a898281690ca6b5d31.png
[111917o27pal443ar227ay.png]: /images/20220609/9f0e7fd74c644b089eacc7e651ba753a.png
[111921e8d4y8hejz3bwmb4.png]: /images/20220609/f7c40e7f6103423880c27401372615d4.png
[111925yx6qo16i6c6l881x.png]: /images/20220609/ff8f6bc99c994aee8435948f2bc46de9.png
[111928g548h4kbpp4s4ruf.png]: /images/20220609/56b6b29d7bf349dabf9eabf3b06c6007.png
[111931rcemcr8bhjc080jm.png]: /images/20220609/9a76c514c6da4d709c3299ea54830643.png
[111935z7d6wy9i83zi3wyh.png]: /images/20220609/101cecdac6734861a69bb05b5e41292f.png
[111939c2h6whmm7zx6xzdt.png]: /images/20220609/97ba651ad8fd450bba2c44ccc947330e.png
[111942ftqvvo3vdzgvtdtn.png]: /images/20220609/d5187dc6de7a4a03860187c36ef59f02.png
[111946ahggwjwu0rg8az1y.png]: /images/20220609/0231428bfa534e74966043d7f8d86c60.png
[111949zbjbi86c6b5cjcsz.png]: /images/20220609/9f47dc66e078465f82ac772326cbbb2c.png
[111952b1ifaes0ser0kyv0.png]: /images/20220609/235d991fb8c846279ad602f694782349.png
[111956nsvveerrd9aovoa1.png]: /images/20220609/fc610578030f46b98348cdef8dfa8e98.png
[Link 1]: http://bbs.itsource.cn/forum.php?mod=attachment&aid=MTUxNHw1N2VlZTlmZnwxNTA0MDg0MzExfDE3NTcyfDE0ODA%3D&nothumb=yes