【CSS】Atom編輯器之快捷鍵 & css好幫手之color-picker外掛

*Atom編輯器之快捷鍵 & css好幫手之color-picker外掛
➤ATOM編輯器-快捷鍵
選取一行，多行(再按一次L) > Ctrl+L
選取一行或多行，進行向上繞移 > Ctrl+up
選取一行或多行，進行向下繞移 > Ctrl+down

選取一行或多行，往右移 > Tab 
選取一行或多行，往左移 > Shift+Tab

選取一行或多行，自動複製貼上 > Ctrl+Shift+D

呼叫出色票表  > Ctrl+Alt+C  (需安裝color-picker外掛)

找出對應的標籤 > Ctrl+M  (當你的div寫的落落長時，這非常好用，真心不騙)

呼叫檢視靜態網頁 > Ctrl+Shift+M (編寫時畫面會跟著同步)

快速呼叫html元素(需安裝Emmet外掛，快捷鍵更多說明(點我))

例如: table>tr*3>td*4(按下tab鍵，3行4列的表格就會自己出來)




➤ATOM編輯器安裝color-picker
說到寫css每次看色票還要參考網站真的有些麻煩，其實呢我們可以直接在ATOM編輯器上可以安裝色票表來撰寫css。

首先到上方目錄欄位點 File> setting> install> 打上color-picker，下載下來後也可以到Packages查看有無安裝。

接著只要用力(等等...其實可以不用這麼用力)按下Ctrl+Alt+C就會跳出色票表了!除了rbg色票外，也可以用rgba來套用透明度呦!
圖中最底下的HEX也能幫您改為十六進制的色碼(如:"#ffe7d4")。

➤ATOM編輯器安裝Atom-live-server(個人覺得沒很好用= =)

其實直接打server就會秀出來，第二個紅勾勾直接安裝即可。

安裝後在Packages點選atom-live-server點選Start-Server就會開啟伺服器，再瀏覽器上查看。

另一方式也可以叫出欄位直接開啟Server。

btw如果對字型的顏色不滿意，可以考慮下載安裝monokai的theme個人覺得挺好看的，而且文字色調和sublime編輯器很相似。
想要方便瀏覽的話也可以安裝minimap的packeges，右側會出現小圖瀏覽。
寫出來css的顏色屬性值，想要顯示底色，可以安裝pigment的packeges

想一想最早期在做網站從筆記本到nodepad++到Dreamwaver，再到sublime最後才用Atom。不管棧友們用的是哪款編輯器，最重要的是合適自己為主呦!