Atom 絕贊插件

文件圖標: file-icons

根據不一樣文件後綴名顯示不一樣類型圖標

標籤欄根據不一樣文件格式顯示色彩: filetype-color

在標籤欄不一樣格式文件顯示不一樣的顏色的標題，支持二度設置。

小地圖：minimap

用過 Sublime Text 的友友們都知道有一個很實用的功能，就是內部編輯那裏有一個小小的代碼圖,
這貨就是補全 Atom 這個功能的,支持高亮代碼,還可控，具體看內部設置。

實時預覽HTML頁面: atom-html-preview

Atom編輯器內實時預覽的工具。

• 快捷鍵
  • 默認快捷鍵： CTRL + P 調用，會和內置核心插件衝突(切換文件那個)
  • 修改版快捷鍵： CTRL + F12 (感受方便使用且沒有衝突的快捷鍵)
• 修改自定義鍵盤映射文件：
  

#實時瀏覽器調用快捷鍵
  'atom-text-editor':
    'ctrl-F12':'atom-html-preview:toggle'

atom 內置了 Dev Live Reload 這個插件；
這個插件的做用就是從新加載全部樣式和規則，
有點相似 linux 的 source xx.sh 同樣..即時生效。
調用快捷鍵是 CTRL + SHIFT + ALT +R
固然，關閉 atom 再開 atom 編輯器也能達到從新加載全部樣式規則的效果......

同步備份atom設置到github: Sync-settings

同步 Atom 的設置文件，自定義快捷鍵，用戶風格，初始化腳本及代碼片斷，還支持已安裝的插件同步。

• 初始化設置
  • 進入設置中心找到該插件，點擊該插件的 setting 項進入到二步設置；
  • 打開本身的 github 建立一個personal access token
  • 複製生成的 token 序列，粘貼到插件的 sync-settings 插件的二步設置相關的 Token 項中。
  • 打開 github 的 gist 服務，建立一個 gist。
  • 將 gistID 粘貼到 sync-settings 插件的二步設置相關的 gistID 項中。
    • 注:gistID就是在你的gist頁面網址最後的那串32位的16進制數字。
    • 相似39d20859457f059a84b66577c80d4d38
      

• 使用方法(配置完畢後)
  * 在文檔編輯頁面，按下全局命令搜索面板(Ctrl+shift+p)
  * 搜索sync- ，會有可選項
  * sync-settings:backup – 備份當前配置;
  * sync-settings:restore – 恢復配置，(將gits上的配置文件)直接覆蓋(本地);
  * sync-settings:view-backup – 執行備份後到線上查詢備份,訪問gist;
  * sync-settings:check-backup – 查詢最後一次備份是否正常;
  * 備份成功和失敗都有一條信息提醒。
  

  自動補全 autocomplete-plus

  完善自帶 autocomplete,有二度設置，接下來列出的一些有二度設置

• autocomplete-python — 你懂得，更加細緻
• autocomplete-paths — 實用派，路徑補全
• autocomplete-html — 你懂得，更加細緻
• autocomplete-bibtex — Github的markdown語法
• autocomplete-snippets — 如名字
• autocomplete-css — 你懂得，更加細緻
  • less-autocompile — 實時編譯
  • docblockr — 註釋插件，很是的實用

支持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最右下角顯示的文本格式來改變),
只需書寫屬性和值的第一個縮寫字母+值。

//典型速寫舉例
//一、輸入db後按tab鍵
display: block;
//二、輸入dib後按tab鍵
display: inline-block;
//三、輸入mb10
margin-bottom: 10px;
//四、輸入m10%
margin: 10%;

更多縮寫用法請查看emmet官網

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.

更多請參考atom-live-server官網

關於atom的絕贊插件有好的會隨時再更新。 end