webstorm入手筆記

weixin_34054866發表於2017-03-26
一、webstorm學習前小記

webstorm是一款現在前端用的比較多的IDE,其優勢也比較多,這個大家在網上隨便搜搜就可以找到了。但是本人大部分的時間都是使用sublime text工作,最近由於工作上面比較常出現一些粗心大意的問題,所以我的leader就建議我去學習一下webstorm,畢竟webstorm怎麼說也是IDE,跟文字編輯器有所不同的。

 

二、webstorm的破解與安裝

 我們可以直接從官網的下載地址中去下載最新版:http://www.jetbrains.com/webstorm/

 然後安裝完成之後選擇“license server",輸入:http://idea.imsxm.com/

 

三、webstorm的簡單配置

 由於webstorm預設的樣式比較的醜陋,而且背景色預設的是白色,這對於程式設計師來說是不太適合的(由於程式設計師長時間的使用電腦,所以不適合長時間的看背景色為白色,這樣對眼睛有害)。這個時候我們需要把背景顏色修改為深灰色,我們可以在

 File->Settings->Colors & Fonts 中去設定皮膚的主題,一般情況我們預設設定為Monnokai這種,如圖所示,我們已經設定成功了

設定完主題皮膚之後我們正常還要把預設字型大小給改一改,預設的是12號字型,一般情況下我們需要設定成為16號字型。一般字型為source code pro,這種字型看起來比較符合博主個人的體驗,但是如果你不喜歡的話,也可以根據你自己的愛好進行自定義

 

在使用的過程中發現webstorm除了是一款IDE之外,還是有很多地方有亮點的,但是缺點也是有的,就拿作者比較熟悉的sublime text來說,sublime text支援專案的獨立環境,但是在webstrom中是沒有這個功能的,所以也就只能夠相當於開啟資料夾的形式去重新開啟專案

好了,主題和字型等等都已經配置完成了,之後如果沒有什麼修改的話,我們一般就按照預設的配置去編寫程式碼就行了,如果是要對特定的某些語言進行特殊的修改的話。我們可以在File->Settings->Colors & Fonts->對應的語言,中去修改

 

四、實用快捷鍵

  Ctrl+Shift+A   這個主要是搜尋Settings中的各項配置中是否包含輸入的欄位,同時除了支援這個功能還能夠支援對一些框架的相關功能的狀態檢視,從而來開啟或者關閉某些功能。

 Ctrl+Shift+Alt+N 查詢方法名

 Ctrl+N 查詢類名(class)

 Ctrl+Shift+N 查詢檔名(File)

 Ctrl+Alt+L 格式化程式碼

 Shift+F6 全文替換變數

 

一般在實際的專案中依照我以前的事件經驗來說,對於程式設計比較熟悉來說,查詢檔案這一塊是十分總要的,但是像除錯之類的雖然說不上是雞肋,但是也是有一定的多餘,因為本身前端就是依託的是瀏覽器環境,瀏覽器環境可以通過chrome debug tool來進行除錯

 

五、模板定製

 上面已經提到了webstorm相比於其他的非IDE編輯器的同型別產品時,存在了很多優勢,其中包括模板定製,因為IDE可以將一些新的檔案模板儲存成為一種檔案型別,以節省開發的時間,提交開發效率

我們可以使用快捷鍵Ctrl+Shift+A然後在對話方塊中輸入File Template

 儲存之後,下次新增檔案的時候選擇CSS Demo就可以看到程式碼塊在初始化的時候就已經寫好了

 

六、除錯功能

 說到webstorm,除錯功能應該是大家最津津樂道的一個特殊功能吧,但是其實在瀏覽器很是發達的今天,這種除錯個人認為也沒有多大的意義了,瀏覽器能夠解決的問題,為啥非要使用IDE來解決呢,但是如果大家非要在webstorm中除錯,可以看看這篇文章:http://blog.csdn.net/sujun10/article/details/54139560

 

七、福利包

 為了方便大家的使用,在agileTheme大神原本搭建的基礎之上進行修改,成為了一個更加的適合程式設計師審美的皮膚,下載地址:http://files.cnblogs.com/files/st-leslie/setting.rar 

相關文章