JavaScript 開(kāi)發(fā)工具webstrom使用指南
看到網(wǎng)上一篇介紹webstrom的文章，覺(jué)得功能確實(shí)強(qiáng)大，也知道為什么阿里巴巴的前端傳到github上的文件為啥都有一個(gè) .idea 文件，（傳說(shuō)淘寶內(nèi)部推薦寫js用webstrom）
我們可以理解 IDE 就是集成了很多你想要的功能，或者你不想要的功能。換句話說(shuō)就是裝了很多插件的 editor ，所以到目前為止，我還覺(jué)得沒(méi)必要給它裝什么插件。
那么接下來(lái)開(kāi)始介紹webstrom的特色功能：
WebStorm 是 JetBrains 推出的一款商業(yè)的 JavaScript 開(kāi)發(fā)工具
任何一個(gè)編輯器都需要保存(ctrl + s)，這是所有win平臺(tái)上編輯類軟件的特點(diǎn)，但是webstorm編輯文件右上角是沒(méi)有那個(gè)熟悉的 * 的。
好處：省去了ctrl + s之后，在結(jié)合Firefox的vim，基本不動(dòng)鼠標(biāo)就可以看到結(jié)果頁(yè)面了。
壞處：沒(méi)有以前的 * 標(biāo)識(shí)，萬(wàn)一鍵盤誤操作也會(huì)被立即存儲(chǔ)。
任何一個(gè)編輯器只要文件關(guān)閉了就沒(méi)有歷史記錄了，但是webstorm有。 vcs->Local History -> Show History（快捷鍵：ALT+~ -〉7）
好處：只要webstorm不關(guān)閉，你的文件隨時(shí)可以返回到之前的操作（這也是為啥在 webstorm 里ctrl+y是刪除一行的原因了）。
壞處：webstorm關(guān)閉重啟后這些歷史記錄就沒(méi)有了；還有一個(gè)壞處就是由此帶來(lái)的內(nèi)存消耗也必然比較大。
任何一個(gè)編輯器，除了服務(wù)器svn之外，沒(méi)有本地版本，但是webstorm提供一個(gè)本地文件修改歷史記錄（快捷鍵：ALT+SHIFT+c）。也可以 Ctrl + E 彈出最近打開(kāi)的文件。
好處：相當(dāng)于本地svn。
壞處：內(nèi)存消耗也必然比較大。
集成了zencoding，html5，ftp，即時(shí)編輯（chrome）,自動(dòng)完成,基于Mozilla的JavaScript調(diào)試器，JSLint、Less支持、CoffeeScript支持、Node.JS、單元測(cè)試、集成git和svn版本控制等特性。
在編寫CSS中，會(huì)智能的提示各種文件以及圖片的路徑，就不用再去確認(rèn)這個(gè)文件是否存在了。
其他的特性就介紹了，想了解更多可以去webstrom官網(wǎng)繼續(xù)尋找?？赐炅诉@么介紹以及那么多給力的特性，是不是有種沖動(dòng)馬上試一試這款傳說(shuō)中的前端神器啊？嗯。
首先在官方下載頁(yè)下載webstrom后，點(diǎn)擊安裝，然后一直下一步，最后會(huì)出現(xiàn)需要注冊(cè)碼界面，因?yàn)閣ebstrom是商業(yè)的IDE，而天朝的屌絲前端當(dāng)然沒(méi)那么錢去買那么昂貴的神器了，不用擔(dān)心，我們可以用WebStorm的密鑰來(lái)學(xué)習(xí)使用這款前端神器。嘿嘿~~~~
安裝成功后，肯定會(huì)有些不適，就像我一樣覺(jué)得這配色真的太戳了。還有一些設(shè)置也不是我也要的。那么以下我就列出我習(xí)慣的設(shè)置。
webstorm安裝后的一些設(shè)置技巧：
如何更改主題（字體&配色）:
File -> settings -> Editor -> colors&fonts -> scheme name.主題下載地址
如何讓webstorm啟動(dòng)的時(shí)候不打開(kāi)工程文件：
File -> Settings->General去掉Reopen last project on startup.
如何完美顯示中文：
File -> Settings->Appearance中勾選Override default fonts by (not recommended)，設(shè)置Name:NSimSun，Size:12
如何顯示行號(hào)：
File -> Settings->Editor，”Show line numbers”打上勾，就顯示行號(hào)了
如何代碼自動(dòng)換行：
File -> settings -> Editor “Use Soft Wraps in editor” 打上鉤，代碼就自動(dòng)換行了
如何點(diǎn)擊光標(biāo)，顯示在本行末尾：
File -> Settings->Editor “Allow placement of caret after end of line”去掉勾就行了。
如何修改快鍵鍵：
File -> Settings->Keymap，然后雙擊要修改快捷的功能會(huì)有提示框出來(lái)，按提示操作
換成自己熟悉編輯器的快鍵鍵：
File ->Settings->Keymap，支持像Visual Studio、Eclipse、NetBeans這樣的主流IDE。
javascript類庫(kù)提示。
File -> settings -> Javascript -> Libraries -> 然后在列表里選擇自己經(jīng)常用到的javascript類庫(kù)，最后Download and Install就ok了.
在開(kāi)發(fā)js時(shí)發(fā)現(xiàn)，需要ctrl + return 才能選候選項(xiàng)：
File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” 改為 “Always”
js提示比較遲緩
File -> Code Completion -> Autopopup in 下 1000改為0
git配置：
File -> settings -> Editor -> github，進(jìn)去改github的賬戶，如果沒(méi)有g(shù)it則不需要.
插件安裝：
File ->plugins，然后就選擇給力的插件們?cè)侔惭b.(“css-X-fire”插件,用于當(dāng)使用firebug修改css屬性時(shí)，編輯器內(nèi)的css代碼也會(huì)發(fā)生變化。）
以后更新
webstorm使用心得
收藏夾功能:
當(dāng)工程目錄很龐大時(shí)，有些子目錄很經(jīng)常打開(kāi)，但層級(jí)又很深，這時(shí)候可以把目錄添加到收藏夾里面，添加成功后，左側(cè)有個(gè)“Favorites”菜單
面包屑導(dǎo)航：
除了左側(cè)的工程頁(yè)面，可以選擇目錄之外，在頂部菜單下有一個(gè)類似網(wǎng)站面包屑導(dǎo)航一樣的目錄也可以實(shí)現(xiàn)相同功。點(diǎn)擊每個(gè)目錄就會(huì)有下拉菜單顯示其下的子目錄，很實(shí)用.
構(gòu)造器界面:
注釋符合格式的話就會(huì)出現(xiàn)。如果是js文件則是js類的函數(shù)和對(duì)象；css文件的話則是這個(gè)css文件的概括；html文件的話則是節(jié)點(diǎn)的結(jié)構(gòu)圖。話說(shuō)這幾個(gè)就是為了方便查看代碼的結(jié)構(gòu)性.
todo界面：
給代碼加todo注釋就會(huì)出現(xiàn)這個(gè)界面
雙欄代碼界面：
右擊代碼選項(xiàng)卡上的文件，然后右鍵 -> spilt vertically(左右兩屏)或者spilt horizontally(上下兩屏)
本地歷史功能:
找回代碼的好辦法
git使用
webstorm中只集成了git的常用操作，并不能完全替代命令行工具。在界面的右下角可以查看處于哪個(gè)git分支。也可以在上面點(diǎn)擊切換或者新建分支。
查看當(dāng)前代碼與版本庫(kù)代碼的差異:
右擊代碼界面任意區(qū)域，選擇git -> compare with然后選擇要比較的版本庫(kù)。
webstorm的快捷鍵說(shuō)明：
Editing編輯相關(guān)快捷鍵
Ctrl + Space：
Basic code completion (the name of any class, method or variable) 基本代碼完成（任何類、函數(shù)或者變量名稱），改為Alt+S
Ctrl + Shift + Enter：
Complete statement 補(bǔ)全當(dāng)前語(yǔ)句
Ctrl + P：
Parameter info (within method call arguments) 參數(shù)信息 包括方法調(diào)用參數(shù)
Ctrl + mouse over code
Brief Info 簡(jiǎn)單信息
Ctrl + F1
Show description of error or warning at caret 顯示光標(biāo)所在位置的錯(cuò)誤信息或者警告信息
Alt + Insert
Generate code…（Getters, Setters, Constructors）新建一個(gè)文件或者生成代碼，…構(gòu)造函數(shù)，可以創(chuàng)建類里面任何字段的getter與setter方法
Ctrl + O
Override methods 重載方法
Ctrl + I
Implement methods 實(shí)現(xiàn)方法
Ctrl + Alt + T
Surround with…（if, else, try, catch, for, etc）用 * 來(lái)圍繞選中的代碼行，（ * 包括 if 、 while 、 try catch 等）
Ctrl + /
Comment/uncomment with line comment 行注釋/取消行注釋
Ctrl + Shift + /
Comment/uncomment with block comment 塊注釋/取消塊注釋
Ctrl + W
Select successively increasing code blocks 選擇代碼塊，一般是增量選擇
Ctrl + Shift + W
Decrease current selection to previous state 上個(gè)快捷鍵的回退，減量選擇代碼
Alt + Q
Context info 上下文信息
Alt + Enter
Show intention actions and quick-fixes 意圖行動(dòng)，快速見(jiàn)效
Ctrl + Alt + L
Reformat code 根據(jù)模板格式對(duì)代碼格式化
Tab/ Shift + Tab
Indent/unindent selected lines 對(duì)所選行進(jìn)行縮排處理/撤銷縮排處理
Ctrl + X or Shift + Delete
Cut current line or selected block to clipboard 剪切當(dāng)前行或所選代碼塊到剪切板
Ctrl + C or Ctrl + Insert
Copy current line or selected block to chipboard 拷貝當(dāng)前行或者所選代碼塊到剪切板
Ctrl + V or Shift + Insert
Paste from clipboard 粘貼剪切板上的內(nèi)容
Ctrl + Shift + V
Paste from recent buffers 粘貼緩沖器中最新的內(nèi)容
Ctrl + D
Duplicate current line or selected block 復(fù)制當(dāng)前行或者所選代碼塊
Ctrl + Y
Delete line at caret 刪除光標(biāo)所在位置行
Ctrl + Shift + J
Smart line join（HTML and JavaScript only）加入智能行 （HTML 和JavaScript）
Ctrl + Enter
Smart line split（HTML and JavaScript only）分離智能行 （HTML 和JavaScript）
Shift + Enter
Start new line 另起一行
Ctrl + Shift + U
Toggle case for word at caret or selected block 光標(biāo)所在位置大小寫轉(zhuǎn)換
Ctrl + Shift + ]/[
Select till code block end/start 選擇直到代碼塊結(jié)束/開(kāi)始
Ctrl + Delete
Delete to word end 刪除文字結(jié)束
Ctrl + Backspace
Delete to word start 刪除文字開(kāi)始
Ctrl + NumPad+/-
Expand/collapse code block 擴(kuò)展/縮減代碼塊
Ctrl + Shift+ NumPad+
Expand all 擴(kuò)張所有
Ctrl + Shift+ NumPad-
Collapse 縮減所有
Ctrl + F4
Close active editor tab 關(guān)閉活躍編輯標(biāo)簽
Search/replace搜索/替代相關(guān)快捷鍵
Ctrl + F
Find 當(dāng)前文件內(nèi)快速查找代碼
Ctrl + Shift + F
Find in path 指定文件內(nèi)尋找路徑
F3
Find next 查找下一個(gè)
Shift + F3
Find previous 查找上一個(gè)
Ctrl + R
Replace 當(dāng)前文件內(nèi)代碼替代
Ctrl + Shift + R
Replace in path 指定文件內(nèi)代碼批量替代
Usage Search搜索相關(guān)快捷鍵
Alt + F7/Ctrl + F7
Find usages/Find usages in file 找到使用/在文件找到使用
Ctrl + Shift + F7
Highlight usages in file文件中精彩使用
Ctrl + Alt + F7
Show usages 顯示使用
Running運(yùn)行
Alt + Shift + F10
Select configuration and run 選擇構(gòu)架，運(yùn)行
Alt + Shift + F9
Select configuration and debug 選擇構(gòu)架，修補(bǔ)漏洞
Shift + F10
Run 運(yùn)行
Shift + F9
Debug 修補(bǔ)漏洞
Ctrl + Shift + F10
Run context configuration from editor 從編輯運(yùn)行內(nèi)容構(gòu)架
Ctrl + Shift + X
Run command line 運(yùn)行命令行
Debugging Debugging相關(guān)快捷鍵
F8
Step over 不進(jìn)入函數(shù)
F7
Step into 單步執(zhí)行
Shift + F7
Smart step into 智能單步執(zhí)行
Shift + F8
Step out 跳出
Alt + F9
Run to cursor 運(yùn)行到光標(biāo)處
Alt+ F8
Evaluate expression 評(píng)估表達(dá)
F9
Resume program 重新開(kāi)始程序
Ctrl + F8
Toggle breakpoint 切換斷點(diǎn)
Ctrl + Shift + F8
View breakpoints 查看斷點(diǎn)
Navigation 定位相關(guān)快捷鍵
Ctrl + N
Go to class跳轉(zhuǎn)到指定類
Ctrl + Shift + N
Go to file 通過(guò)文件名快速查找工程內(nèi)的文件
Ctrl + Alt +Shift + N
Go to symbol 通過(guò)一個(gè)字符查找函數(shù)位置
Alt + Right/ left
Go to next/ previous editor tab 進(jìn)入下一個(gè)/ 上一個(gè)編輯器選項(xiàng)
F12
Go back to previous tool window 進(jìn)入上一個(gè)工具窗口
Esc
Go to editor（from tool window） 從工具窗口進(jìn)入編輯器
Shift + Esc
Hide active or last active window 隱藏活動(dòng)窗口
Ctrl + Shift + F4
Close active run/message/find/…tab 關(guān)閉活動(dòng)….標(biāo)簽
Ctrl + G
Go to line 跳轉(zhuǎn)到第幾行
Ctrl + E
Recent files popup 彈出最近打開(kāi)的文件
Ctrl + Alt + Left/Right
Navigate back/forward 導(dǎo)航前進(jìn)/后退
Ctrl + Shift + Backspace
Navigate to last edit location 向最近編輯定位導(dǎo)航
Alt + F1
Select current file or symbol in any view 查找當(dāng)前選中的代碼或文件在其他界面模塊的位置
Ctrl + B or Ctrl + Click
Go to declaration跳轉(zhuǎn)到定義處
Ctrl + Alt + B
Go to implementation(s) 跳轉(zhuǎn)方法實(shí)現(xiàn)處
Ctrl + Shift + B
Go to type declaration 跳轉(zhuǎn)方法定義處
Ctrl + Shift + I
Open quick definition lookup 打開(kāi)定義快速查找
Ctrl + U
Go to super-method/super-class 跳轉(zhuǎn)方法/超階級(jí)
Alt + Up/Down
Go to previous/next method 在方法間快速移動(dòng)定位
Ctrl + ]/[
Move to code block end/start 跳轉(zhuǎn)到編碼塊結(jié)束/開(kāi)始
Ctrl + F12
File structure popup 文件結(jié)構(gòu)彈出
Ctrl + H
Type hierarchy 類型層次
Ctrl + Alt + H
Call hierarchy 調(diào)用層次結(jié)構(gòu)
F2/ Shift + F2
Next/previous highlighted error 跳轉(zhuǎn)到后一個(gè)/前一個(gè)錯(cuò)誤，高亮錯(cuò)誤或警告快速定位，使用這個(gè)快捷鍵可以快捷在出錯(cuò)的語(yǔ)句之間進(jìn)行跳轉(zhuǎn)。
F4/Ctrl + Enter
Edit source/ View source 編輯源代碼/查看源代碼
Alt + Home
Show navigation bar 顯示導(dǎo)航欄
F11
Toggle bookmark 切換標(biāo)記
Ctrl + F11
Toggle bookmark with mnemonic 采用記憶切換標(biāo)記
Ctrl + #[0-9]
Go to numbered bookmark 跳轉(zhuǎn)到帶編號(hào)的標(biāo)記
Shift + F11
Show bookmark 顯示標(biāo)記
Refactoring 重構(gòu)相關(guān)快捷鍵
F5
Copy 拷貝
F6
Move 移動(dòng)
Alt + Delete
Safe Delete 安全刪除
Shift + F6
Rename 重新命名
Ctrl + Alt + N
Inline Variable 嵌入變量
Ctrl + Alt + M
Extract Method( Javascript only) 提取函數(shù)
Ctrl + Alt + V
Introduce Variable 引入變量
Ctrl + Alt + F
Introduce Field 引入域
Ctrl + Alt + C
Introduce Constant 引入常量
VCS/Local History 版本控制系統(tǒng)/ 本地歷史相關(guān)快捷鍵
Alt + BackQuote( )
‘VCS'quick popup 快速?gòu)棾?VCS
Ctrl + K
Commit project to VCS 提交項(xiàng)目至VCS
Ctrl + T
Update project from VCS 從VCS 更新項(xiàng)目
Alt + Shift + C
View recent changes 查看最新改變
General 常用的相關(guān)快捷鍵
Ctrl + Shift +A
Find action 查找并調(diào)用編輯器的功能
Alt + #[0-9]
Open corresponding tool window 快速切換打開(kāi)界面模塊
Ctrl + Alt + F11
Toggle full screen mode 切換全屏模式
Ctrl + Shift + F12
Toggle maximizing editor 切換最大化編輯器
Alt + Shift + F
Add to Favorites 將當(dāng)前文件添至收藏夾
Alt + Shift + I
Inspect current file with current profile 使用當(dāng)前屬性檢查當(dāng)前文件
Ctrl + BackQuote( )
Quick switch current scheme 快速轉(zhuǎn)換現(xiàn)有組合
Ctrl + Alt + S
Open setting dialog 打開(kāi)設(shè)置對(duì)話框
Ctrl + Tab
Switch between tabs and tool window 標(biāo)簽和工具窗的轉(zhuǎn)換（與windows快捷鍵沖突）
小伙伴們是不是已經(jīng)對(duì)這款javascript的開(kāi)發(fā)工具webstrom有所認(rèn)識(shí)了呢，迫不及待的想去試試呢，保證你用了之后就愛(ài)不釋手。
相關(guān)文章
JavaScript中的二進(jìn)制數(shù)據(jù)處理方法詳解
Blob、ArrayBuffer和Buffer是JavaScript中用于表示和操作二進(jìn)制數(shù)據(jù)的三種主要方式，本文將深入探討這些概念，以及它們?nèi)绾卧贘avaScript中使用，需要的可以參考一下2023-06-06
Selenium執(zhí)行Javascript腳本參數(shù)及返回值過(guò)程詳解
這篇文章主要介紹了Selenium執(zhí)行Javascript腳本參數(shù)及返回值過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
js中如何對(duì)json數(shù)組進(jìn)行排序
這篇文章主要介紹了js中如何對(duì)json數(shù)組進(jìn)行排序的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
JavaScript requestAnimationFrame動(dòng)畫(huà)詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript requestAnimationFrame動(dòng)畫(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
chorme 瀏覽器記住密碼后input黃色背景處理方法(兩種)
使用chrome瀏覽器選擇記住密碼的賬號(hào)，輸入框會(huì)自動(dòng)加上黃色的背景，有些設(shè)計(jì)輸入框是透明背景的，需要去除掉這個(gè)黃色的背景。下面給大家分享chorme 瀏覽器記住密碼后input黃色背景處理方法，一起看看吧2017-11-11
在瀏覽器中對(duì)于Dom的操作和普通的腳本的操作處于兩個(gè)不同的dll中，兩個(gè)dll的交互是比較耗時(shí)的，優(yōu)化對(duì)Dom的操作可以提高腳本的執(zhí)行速度。本文是對(duì)如何優(yōu)化的一些總結(jié)。下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)彈幕墻效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了深入淺出es6模板字符串,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法,簡(jiǎn)單講述了image組件的常用屬性,并結(jié)合實(shí)例形式分析了微信小程序?qū)崿F(xiàn)圖片自適應(yīng)寬度比例的相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
js從數(shù)組中刪除指定值(不是指定位置)的元素實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇js從數(shù)組中刪除指定值(不是指定位置)的元素實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09