webStorm 開發技巧

插件合集

1. IDEA Mind Map 思惟導圖
2. Atom Material Icons 圖標
3. Indent RainBow 彩虹空格
4. Material Theme UI 主題
5. Rainbow Brackets 括號
6. Random Background 隨機背景
7. Nyan Progress Bar 彩虹進度條
8. Randomness 隨機數據
9. Quick File Preview 快速文件預覽
10. Codota AI 完成代碼
11. Key Promoter X 快捷鍵提醒(能夠用於快捷鍵學習)

https://www.jetbrains.com/webstorm/guide/technologies

ctrl+Alt + ->/ <-

記錄鼠標的停留位置 箭頭左是從前, 箭頭右是如今

好比你在上面寫的htm,在下面寫css/js的時候忽然忘記類名,能夠ctrl+alt+ 箭頭左 直接看看前面寫的,而後 ctrl+alt+箭頭右回來

ctrl+shift +Delete

上次編輯的位置

ctrl+K

提交到緩存區

F6

代碼重構

...
function loader() {
    return 1
}
...

鼠標放在函數名上按下F6

能夠把這個函數移到新的路徑裏

.if

let a=1;
a.if  快捷方式相似於 .log

粘貼歷史記錄

let a=1;
let b=2;
let c=3;

ctrl+c 把a,b,c 三個進行復制

ctrl+shift+v 能夠進行歷史粘貼

自定義變量配色

代碼智能提示排序

按照機器學習對完成的建議進行排序

Ctrl + alt + O清除全部未使用的導入

最近打開的文件Ctrl+E 快捷鍵

分支對比

點擊單個文件右鍵, 選中對比的分支進行對比

分支合併

快速建立新文件/文件夾

Alt+1 打開左邊導航 Alt+Ins

alt+enter 能夠進行數學運算

Alt + enter 字符串注入(環境語法參考)

ctrl+Tab

切換上次打開的文件

Indent Rainbow

空格顏色插件(縮進彩虹)

簡潔的箭頭功能(刪除多餘括號)

放在變量num上alt+enter

IDEA Mind Map

.mmd 格式, 相似於腦圖

idea 本地歷史記錄

文件或者文件夾右鍵

能夠把須要導入在html的js,直接拖拽就能夠導入

# 正則測試

alt+enter

ctrl+shift+alt+T

選中須要的，不選中也行，按下ctrl+shift+alt+T, 搜索Type

快速添加文件

輸入lorem並按下Tab 鍵

給p標籤隨機添加內容
p>lorem

快捷代碼

fori
forin
forof

Randomness

隨機數據

Alt+R 選中隨機的數據類型

shift 回車 就是數組

Nyan Progress Bar 彩虹進度條

alt+方向左/右 選項卡切換

常規字符串拼接變成模板字符串

Alt+Enter

Codota AI 完成代碼

Codota使用最早進的機器學習模型來提升生產力併爲開發人員節省時間

Quick File Preview 快速文件預覽

單擊就能夠實現

雙擊就跟咱們原來操做同樣

Alt+7 查看結構視圖

若是你想直接運行控制檯指令

例如 你想運行npm yarn之類的工具
ctrl+ctrl `yarn start` 就能夠直接啓動這個項目

完整語句

ctrl+shift+enter

Alt+Enter 可選對象的簡化

ctrl+shift+U 選中大小寫切換

方法顯示分割線

效果

關閉策略

就是超過7個標籤出促發關閉策略

我以爲通常5個標籤就能夠啦, 能夠限制五個,多於5個會把第一個給關閉掉

Ctrl+shift+F12 快速隱藏/恢復全部活動工具窗口

shift+Esc 關閉任何窗口

代碼展開/代碼摺疊

ctrl+ / ctrl -