一、實用用法

• 1、開啟多個窗格, 可用於對比檢視程式碼.
  View -> Panes -> Split Xxx

二、快捷鍵

• 1、快速查詢檔案：cmd + p.
  a: 輸入檔名搜尋.
  b: 輸入目錄 + 檔名搜尋.
• 2、切換多個頁籤視窗.
  使用cmd + [1,2,3...]切換到第幾個頁籤.
  如： cmd + 3 切到第三個視窗.
• 3、新建空檔案: cmd + n

• 4、選擇同名標籤, 批改標籤名字
  選擇其中一個標籤, 然後 cmd + d 會高亮下一個該名的標籤.
  拓展:批改某個標籤名, cmd + d選中多個同名標籤後, 直接批改名字.

• 5、選中某行：cmd + l

• 6、查詢關鍵字
  a、cmd + f查詢該檔案下的該關鍵字.
  b、cmd + shift + f查詢所有檔案下的該關鍵字.

• 7、選中{ }中括號內所有, 用於CSS中某個樣式集的選定
  cmd + ctrl + m

  三、推薦安裝套件

  • 1、檔案圖示: file-icons
    根據不同檔案字尾名顯示不同型別圖示

  • 2、支援html和css格式檔案中程式碼速寫外掛: emmet
    用法介紹:.

    一、html中用法

  • a、新建空檔案後,改變文字格式為html(點選atom最右下角顯示的文字格式來改變),然後在文字空白處輸入標籤名html、head、div、article、a…後按tab鍵.
  • b、多倍數個的同類標籤: li*3
  • c、快速設定class/id屬性預設的div標籤: .clsName/idName然後tab會出來class/id為clsName/idName的div標籤
  • d、快速設定class/id屬性的任意標籤: 如h1.title/h1#title出來id/class為title的h1標籤
  • e、>巢狀符來速寫巢狀關係的標籤: ul>li*3>a

  • f、{}設定標籤內value值:如ul>li{value1}+li{value2}

    二、css中用法

  • 新建空檔案後,改變文字格式為css(點選atom最右下角顯示的文字格式來改變), 只需書寫屬性和值的第一個縮寫字母+值

    //典型速寫舉例
    //1、輸入db後按tab鍵
    display: block;
    //2、輸入dib後按tab鍵
    display: inline-block;
    //3、輸入mb10
    margin-bottom: 10px;
    //4、輸入m10%
    margin: 10%;

• 3、webserver伺服器外掛: atom-live-server
  用法介紹:.

  ctrl-shift-3 launch live server on port 3000.
  ctrl-shift-4 launch live server on port 4000.
  ctrl-shift-5 launch live server on port 5000.
  ctrl-shift-8 launch live server on port 8000.
  ctrl-shift-9 launch live server on port 9000.