Sublime Text 3一款强大的代码编辑器「插件篇——Web前端之路」
kite1874 / 2019-03-16 / 软件工具 / 阅读量 544

温馨提示:文章针对Web前端新手写的,能力有限也只能写出这种程度的文章。

今天开始,我决定写一些关于web前端的文章。自己也是刚开始接触,也算把自己学到的知识回顾一下,加深记忆。菜鸡一枚,懂得也不是很多。写得不好的东西多多包涵,也欢迎留言指出我写的不好和错误的地方。

今天就给推荐一款Sublime Text 3,很多人刚开始学习Web的时候使用的都是Dreamweaver,我自已也不例外。Dreamweaver功能很多,只是很多功能压根用不到的。太过臃肿,运行速度和占用内存都比较大。根本就不像一个编辑器的该有的样子。而Sublime Text则比较轻量,占用内存大概是Dreamweaver的三分之一。如果是Dreamweaver,像我这种菜鸡电脑,是吃不消的。最重要的Sublime Text支持个性化定制,有丰富的主题和插件。这个是Dreamweaver无法比拟的。Sublime Text 基本支持所以主流的编程语言文件类型,不只局限于HTML、CSS等制作网页的文件类型。尤其是多行编辑这个功能,我十分喜欢。如果说这两款哪个更好, 我个人是更倾向于Sublime Text的。使用哪一款软件,具体要看个人对软件的熟悉程度和使用习惯来定的。

Sublime Text的安装方法跟其他软件一样,就不再赘述了。我主要说说一些我在用的插件,「后面还会写一篇Sublime Text经常用到的快捷键。」

Sublime Text安装插件可以在软件里面直接进行的,首先你需要安装Package Control,然后再通过Package Control安装主题和插件。「这需要科学上网,如果已经有梯子的朋友,在安装的时候请使用全局代理模式」VPS搭SSR


主题Spacegray

Spacegray是一款比较流行的主题,有好几种样式可以切换,下面这两种是我比较喜欢的。不仅如此,它还带有文件类型图标功能,可以在配置文件里面开启该项功能,具体的安装和修改的方法点击这里「需要科学上网」

Emmet

这应该是每个web前端用Sublime Text都会装的一个软件,可以快速编辑HTML和CSS代码。
例一:div#divid.divclass,再按Tab。 生成下面代码块:

 <div id="divid" class="divclass"></div>

例二:ul>li#item$*4>a^div^^div,再按Tab。 生成下面代码块:

<ul>
 <li id="item1"><a href=""></a></li>
 <li id="item2"><a href=""></a></li>
 <li id="item3"><a href=""></a></li>
 <li id="item4"><a href=""></a></li>
 <div></div>
</ul>
<div></div>

通过上面两个例子就可以看出Emmet有多么强大,编码速度可以成倍增长!想了解更多关于Emmet的用法点击这里


JavaScript&NodeJS Snippets

看名字就知道是针对JavaScript和Node.js开发的插件,通过输入关键字快速调出想要的函数,再通过Tab快速修改内容。


举个例子:写过JavaScript的都知道,最经常遇到的就是function(){}、document.getElementById("")、console.log("")这些类型的代码。JavaScript&NodeJS Snippets就是为了解决这个问题诞生的。
看完下面这张图你就能体会到它的妙用了,只需要输入fun就能调出function(){},gi调出document.getElementById(""),cl调出console.log("")

具体快捷方式可以点击这里「需要科学上网」


A File Icon

A File Icon的作用的给文件类型添加图标,增加辨识度。可以通过配置文件修改图标的透明度等等

DocBlockr

DocBlockr是快速添加注释,给相应的代码添加注释是一个好习惯。不添加注释的都是真·汉子!使用方法:/*+回车/**+回车


更多功能点击这里「需要科学上网」

SideBarEnhancements

SideBarEnhancements 主要功能是增加侧边栏的功能和自定义打开方式
Sublime Text本身是不具备类似于Dreamveaver的快速调用浏览器预览HTML的功能的,毕竟Sublime Text并不只是为了Web开发而开发。不过我们可以通过SideBarEnhancements来实现这个功能。
安装SideBarEnhancements和其他插件一样,就不再赘述。
配置方法:Perferences > Key Bindings,打开配置文件,如图片所示添加下面的代码

//chorme
{
"keys": ["f10"], //快捷键,根据喜欢定义
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe", //浏览器的目标路径,请自行查看
"extensions": ".*"
}
}

Http Requester

很多人测试接口的时候都喜欢在浏览器里安装插件或者另外下载一个测试软件来完成,Sublime Text提供了一款接口测试插件Http Requester,可以直接在Sublime 里面完成测试的工作。不需要切换到不同的软件进行测试。
具体测试方法点击这里

ColorPicker

ColorPicker是一个拾色器插件,这应该是web前端必备的工具。快速打开ColorPicker的快捷键为:ctrl+shift+c

JQuery

这是一个JQuery的代码补全的插件。也是必装的插件。

后面还有什么插件我会在文章下面补充。。。

喜欢我写的东西的朋友可以关注一下我的公众号:kiteLife
我会不定期更新一些我觉得有趣有价值的文章给大家。


还有我的博客:kite1874.com