1. 創(chuàng)建項目

01.png

2.基本操作

1.快速查找 ctrl+ r
2.代碼補全 tab
3.版本控制
4.本地歷史 local history
5.即時模板 setting editor code tpl
6 多個光標 alt + 鼠標左鍵 豎向選擇
7 代碼格式化 ctrl + alt +L

• 新建文件，webstorm windows下新建文件不是 ctrl +n 是alt+insert 坑

• 放大縮小也面代碼
  1.點擊左上角的File，再點擊setting；
  2.Editor->General，選擇Change font size (Zoom) with Ctrl+Mouse Wheel；
  3.點擊OK即可。

• 代碼格式化 ctrl + alt +L

• eidtor code tpl 設置模板

• crtl + r 查找替換

• alt + 鼠標左鍵 多行游標

• Keymap 快捷鍵的名稱找快捷鍵，也可以用快捷鍵找快捷鍵名稱，也可以設置快捷鍵

• 光標移動上去 ctrl + 鼠標左鍵單擊，實現(xiàn)代碼提示

• ctrtl + / 注釋

• ctrl + shift + v 調(diào)出剪切板

• shift + delete 刪除光標所在行

• ctrl + alt + enter 當前行光標跳到新的上一行

• shift + enter 當前行光標跳到 新的下一行

• ctrl + 減號 折疊當前行代碼

• ctrl + 加號 展開當前行代碼
  -ctrl + shift + 減號 折疊所有代碼

• ctrl + shift + 加號 展開所有代碼

• ctrl + shift + ↑ 或 alt + shift + ↑ 當前代碼移動到上一行

• ctrl + shift + ↓ 或 alt + shift +↓當前代碼移動到下一行

• ctrl + shift + m 光標在閉合標簽尾部跳到頭部來回跳動，光標要放在閉合標簽之前或之后

• ctrl + e 查看最近使用的文件

• ctrl + shift + backspace 回到上一次編輯的地方

• ctrl + 單擊 圖片的src 實現(xiàn)預覽

• 光標移動到img 的src 上 ，按住 shift 鍵可實現(xiàn)預覽

• css 中選擇顏色，如 background ，輸入 bg 按 tab， 再去點擊background 前的色塊可調(diào)出調(diào)色板，選擇顏色

• shift + f6 重命名強大，同時可以點擊 preview 實現(xiàn)預覽 改變

webstorm 自帶錯誤提示，如 代碼下波浪線 或 黃色的下劃線塊按 alt + enter 可以看到 錯誤修改提示 ，按 F2 可以 在錯誤處來回跳動

ctrl + shift + s 調(diào)出 設置面板 ，輸入 inspection 可以 查看 錯誤提示的設置和自定義錯誤設置

3.ememt 快捷操作

• > + ^ * () 嵌套字符
  1.后代嵌套 >

  div> ul > li
   <div>
        <ul>
            <li></li>
        </ul>
    </div>

2.同級 +

 div+ul+li
<div></div>
<ul></ul>
<a href=""></a>

3.上一級 ^

div>div^p
<div>
    <div></div>
</div>
<p></p>

4.多個元素 *

div>ul>li*3
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

5.保證優(yōu)先級 ()

ul>(li>a)*5
<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

• 屬性，類 、id # . []
  1.id #

div#ct.ct
<div id="ct" class="ct"></div>

2.class .

div.item.item2
<div class="item item2"></div>

3.atrr []

div#ct.ct[data-value]
<div id="ct" class="ct" data-value=""></div>

• 變量{} $
  1.{}

p{click me}
<p>click me</p>

2.$

p{變量$}*5
<p>變量1</p>
<p>變量2</p>
<p>變量3</p>
<p>變量4</p>
<p>變量5</p>

• 生成無意義文本測試排版 lorem+數(shù)字 生成多少個隨機單詞

lorem10
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, sapiente.

• 今年最后一篇博客，祝大家新年快樂，雞年大吉。

版權為饑人谷和作者所有，若轉(zhuǎn)載請注明出處