前端学习【工具篇】——工欲善其事，必先利其器

时间 2019-11-16

标签前端学习工具篇工欲善其事必先利其器繁體版

原文原文链接

安装IDE

首先你须要安装一款IDE。css

我的推荐Node.js环境下的Sublime 3html

首先，让咱们打开Sublime，新建一个demo.html文件愉快的在代码区域中输入 ！前端

对，你没看错！赶快输入 ！吧~ vue

而后按下快捷键 Ctrl + E
node

奇迹发生了！
sublime居然自动生成了html的骨架！
与此同时，咱们愉快的前端程序猿之路也正式开始了！git

安装插件

接下来，我要给你强烈安利几款sublime功能强大的插件。
可是，在这以前咱们先来学习一下如何在sublime中安装插件。github

首先，按下快捷键 Ctrl + Shift + Pweb

你会发现屏幕上弹出了一个下拉搜索框。

接着，输入INSTALL，并点击回车编程

这样就会弹出可安装插件的搜索框，而后你就能够愉快地在搜索框里输入你想要安装的插件并敲下回车进行安装了。（插件安装时间很是短，能够在sublime的左下角看到短暂的安装信息。等插件安装完成以后通常就会弹出插件的说明文本。注：部分插件须要 配置node.js的路径。下面会就具体插件进行举例。）

最后重启sublime，而后你就能正常使用该插件了。是否是很是简单呢？没错，这就是我向大家强烈安利sublime的缘由。webstorm

重磅插件推荐

Emmet插件（官方文档）

Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.

Emmet的前身为 Zen Coding，若是你从事过前端相关工做，那么你对它必定不会陌生。其采用了仿CSS选择器的语法将你输入的代码片断生成为完整的HTML或CSS代码，极大的提升了代码的编写速度。

1、安装

输入INSTALL，并点击回车

输入Emmet，并点击Emmet Css Snippets进行安装

点击菜单栏>首选项>插件设置>Emmet>Settings-Default可进行相关设置

正常状况下，该插件不须要配置路径，只需 重启sublime便可使用。

2、使用

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代码更加规范

1、安装

输入INSTALL，并点击回车

输入CSScomb，点击安装

点击菜单栏>首选项>插件设置>CSScomb>Settings-Default，将里面的"node-path"属性设置为你电脑上node.js的安装路径便可

最后一步，重启sublime

2、使用

右键 run CSScomb 便可

效果仍是很明显的~

CSS Format插件

强大的CSS格式工具，有多种格式可供选择

1、安装

与上面的插件安装步骤彻底一致，后面再也不放图

输入INSTALL，并点击回车
输入CSS Format，点击安装
不须要配置路径，重启sublime便可

2、使用

右键 CSS Format >Expanded （注意，与CSScomb不一样，不会改变CSS属性的顺序）

右键 CSS Format >Compact

右键 CSS Format >Compressed (一行CSS代码）

HTML-CSS-JS Prettify插件

最后来说一讲前端通吃的格式优化插件 HTML-CSS-JS Prettify

1、安装

与上面的插件安装步骤彻底一致，后面再也不放图

输入INSTALL，并点击回车
输入CSS Format，点击安装
须要配置路径，将你电脑对应系统的路径改成node.js的安装目录保存便可（对了，在sublime中保存的快捷键为Ctrl + S）

最后重启sublime便可

2、使用

使用方法和前面的相似，也是右键选择便可。这款插件除了可以修改CSS的格式外，还能修改HTML与JS的格式。但须要注意，这款插件也不能改变CSS属性的顺序。

小结：笔者一口气给你们安利了4款比较经常使用的插件，部分插件的功能可能存在重复，可是咱们能够各取所长。好比，对于CSS文件通常能够先用CSScomb调整CSS属性的顺序，而后再用CSS Format转化为本身想要的格式。对于HTML和JS文件，咱们则选用HTML-CSS-JS Prettify插件。

结语

工欲善其事，必先利其器。

掌握了上述IDE以及插件，那么你的前端之路想必已经有了很好的开端。笔者想要告诉你的是，虽然已经有了一把驾轻就熟的武器，可是前端学习之路才刚刚开始，多动手多打怪才是提升编程能力的不二法门。加油吧！骚年！

关于为何不用WS

vue项目的建立者尤大,本身写了个sublime下语法高亮的插件vue-syntax-highlight，有人问他how about webstorm support?他是这么回答的。

做为尤大大的忠实粉丝（前端小白）。。。你懂的。。

ps. 好吧我必须认可写这篇文章的时候我还彻底不知道有WS这东西。。。