webstorm美化json

『壹』 webstorm怎麼編譯angluarjs

AngularJS體驗式編程系列文章，將介紹如何用angularjs構建一個強大的web前端系統。angularjs是由Google團隊開發的一款非常優秀web前端框架。在當前如此多的web框架下，angularjs能脫穎而出，從架構設計上就高人一等，雙向數據綁定，依賴注入，指令，MVC，模板。Angular.js創新地把後台技術融入前端開發，掃去jQuery一度的光芒。用angularjs就像寫後台代碼，更規范，更結構化，更可控。
webstorm
前言
俗語講：「工欲善其事，必先利其器」，為了玩轉AngularJS，順手的工具要選好。在上一篇文章中，通過yeoman我們構建了一個AngularJS的工程，通過vi編輯器和命令行操作，我們幾乎可以完成整個的項目開發。但是，隨著代碼量和文件數的增加，文件和目錄越來越難把握，代碼文件各種難懂，縮進不一致，controller和directive被多少個地方所引用，。。。
我們需要一個IDE，來幫助我們更好的看懂項目，管理代碼。WebStorm是目前我認為AngularJS開發最理想工具。
目錄
WebStorm介紹
導入javascript工程
安裝AngularJS插件
WebStorm使用
1. WebStorm介紹
WebStorm 是jetbrains公司旗下一款JavaScript 開發工具。被廣大中國JS開發者譽為「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaSscript IDE」等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。
WebStorm可能最大的缺點就是需要付費，對於個人開發者49刀。不過，WebStorm還推出了幾種免費的liences。
Classroom License:申請課堂演示
Open Source Project License:申請做為開源項目的貢獻者
MVP License: 申請微軟的專家
可以通過購買頁面找到信息
當然我是不會告訴大家，在google里可以找到過去版本的liences的，只是中國的程序員真是太苦逼了。
2. 導入Javascript工程
打開WebStorm後，我們可以通過操作：
"file"==>"open Directory..."==>"select Directory" ==> "ok"
來選擇我們已經構建好的工程。
webstorm1
WebStrom對Html5, javascript, css，json… 大部分的代碼都支持非常好。
webstorm2
3. 安裝AngularJS插件
不過，默認的WebStrom並不認識，AngularJS的指令，當我嘗試寫代碼ng-controller時，編輯器沒有出現對應該的提示。
<div ng
webstorm3
對於特別熟悉的AngularJS的人來說，並不是那麼重要。但是，如果有語法提示不是會更好嗎？
安裝AngularJS插件，兩種辦法：
在IDE中，自動下載自動安裝
手動下載，手動安裝
1). 在IDE中，自動下載自動安裝
我們需要以下的操作：
1. File->Settings->Plugins
2. 點擊 「Browse Repositories」
3. 選中 「AngularJS」 雙擊
4. 選擇 「Yes」
5. 重啟WebStorm
webstorm4
我在使用這個方法的時候失敗了
2). 手動下載，手動安裝
我們在jetbrains的插入庫中，找到AngularJS
下載angularjs-plugin.zip，然後解壓到D:\toolkit\WebStorm 6.0.1\plugins\目錄
~ D:\toolkit\WebStorm 6.0.1\plugins\angularjs-plugin
重啟WebStorm
再次輸入代碼：
<div ng-c
webstorm5
語法的提示，太帥氣了！！
我查了一下插件的開發者的代碼，支持全部的angularJS指令語法：
ng-app,ng-bind,ng-bind-html-unsafe,ng-bind-template,ng-class,ng-class-even,ng-class-odd,
ng-cloak,ng-controller,ng-form,ng-hide,ng-include,ng-init,ng-non-bindable,ng-pluralize,
ng-repeat,ng-show,ng-submit,ng-style,ng-switch,ng-switch-when,ng-switch-default,ng-options,
ng-view,ng-transclude,ng-model,ng-list,ng-change,ng-value,ng-required,required
4. WebStorm使用
1). 對於HTML的頁面：WebStorm會在右上角出現瀏覽器的圖標方便我們打開測試
webstorm6
2). 對Javascript腳本：WebStorm會方便的配置NodeJS啟動, UnitTest啟動 等等
webstorm7
IDE的功能很強大，熟悉後會極大地提升我們的開發效率的，特別是對於大規模的多人項目。

『貳』 前端工程師都有用哪些比較靠譜的小工具

作為曾經的web前端工程師，來答一發。

1. jsonView Chrome插件

   

   sessionBox是一塊可以讓你隨意切換你的session的Chrome插件~用戶還可以給不同的session設置各種顏色，方便地標識session；SessionBox只對那些把網頁的狀態保存到session中的才有效果。順便提供一下SessionBox的官網：https://sessionbox.io ；對於起那段同學來說，切換Sesssion幾乎成了必不可少的一項工作，如果你使用了sessionbox，將會大大的減輕你的工作量，同時這個插件對於後端開發的RD同學也將是大大的幫助。

目前介紹了以上四款工具，建議題主可以嘗試一下，都是非常不錯的工具，雖然我現在不在是前端，但是對於除了webstorm之外的三款工具我都是經常會使用的；至於我為什麼不使用webstorm是有原因的，因為我現在已經是作為一枚後端RD的存在，目前在公司開發機上只能用vim開發~~