前端開發IDE Webstorm使用技巧 2017年1月31日

1. 首先 webstrom是支持Emmet語法 所以肯定有常用的快速生成語法
   快速生成的 語法的 主要有以下幾點

> 代表下級的元素
+ 代表同級元素
^ 代表把這個之後的元素往上提高一級
* 代表多次生成 重複
() 讓邏輯更加清晰
# 讓生成的元素擁有id //比如 div.contanair 
. 讓生成的元素擁有classname //和上者可以一起使用
[] 裏面爲作爲自定義的屬性 比如 div.classname[data-value]
$ 符號可以讓我們添加按序的數字 比如 div>li.item$*5就會自動添加12345
{} 在大括號之中的爲文本 比如div{this txt} 
lorem 爲我們生成無意義的文字 作爲文本測試只用 比如 lorem100 生成一百個



//在css中同樣支持emmet語法 比如輸入bt 會生成border-top 輸入bt10 生成border-top:10px; 如果想設置多個數字 比如margin 0 auto 那麼可以m0auto 更多的語法還要自己探索

• Webstorm小技巧
• f1 可以讓我們找到想要的幫助信息 比如你選擇了aleart 按下f1就會顯示一些相關的幫助
• alt + up/dm 可以幫我們層層遞進的選擇子元素
• ctrl + shift + v 可以幫我們粘貼 粘貼板中不同的內容
• ctrl + y 快速刪除一行
• ctrl + alt + enter 在上方新建一行
• ctrl + shift + enter 在下方新建一行
• ctrl + +/- 摺疊或展開代碼
• alt + shift + up/dm 上下移動這行代碼
• ctrl + e 查看最近的文件
• 選擇圖片按f1可以快速預覽圖片
• ctrl + shift + alt + t 重命名複製 支持css 顏色也支持
• f2 在錯誤裏跳轉
• alt + enter 可以對錯誤進行一些推薦操作
• alt + ins 新建文件或目錄
• 用meta:vp可以快速生成視口代碼
• ctrl+alt+shift+j 選擇所有相同的詞
• ctrl + w 選擇一個單詞 比如id class之類的