出身
WebStorm(后面简称WS)出身于大名鼎鼎的JetBrains公司，如果有同学用Java或者Python进行过开发，相信对其公司出品的Intellij IDEA 和 PyCharm一定赞不绝口。最最厉害的是，jetbrains旗下众多IDE，均是用Java编译的！！！
WS:我们的口号是什么？
The smartest JavaScript IDE!
特征
-
支持全面
就如同口号中宣传的，WS几乎支持所有流行的前端框架与技术(Angular系列，RN，PhoneGap...)，2017.1版已经支持Vue！由于WS是一款商业软件，所以它内置了许多插件，当然，它也支持用户自行安装插件。
-
智能编码协助
WebStorm为您提供JavaScript和编译到JavaScript语言，Node.js，HTML和CSS的智能编码协助。 享受代码完成，强大的导航功能，即时错误检测和所有这些语言的重构。
-
调试，跟踪和测试
WebStorm提供强大的内置工具，用于调试，测试和跟踪客户端和Node.js应用程序。 通过最低配置需求和周到的集成到IDE中，这些任务通过WebStorm更容易。
-
无缝工具集成
WebStorm与流行的用于Web开发的命令行工具集成，为您提供高效，简化的开发体验，而无需使用命令行。
-
IDE功能
WebStorm建立在开源IntelliJ平台之上，JetBrains已经开发和完善了15多年。 享受适合您的开发工作流程的微调高度可定制的体验。
常用设置
贴心提示：是Mac版的WebStorm哟~
代码编辑
- 代码跳转: Command + 左键 或者 Command + B，可以跳转到函数或者变量的声明位置
- 调用位置: Command + 7，查找调用者
- 自动补全: 最好是修改一下响应时间，Preferences->Editors->General->Code Completing: Autopopup in 0.
- 打开文件: Command +Shift+ O
- 打开类: Command+O
- 显示函数声明：Command+Y
- “超级”打开: 双击 shift，可以 search anywhere.
- 复制整行: Command + D
- 删除整行: Command + Delete
- 折叠当前块: Command + “-”，折叠当前块以及子块: Command + Alt + “-”，折叠全部块: Command + Shift + “-”
- 展开, 把折叠的快捷键换成”+”
重构
- 改名: Shift + F6，修改函数名，变量名，文件名，同时修改所有引用的位置.
- 移动文件: F6, 并修改文件的引用位置, 包括 html 和 js文件
- 抽取函数: Command + Alt + M，整块代码抽取成函数
- 抽取变量: Command + Alt + V，当前选中抽取为变量
- 移动整块代码: Command + Shift + ↑↓
- 包裹: Command + Alt + T，外层包裹，比如 if、try catch等
Run & Debug
- 可以直接 Run & Debug NodeJS 脚本，也可以执行服务端脚本，如下图所示：
Run & Debug.png
NPM
- View -> Tool Windows -> npm，可以打开 npm 快捷窗口
当然，你这个应用是要用npm install过的哟，然后双击start就行啦！
npm_start.png
版本控制
- 本地代码控制
VCS -> Local history 可以列出本次 WebStorm 启动以后，所有的代码修改。
可以集成主流的版本控制工具, 如 git、mercurial、subversio 等
通过两个按钮, 即可完成 pull、update、merge、commit、push 的完整流程, 非常方便，如下图所示：
VCS.png
通过 branch 管理工具，可以方便的切换 branch 工作，同时可以 create、close、merge 操作，如下图所示：
branch.png
格式化代码
快捷键: Alt/Option+Command+L
Format Code.png
补充说明
- npm
npm是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题，常见的使用场景有以下几种：
1.允许用户从npm服务器下载别人编写的第三方包到本地使用。
2.允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用。
3.允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用。
国内的话，还是换淘宝镜像源吧！npm.taobao.org/
WS内嵌npm操作界面，View->Tool Windows->npm,打开npm界面，从而省去再打开一个终端了。
常用的npm指令通常为:
-
npm install xxx安装 -
npm uninstall xxx卸载 -
npm update -g全局更新 -
npm search xxx搜索 -
npm install npm@latest -g安装最新npm
- Node.js
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
菜鸟课程点这里
新版本Node.js安装后，默认安装npm。
举个栗子：
vim helloworld.js
console.log('Hello World!');
node helloworld.js
node helloworld.js .png
这里着重补充一点，由于Node.js和npm发展很快，所以经常会有新版本更新，那么我们可以用nvm来管理Node.js；
- 通过
nvm install node来安装Node.js； - 通过
nvm ls来查看个版本的Node.js； - 如果安装了多个Node.js，并且想指定使用某个版本的Node.js,
则使用nvm use xxx这里的xxx则是某个版本Node.js;
如果想更新npm，则执行[sudo] npm update -g，或者[sudo] npm install npm@latest -g即可。
- Webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
教程看这里
通过npm install -g webpack安装
- gulp.js
Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目...
教程看这里
通过npm install -g gulp来安装
这里要记录一点 全局安装过gulp后，在运行gulp的时候，还是会有提示让你再安装一遍gulp，这是gulp故意设计的，原因是为了版本和依赖的控制。意思就是当别人Fork你代码，或者你过段时间拷贝到别的电脑上再gulp的时候，能控制gulp的版本和其他插件的版本。
参考讨论
-
两者区别
gulp 和 webpack 不是一回事
- Gulp 是一种工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说，就是使用Gulp，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。
- webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。没用过browserify，这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。这样就知道，Gulp是一个工具，而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。
-
http-server
用于webstorm等重量级IDE功能实在太完善，我们在某些情况下可以抛弃webstorm，来快速启动我们的项目，那么就要用到http-server了。
- 通过
npm install -g http-server来安装 - cd到你的项目目录，运行
http-server即可。
常用的npm包
通常我们安装完npm后，需要安装一些常用的包来方便我们开发，例如以下一些就是：
npm常用包.png
举个栗子
下面，我们来举个栗子，如何用WS开发Angualr项目。
搭建环境(同样是Mac环境下)：
-
node.js官网下载安装最新版node.js。最新版node.js安装后，默认安装npm。
-
安装完node.js后 执行
node -v / npm -v查看版本。 -
先升级 npm
npm update / npm upgrade -
安装必须库
npm install -g typescriptAngular2项目主要由TypeScript语言编写
npm install -g @angular/cliWebStorm新建Angular2项目依赖
那么cli是个啥？
请点击这里,简单来讲，就是Angular开发团队解决开发人员在使用ng2开发的时候环境搭配的麻烦，而推出的一个tool。 -
打开WS，新建AngularCLI项目，输入项目名称，WS会自动选择Node和AngularCLI，点击Create，
new project.png
视网络环境，WS开始初始化开发环境,安装依赖包。
Installing packages.png
安装完毕后，打开npm界面，双击执行 start ,可以看到运行状态：
running.png
打开浏览器，输入localhost:4200,运行成功~
运行成功.png
网友评论