當(dāng)前位置: 首頁編程開發(fā) → 前端開發(fā)利器webStorm 3.0配置使用

前端開發(fā)利器webStorm 3.0配置使用

更多

 

合適的工具會(huì)事半功倍,當(dāng)然也得把握分寸,要不就成了會(huì)得越多干的越多的“苦力者”。
編輯類軟件層出不群,各有所長,各有所短。找到一個(gè)合適的還真是難。還好有webstorm的出現(xiàn),最近又是3.0的新版本發(fā)布。為什么這么說呢,她與其它的編輯器有什么不同:
1. 任何一個(gè)編輯器都需要保存(ctrl + s),這是所有win平臺上編輯類軟件的特點(diǎn),但是webstorm編輯文件右上角是沒有那個(gè)熟悉的米號的。

換句話說,所有的操作都直接存儲(chǔ),這樣帶來的壞處就是,沒有以前的米號標(biāo)識,萬一鍵盤誤操作也會(huì)被立即存儲(chǔ)。

省去了ctrl + s之后,在結(jié)合Firefox的vim,基本不動(dòng)鼠標(biāo)就可以看到結(jié)果頁面了。

2. 任何一個(gè)編輯器只要文件關(guān)閉了就沒有歷史記錄了,但是webstorm有。就是說,只要webstorm不關(guān)閉,你的文件隨時(shí)可以返回到之前的操作,webstorm關(guān)閉重啟后這些歷史記錄就沒有了。這樣的壞處也是顯然的,由此帶來的內(nèi)存消耗也必然比較大。
3. 任何一個(gè)編輯器,除了服務(wù)器svn之外,沒有本地版本,但是webstorm提供一個(gè)本地文件修改歷史記錄。

4. 與時(shí)俱進(jìn)的眼光。zencoding于2009年出現(xiàn)于it界,在這之后,鮮有工具直接集成到里邊。webstorm 2.0之后就集成了。node.js,html5,git,cvs等 就不一一列舉了。

5. 提供的插件也是比較齊全,安裝非常方便。這樣帶來了另外的問題,以前的eclipse是安裝第三方的,webstorm貌似不能安裝第三方的插件。

6. 可以導(dǎo)出當(dāng)前設(shè)置:File -> Export setting 下面就是導(dǎo)入設(shè)置。

 

其它的使用:

1. 主題,參照這里

2. 添加VIM插件:
File -> Settings -> Plugins -> Browse repositories -> 搜索vim,對它單擊右鍵Download and install,然后重啟IDE就可以了。
重啟之后,控制臺會(huì)輸出: “8:50:07 IdeaVim: Vim keymap was successfully enabled” 說明vim插件安裝成功。另外在aptana2.0里邊安裝vim插件,真是頭痛,所有的文件都支持vim模式,在.html居然不支持,郁悶。

這樣會(huì)出現(xiàn)另外一個(gè)問題,我如果想用ctrl+c,ctrl+v等一些默認(rèn)的快捷鍵,該如何呢?安裝VIM之后修改Defualt ,在Main menu -> Edit -> Copy 單擊右鍵 Remove ctrl + Insert 只會(huì)剩下一個(gè)ctrl + c。這樣配置后,可以使用部分默認(rèn)的快捷鍵,90%的VIM快捷鍵。這之后還有個(gè)問題需要注意,在webstorm重啟之后,又被全局默認(rèn)為vim快捷鍵,需要在File -> Setting -> Keymap -> Keymaps 中選擇Default copy,要不然,還是全局的VIM快捷鍵。

3. 除了webstorm之外,此公司還提供另外一個(gè)針對phper的開發(fā)工具,phpStorm,主頁上說明,phpstorm包括所有webstorm的功能。但是習(xí)慣于大括號去方法名在同一行顯示,所以還得配置:

File -> Settings -> code style -> PHP -> Wrapping and Braces -> Braces placement ->

In method declaration : End of line.

4. zencoding由于其提供的快捷鍵,確實(shí) zencoding快捷鍵修改:

File -> Setting -> Live Templates

這里邊如果你修改一個(gè)沒有什么特別的,但是如果要添加一個(gè)需要在下面需要類型:No applicable contexts yet. Define ,單擊Define選擇要添加的類型。

