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

      

 

     

 

 

        

 

   

 

 

 

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有