2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

?

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

換句話說(shuō)，所有的操作都直接存儲(chǔ)，這樣帶來(lái)的壞處就是，沒(méi)有以前的米號(hào)標(biāo)識(shí)，萬(wàn)一鍵盤誤操作也會(huì)被立即存儲(chǔ)。

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

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

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

5. 提供的插件也是比較齊全，安裝非常方便。這樣帶來(lái)了另外的問(wèn)題，以前的eclipse是安裝第三方的，webstorm貌似不能安裝第三方的插件。

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

?

其它的使用：

1. 主題，參照這里。（所需的文件下載 第4條中setting.rar即可，里邊包括文章中提到的顏色配置文件）

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

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

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

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è)沒(méi)有什么特別的，但是如果要添加一個(gè)需要在下面需要類型：No applicable contexts yet. Define ，單擊Define選擇要添加的類型。

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

如果你對(duì)我修改后的文件設(shè)置感興趣請(qǐng)點(diǎn)這里下載。 (其中就是從我的webstorm導(dǎo)出的setting.jar文件，包括主題，快捷鍵，zencoding.css等)

一次性導(dǎo)入：

導(dǎo)入：File -> Import settings... 下載后單獨(dú)模塊配置目錄：win7 -> C:\Users\jikey(用戶名)\.WebIde10\config

也可以一次性導(dǎo)出settings : File -> Export sttings...

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的快捷鍵說(shuō)明：

1.?ctrl?+?shift?+?n:?打開工程中的文件(類似于eclipse中的ctrl+shift+R)，目的是打開當(dāng)前工程下任意目錄的文件。
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: 剪切(刪除)行，不選中，直接剪切整個(gè)行，如果選中部分內(nèi)容則剪切選中的內(nèi)容
8.?alt?+?left/right:標(biāo)簽切換
9.?ctrl?+?r:?替換
10.?ctrl?+?shift?+?up:?行移動(dòng)
11.?shift?+?alt?+?up:?塊移動(dòng)(if(){},while(){}語(yǔ)句塊的移動(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ì)信息(想象一下，如果在jquery的方法上查看詳細(xì)信息，就直接可以看到實(shí)現(xiàn)代碼了)，如果是php，那當(dāng)時(shí)還是function的詳細(xì)信息

?

17. ctrl + '-/+': 可以折疊項(xiàng)目中的任何代碼塊，包括htm中的任意nodetype=3的元素，function,或?qū)ο笾苯恿康鹊取Ｋ皇沁x中折疊，而是自動(dòng)識(shí)別折疊。 18. ctrl + '.': 折疊選中的代碼的代碼。 19. shift + esc: 當(dāng)前激活的任意小窗口最小化，也可以是alt + '數(shù)字鍵'，數(shù)字在小窗口標(biāo)題欄上有顯示。 20. alt + '7': 顯示當(dāng)前的函數(shù)結(jié)構(gòu)。類似于eclipse中的outline的效果。試驗(yàn)了一下，要比aptana的給力一些，但還是不能完全顯示prototype下面的方法名。 21. 如果是*.html頁(yè)面，則在文件名下的導(dǎo)航欄某DOM結(jié)構(gòu)上右鍵，可以全選當(dāng)前DOM結(jié)構(gòu)。

22. 項(xiàng)目中添加對(duì)jQuery的支持。

File -> settings -> Javascript Libraries -> Add

在files中添加路徑，在documentations urls中添加文檔支持。這里邊需要注意一下的是，要添加原始未壓縮的代碼，*.min.js版的方法是不會(huì)被提示。

添加完成后，右邊菜單中還有一 download 按鈕，單擊之后，他會(huì)自動(dòng)選擇最新版的js庫(kù)進(jìn)行搜索，然后在彈出的列表中，再單擊選擇一個(gè)后，點(diǎn)擊Download and Install之后，才會(huì)被下載。這塊體驗(yàn)不是太好，沒(méi)有checkbox,也沒(méi)有radio，只是選中后整行變暗。?

如果添加多個(gè)版本的jQuery，就可以直觀的看到各個(gè)版本之間新方法的差別了。

* 在這項(xiàng)的子菜單中 Usage Scope 右邊 Project 第二欄Library下單擊，選擇新添加的jQuery，使其對(duì)整個(gè)項(xiàng)目進(jìn)行覆蓋。

也可以在當(dāng)前頁(yè)面右鍵Use JavaScript Library 中選擇最頂?shù)膭偺砑拥膉Query支持。?

?

當(dāng)然，并不是添加的越多越好，添加的多之后，在代碼提示后會(huì)有數(shù)毫秒的延遲，需要謹(jǐn)慎選擇最新版。?

23. 自動(dòng)換行設(shè)置：　File | Settings | Editor --> Use soft wraps in editor

以下是jquery1.1在ws中效果，還有底下顯示vim啟動(dòng)運(yùn)行的提示，左側(cè)顯示數(shù)字標(biāo)題欄名稱。

?

?

以下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：包括括號(hào)和()內(nèi)的區(qū)域。
????5.aB：包括括號(hào)和{}內(nèi)的區(qū)域。
????6.ib：括號(hào)()內(nèi)的區(qū)域。
????7.iB：括號(hào){}內(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'：修改配對(duì)標(biāo)點(diǎn)符號(hào)中的文本內(nèi)容。
????????di'：刪除配對(duì)標(biāo)點(diǎn)符號(hào)中的文本內(nèi)容。
????????yi'：復(fù)制配對(duì)標(biāo)點(diǎn)符號(hào)中的文本內(nèi)容。
????????vi'：選中配對(duì)標(biāo)點(diǎn)符號(hào)中的文本內(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)前頁(yè)向后查找同一字。
????????#:?在當(dāng)前頁(yè)向前查找同一字。
????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來(lái)結(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行下。

這樣幾番配置認(rèn)識(shí)：

1. 在javascript方面比aptana更接近于當(dāng)前的流行開發(fā)趨勢(shì)。

2. 在html,css上比dreamweaver更大膽，更有洞察力。

3. 在php上比zendstudio更帶有一點(diǎn)英雄主義色彩。

4. 在java上，此公司提供另外一款工具：IntelliJ IDEA

可以看出純英文的界面，多如牛毛的快捷鍵，不推薦新手使用。太方便就會(huì)容易培養(yǎng)惰性，而惰性是開發(fā)人員的大敵。

?

最后感謝火爺，是火爺教會(huì)我使用webstorm。火爺一直是走在技術(shù)前沿的pyer.

轉(zhuǎn)載于:https://my.oschina.net/willSoft/blog/87871

總結(jié)

以上是生活随笔為你收集整理的前端开发利器webStorm 3.0配置使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。