WebStorm初探-含Angular2Demo

2017-03-30 本文已影响231人袋小超

出身

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 typescript Angular2项目主要由TypeScript语言编写
npm install -g @angular/cli WebStorm新建Angular2项目依赖
那么cli是个啥？
请点击这里,简单来讲，就是Angular开发团队解决开发人员在使用ng2开发的时候环境搭配的麻烦，而推出的一个tool。
打开WS，新建AngularCLI项目，输入项目名称，WS会自动选择Node和AngularCLI，点击Create，