身材

那些总是拿 webstorm 的身材和其他文本编辑器来比较的筒子们,总是说 webstorm 的体积如何如何大,启动如何如何慢,性能如何如何差。

  • 体积:webstorm 的功能强大,是前端开发工程化的管理、开发工具,内置了很多插件(当然是可以卸载的),体积固然大。
  • 启动:谁没事启动这 webstorm 来玩?亲!入职启动 webstorm,离职关闭 webstorm 才是正解好吗?
  • 性能:那么多功能一起跑,消耗内存固然要大,你搞前端开发没有个好机子?

来看看官网如何定义 webstorm 的:

The smartest JavaScript IDE

WebStorm is a lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.

相比文本编辑器,webstorm 确实重很多,但它能做的活儿,绝对爽到你。如果你看完全文还没有勾起你去使用它欲望的话,那么可以说你的起点还是蛮低的,或者是你做的事不是前端开发。

img.png

活儿

前端开发包括哪些东西?切页面?写页面?用 jQuery?如果你从事的前端开发只有这些?那么你的前端开发职业进度可能是刚刚开始。给你个文本编辑器绝对满足你了,比如 notepad++、sublime text、 dreamwear,你会乐在其中,所以别总是拿着文本编辑器和 webstorm 来做比较,那不是一个数量级的好吗?!

以我目前的进度,来告诉你前端开发主要包括哪些东西。首先来看着图:

img.png

这张图是淘宝前端开发工程师整理的,前端开发需要掌握的技能可见一斑(完整阅读:fhttps://github.com/JacksonTian/fks)。

下面摘几个 webstorm 功能来描述前端开发需要完成的事情。

版本管理

webstorm 的版本控制配置:

img.png

如果是文本编辑器,这些功能你需要安装第三方插件或者是在命令行里操作了。

智能提示

路径提示

img.png

路径引用,错误提示:

img.png

成员提示

img.png

引用提示

img.png

参数提示

img.png

代码质量

img.png

支持上图所列的代码质量检查工具,还可以把你项目中用到的脚本库添加进去辅助检查。

img.png

错误提示:

img.png

代码格式化:

img.png

可以在代码提交之前格式化,也可以手动格式化:

img.png

快速输入

代码模板

如下图:

img.png

新建的时候就可以用到:

img.png

代码片段

img.png

如上图,快捷符号为us,那么在 js 文件里,输入us即可出现'use strict';,与 emmet 类似。

文件监听

各种css、js预编译工具(如:less、scss、sass、coffescript)都需要监听文件的变化,这些东西在 webstorm 里轻易实现。

img.png

如图,scss 和 css 文件的关系:

img.png

nodejs

得益于 nodejs,使得前端开发变得越来越丰富。webstorm 对 nodejs 的支持非常的好。

断点单步调试

img.png

上图,显示当前作用域的变量、闭包和全局变量,与 chrome 控制台一致,左边显示的调用栈。

断点管理

img.png

变量查看

查看变量成员

img.png

启动配置

img.png

命令行

img.png

功能丰富的命令行。

总结

webstorm 功能强大,它做的不仅仅是文本编辑,更多的是前端开发的工程化管理。看看它的内存占用:

img.png

webstorm 的内存占用真的高吗?一个 QQ 都需要 600MB + 的内存啊!再看看 chrome。

再看看 webstorm 开了几个工程:

img.png

看了这么多,如果你还对她产生不了爱,那么请再看一遍,或者给我一个不爱的理由。