出身

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，

new project.png

視網絡環境，WS開始初始化開發環境,安裝依賴包。

Installing packages.png

安裝完畢后，打開npm界面，雙擊執行 start ,可以看到運行狀態：

running.png

打開瀏覽器，輸入localhost:4200,運行成功~

運行成功.png

下篇介紹AngularCLI