如何合理的修改,參考這里。

如果你對我修改后的文件感興趣請點(diǎn)這里下載

下載后放置目錄:win7 -> C:\Users\jikey(用戶名)\.WebIde10\config\templates
5. 在開發(fā)js時(shí)發(fā)現(xiàn),需要ctrl + return 才能選候選項(xiàng),又需要配置:

 

File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion:

'Smart' 改為 Always

6. 注意的地方是:Webstorm的調(diào)試是不支持中文路徑中文文件名。

以下是webstorm的快捷鍵說明:

1. ctrl + shift + n: 打開工程中的文件
2. ctrl + j: 輸出模板
3. ctrl + b: 跳到變量申明處
4. ctrl + alt + T: 圍繞包裹代碼(包括zencoding的Wrap with Abbreviation)
5. ctrl + []: 匹配 {}[]
6. ctrl + F12: 可以顯示當(dāng)前文件的結(jié)構(gòu) 
7. ctrl + x: 剪切(刪除)行
8. alt + left/right:標(biāo)簽切換
9. ctrl + r: 替換
10. ctrl + shift + up: 行移動(dòng)
11. shift + alt + up: 塊移動(dòng)
12. ctrl + d: 行復(fù)制
13. ctrl + shift + ]/[: 選中塊代碼<table>....</table>
14. ctrl + / : 單行注釋
15. ctrl + shift + / : 塊注釋
16. ctrl + shift + i : 如果是css中的class則顯示當(dāng)前class詳細(xì)信息,如果是js則顯示function的詳細(xì)信息

以下vim常用快捷鍵:

一. 移動(dòng):
    h,j,k,l: 左,下,上,右。
    w: 下一個(gè)詞的詞首。W:下一個(gè)單詞(不含標(biāo)點(diǎn))。
    e:下一個(gè)詞的詞尾。E:不含標(biāo)點(diǎn)。
    b:上一個(gè)詞的詞首。B:不含標(biāo)點(diǎn)。
    <>: v 模式選中后進(jìn)行縮進(jìn)。
二. 跳轉(zhuǎn):
    %: 可以匹配{},"",(),[]之間跳轉(zhuǎn)。
    H、M、L:直接跳轉(zhuǎn)到當(dāng)前屏幕的頂部、中部、底部。
    #H:跳轉(zhuǎn)到當(dāng)前屏的第#行。
    #L:跳轉(zhuǎn)到當(dāng)前屏的倒數(shù)第#行。
    zt: 當(dāng)前編輯行置為屏頂。
    zz: 當(dāng)前編輯行置為屏中。
    zb: 當(dāng)前編輯行置為屏底。
    G:直接跳轉(zhuǎn)到文件的底部。
    gg: 跳轉(zhuǎn)到文件首。
    gd: 跳轉(zhuǎn)到光標(biāo)所在函數(shù)和變量的定義。
    ():跳轉(zhuǎn)到當(dāng)前的行首、行尾。
    {}:向上、向下跳轉(zhuǎn)到最近的空行。
    [{:跳轉(zhuǎn)到目前區(qū)塊開頭。
    ]}:跳轉(zhuǎn)到目前區(qū)塊結(jié)尾。
    0: 跳轉(zhuǎn)到行首。
    $: 跳轉(zhuǎn)到行尾。
    2$: 跳轉(zhuǎn)到下一行的行尾。
    #:跳轉(zhuǎn)到該行的第#個(gè)位置。
    #G: 15G,跳轉(zhuǎn)到15行。
    :#:跳轉(zhuǎn)到#行。
三. 選擇:
    1.v: 開啟可視模式。 V: 開啟逐行可視模式。
    2.^V: 矩形選擇。
    3.v3w: 選擇三個(gè)字符。 
    4.ab:包括括號和()內(nèi)的區(qū)域。
    5.aB:包括括號和{}內(nèi)的區(qū)域。
    6.ib:括號()內(nèi)的區(qū)域。
    7.iB:括號{}內(nèi)的區(qū)域。
    8.aw:標(biāo)記一個(gè)單詞。
四. 編輯:
    1. 新增:
        i: 光標(biāo)前插入。
        I: 在當(dāng)前行首插入。
        a: 光標(biāo)后插入。
        A: 當(dāng)前行尾插入。
        O: 在當(dāng)前行之前插入新行。
        o: 在當(dāng)前行之后插入新行。
    2. 修改 c(change) 為主:
        r: 替換光標(biāo)所在處的字符。
        R:替換光標(biāo)所到之處的字符。
        cw: 更改光標(biāo)所在處的字到字尾處。
        c#w: c3w 修改3個(gè)字符。
        C:修改到行尾。
        ci':修改配對標(biāo)點(diǎn)符號中的文本內(nèi)容。
        di':刪除配對標(biāo)點(diǎn)符號中的文本內(nèi)容。
        yi':復(fù)制配對標(biāo)點(diǎn)符號中的文本內(nèi)容。
        vi':選中配對標(biāo)點(diǎn)符號中的文本內(nèi)容。
        s:替換當(dāng)前一個(gè)光標(biāo)所處字符。
        #S:刪除 # 行,并以新文本代替。
    3. 刪除 d(delete) 為主:
        D:刪除到行尾。
        X: 每按一次,刪除光標(biāo)所在位置的前面一個(gè)字符。
        x: 每按一次,刪除光標(biāo)所在位置的后面一個(gè)字符。
        #x: 刪除光標(biāo)所在位置后面6個(gè)字符。
        d^: 刪至行首。
        d$: 刪至行尾。
        dd:(剪切)刪除光標(biāo)所在行。        
        dw: 刪除一個(gè)單詞/光標(biāo)之后的單詞剩余部分。
        d4w: 刪除4個(gè)word。
        #dd: 從光標(biāo)所在行開始刪除#行。
        daB: 刪除{}及其內(nèi)的內(nèi)容。
        diB: 刪除{}中的內(nèi)容。
        n1,n2 d:將n1,n2行之間的內(nèi)容刪除。
    4. 查找:
        /: 輸入關(guān)鍵字,發(fā)現(xiàn)不是要找的,直接在按n,向后查找直到找到為止。
        ?: 輸入關(guān)鍵字,發(fā)現(xiàn)不是要找的,直接在按n,向前查找直到找到為止。
        *: 在當(dāng)前頁向后查找同一字。
        #: 在當(dāng)前頁向前查找同一字。
    5. 復(fù)制 y(yank)為主:
        yw: 將光標(biāo)所在之處到字尾的字符復(fù)制到緩沖區(qū)中。
        #yw: 復(fù)制#個(gè)字到緩沖區(qū)。
        Y:相當(dāng)于yy, 復(fù)制整行。
        #yy:表示復(fù)制從光標(biāo)所在的該行往下數(shù)#行文字。
        p: 粘貼。所有與y相關(guān)的操作必用p來結(jié)合粘貼。
        ]p:粘貼到合適的縮進(jìn)處。
        n1,n2 co n3:復(fù)制第n1行到第n2行之間的內(nèi)容到第n3行后面。
    6. 大小寫轉(zhuǎn)換:
        gUU: 將當(dāng)前行的字母改為大寫。
        guu: 將當(dāng)前行的字母改為小寫。
        gUw: 將當(dāng)前光標(biāo)下的單詞改為大寫。
        guw: 將當(dāng)前光標(biāo)下的單詞改為小寫。
        a. 整篇大寫:
        ggguG
        gg: 光標(biāo)到文件第一個(gè)字符。
        gu: 把選擇范圍全部小寫。
        G: 到文件結(jié)束。
        b. 整篇小寫:gggUG
    7.  其它:
        J:當(dāng)前行和下一行合并成一行。
    8.  移動(dòng):
        n1,n2 m n3:將n1行到n2行之間的內(nèi)容移至n3行下。

最后感謝火爺,是火爺教會(huì)我使用webstorm;馉斠恢笔亲咴诩夹g(shù)前沿的pyer.

熱門評論
最新評論
發(fā)表評論 查看所有評論(0)
昵稱:
表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
字?jǐn)?shù): 0/500 (您的評論需要經(jīng)過審核才能顯示)