當前位置:網名谷>計算機網絡>軟件技術>

Webstorm怎麼使用 Webstorm使用教程介紹

軟件技術 閲讀(9.16K)

webstorm是一款前端javascript開發編輯的神器,專門為javascript開發做了很多優化,令前端工程師眼前一亮。那麼第一次接觸Webstorm的用户會問Webstorm應該怎麼使用呢?今天就為大家介紹一下Webstorm的相關使用教程介紹,希望大家喜歡。

Webstorm怎麼使用 Webstorm使用教程介紹

使用教程介紹:

任何一個編輯器都需要保存(ctrl + s),這是所有win平台上編輯類軟件的特點,但是webstorm編輯文件右上角是沒有那個熟悉的 * 的。
好處:省去了ctrl + s之後,在結合Firefox的vim,基本不動鼠標就可以看到結果頁面了。 
壞處:沒有以前的 * 標識,萬一鍵盤誤操作也會被立即存儲。

任何一個編輯器只要文件關閉了就沒有歷史記錄了,但是webstorm有。 vcs->Local History -> Show History(快捷鍵:ALT+~ -〉7)
好處:只要webstorm不關閉,你的文件隨時可以返回到之前的操作(這也是為啥在 webstorm 裏ctrl+y是刪除一行的原因了)。
壞處:webstorm關閉重啟後這些歷史記錄就沒有了;還有一個壞處就是由此帶來的內存消耗也必然比較大。

任何一個編輯器,除了服務器svn之外,沒有本地版本,但是webstorm提供一個本地文件修改歷史記錄(快捷鍵:ALT+SHIFT+c,Mac中 ALT+Option+c)。也可以 Ctrl + E 彈出最近打開的文件。
好處:相當於本地svn。 
壞處:內存消耗也必然比較大。

集成了zencoding,HTML5,ftp,即時編輯(chrome),自動完成,基於Mozilla的JavaScript調試器,JSLint、Less支持、CoffeeScript支持、、單元測試、集成Git和svn版本控制等特性。

在編寫CSS中,會智能的提示各種文件以及圖片的路徑,就不用再去確認這個文件是否存在了。

其他的特性就介紹了,想了解更多可以去webstrom官網繼續尋找。看完了這麼介紹以及那麼多給力的特性,是不是有種衝動馬上試一試這款傳説中的前端神器啊?嗯。

首先在官方下載頁下載webstrom後,點擊安裝,然後一直下一步,最後會出現需要註冊碼界面,因為webstrom是商業的IDE,而天朝的屌絲前端當然沒那麼錢去買那麼昂貴的神器了,不用擔心,我們可以用WebStorm的密鑰來學習使用這款前端神器。嘿嘿~~~~

安裝成功後,肯定會有些不適,就像我一樣覺得這配色真的太戳了。還有一些設置也不是我也要的。那麼以下我就列出我習慣的設置。

webstorm設置技巧:

如何更改主題(字體&配色):
File -> settings -> Editor -> colors&fonts -> scheme name.主題下載地址

如何讓webstorm啟動的時候不打開工程文件
File -> Settings->General去掉Reopen last project on startup.

如何完美顯示中文:
File -> Settings->Appearance中勾選Override default fonts by (not recommended),設置Name:NSimSun,Size:12

如何顯示行號:
File -> Settings->Editor,”Show line numbers”打上勾,就顯示行號了

如何代碼自動換行:
File -> settings -> Editor “Use Soft Wraps in editor” 打上鈎,代碼就自動換行了

如何點擊光標,顯示在本行末尾:
File -> Settings->Editor “Allow placement of caret after end of line”去掉勾就行了。

如何修改快鍵鍵:
File -> Settings->Keymap,然後雙擊要修改快捷的功能會有提示框出來,按提示操作

換成自己熟悉編輯器的快鍵鍵:
File ->Settings->Keymap,支持像Visual Studio、Eclipse、NetBeans這樣的主流IDE。

javascript類庫提示。 
File -> settings -> Javascript -> Libraries -> 然後在列表裏選擇自己經常用到的javascript類庫,最後Download and Install就ok了.

在開發js時發現,需要ctrl + return 才能選候選項: 
File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” 改為 “Always”

js提示比較遲緩
File -> Code Completion -> Autopopup in 下 1000改為0

Git配置:
File -> settings -> Editor -> github,進去改github的賬户,如果沒有git則不需要.

插件安裝:
File ->plugins,然後就選擇給力的插件們再安裝.(“css-X-fire”插件,用於當使用firebug修改css屬性時,編輯器內的css代碼也會發生變化。)

以後更新

webstorm使用心得

收藏夾功能:
當工程目錄很龐大時,有些子目錄很經常打開,但層級又很深,這時候可以把目錄添加到收藏夾裏面,添加成功後,左側有個“Favorites”菜單

麪包屑導航:
除了左側的工程頁面,可以選擇目錄之外,在頂部菜單下有一個類似網站麪包屑導航一樣的目錄也可以實現相同功。點擊每個目錄就會有下拉菜單顯示其下的子目錄,很實用.

構造器界面:
註釋符合格式的話就會出現。如果是js文件則是js類的函數和對象;css文件的話則是這個css文件的概括;html文件的話則是節點的結構圖。話説這幾個就是為了方便查看代碼的結構性.

todo界面:
給代碼加todo註釋就會出現這個界面

雙欄代碼界面:
右擊代碼選項卡上的文件,然後右鍵 -> spilt vertically(左右兩屏)或者spilt horizontally(上下兩屏)

本地歷史功能:
找回代碼的好辦法