内容简介：前端学习【工具篇】——工欲善其事，必先利其器
##安装IDE
首先你需要安装一款IDE。
个人推荐Node.js环境下的Sublime 3
首先，让我们打开Sublime，新建一个demo.html文件愉快的在代码区域中输入 ！
对，你没看错！赶快输入 ！ 吧~
然后按下快捷键 Ctrl + E
奇迹发生了！
sublime竟然自动生成了html的骨架！
与此同时，我们愉快的前端程序猿之路也正式开始了！
##安装插件
接下来，我要给你强烈安利几款sublime功能强大的插件。
但是，在这之前我们先来学习一下如何在sublime中安装插件。
首先，按下快捷键 Ctrl + Shift + P
你会发现屏幕上弹出了一个下拉搜索框。
接着，输入 INSTALL ，并点击回车
。下面会就具体插件进行举例。）
最后 重启sublime ，然后你就能正常使用该插件了。是不是非常简单呢？没错，这就是我向你们强烈安利sublime的原因。
##重磅插件推荐
####Emmet插件（官方文档）
Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.
Emmet的前身为 Zen Coding，如果你从事过前端相关工作，那么你对它一定不会陌生。其采用了 仿CSS选择器的语法 将你输入的代码片段生成为完整的HTML或CSS代码，极大的提高了代码的编写速度。
#####一、安装
- 输入
INSTALL，并点击回车
- 输入
Emmet，并点击Emmet Css Snippets进行安装
- 点击
菜单栏>首选项>插件设置>Emmet>Settings-Default可进行相关设置
即可使用。
#####二、使用
Emmet的快捷键是Tab，有点类似于sublime自带的智能感知，但是需要在你输入代码片段后按下Tab来触发。
下面我来举一些 HTML 中例子：
- 首先我们还是用
!来举例子，和之前没有安装Emmet会有什么不同吗？
和之前完全一样，有木有！不同的是我们现在只需要按一下Tab键，不需要费力地用手去够快捷键了。
- 输入
ul>li*6，按下Tab
Boom！！！一个原本需要费劲的敲很久的列表标签就生成了！
- 输入
div.foo>h1，按下Tab
一个class为foo，并且嵌套着一个h1标签的div标签就这样瞬间生成了！
- 输入
(div.foo>h1)+(div#foo>img)，按下Tab
想想我们可以为此节省了多少时间？是不是有点小激动呢？
然而Emmet的强大绝不仅限于 HTML ，下面我再来举一些 CSS 中的例子：
-输入 w100 ，按下Tab
-输入 h75p ，按下Tab
-输入 ov-h ，按下Tab
是不是感觉酷毙了！
由于篇幅关系，笔者在这里仅仅举出了一些简单的例子，目的是让读者能对Emmet插件有个大概的认识。这个插件的优点就是上手极快，可以充分发挥自己的想象力，大大提高码代码的速度。你还在等什么，快去试试吧！
####CSSComb插件（官方文档）
Makes your code beautiful
这款插件可以使用指定的 排序 方式对CSS的属性进行排序，使你的CSS代码更加规范
#####一、安装
- 输入
INSTALL，并点击回车
- 输入
CSScomb，点击安装
- 点击
菜单栏>首选项>插件设置>CSScomb>Settings-Default，将里面的 "node-path"属性 设置为你电脑上node.js的安装路径即可
- 最后一步， 重启sublime
#####二、使用
右键 run CSScomb 即可
效果还是很明显的~
####CSS Format插件
强大的CSS格式工具，有多种格式可供选择
#####一、安装
与上面的插件安装步骤完全一致，后面不再放图
-
输入
INSTALL，并点击回车 -
输入
CSS Format，点击安装 -
不需要配置路径， 重启sublime 即可
#####二、使用
- 右键 CSS Format >Expanded （注意，与CSScomb不同，不会改变CSS属性的顺序）
- 右键 CSS Format >Compact
- 右键 CSS Format >Compressed (一行CSS代码）
####HTML-CSS-JS Prettify插件
最后来讲一讲前端通吃的格式优化插件 HTML-CSS-JS Prettify
#####一、安装
与上面的插件安装步骤完全一致，后面不再放图
-
输入
INSTALL，并点击回车 -
输入
CSS Format，点击安装 -
需要配置路径，将你电脑对应系统的路径改为node.js的安装目录保存即可（对了，在sublime中保存的快捷键为
Ctrl + S）
- 最后 重启sublime 即可
#####二、使用
使用方法和前面的类似，也是右键选择即可。这款插件除了能够修改CSS的格式外，还能修改HTML与JS的格式。但需要注意，这款插件也不能改变CSS属性的顺序。
小结：笔者一口气给大家安利了4款比较常用的插件，部分插件的功能可能存在重复，但是我们可以各取所长。比如， 对于CSS文件一般可以先用CSScomb调整CSS属性的顺序，然后再用CSS Format转化为自己想要的格式。对于HTML和JS文件，我们则选用HTML-CSS-JS Prettify插件。
##结语
工欲善其事，必先利其器。
掌握了上述IDE以及插件，那么你的前端之路想必已经有了很好的开端。笔者想要告诉你的是，虽然已经有了一把得心应手的武器，但是前端学习之路才刚刚开始，多动手多打怪才是提高编程能力的不二法门。加油吧！骚年！
以上所述就是小编给大家介绍的《前端学习【工具篇】——工欲善其事，必先利其器》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
