初次接觸這個編輯器，發現比sublime好用。折騰一上午，由於各種不懂尤其是安裝外掛浪費好長時間，其實很簡單。廢話不多說，直接開始。（希望能夠對你有幫助）

1.下載

下載之後雙擊檔案AtomSetup-x64.exe

執行有點慢，稍微等一會。之後顯示這個介面

2. 配置環境變數

安裝Atom過程太輕鬆了什麼都不需要，是不是有點慌，安裝在哪裡呢？
由於我們安裝外掛需要用到apm這裡命令，這裡需要將其新增到環境變數裡面，如圖。
在桌面Atom圖示→右擊→屬性→檢視安裝位置。我的安裝位置是在：C:\Users\erdou\AppData\Local\atom。
現在配置環境變數：在PATH後面新增

;C:\Users\erdou\AppData\Local\atom\bin

注意前面有一個英文狀態分號。
這樣就可以使用apm命令了。

開啟命令視窗看是否可以使用apm
Win+R → cmd → apm ls
檢視安裝了哪些包：

apm ls

如果沒有安裝外掛會顯示：

Community Packages (0) 

後來發現其實也可以不用配置apm環境變數。有npm就可以了。不知道會不會有影響（如果有問題後續會完善）。

選單欄

3. 更改atom主題

下載方法：在install頁搜尋seti_ui等主題名稱即可,（主題seti_ui的作者：jesseweed）

4.atom外掛安裝

1.方法一、

這是最簡單的外掛安裝，但可能會安裝很慢。（如果安裝特別慢，就直接用方法二）

2.方法二、

以安裝emmet外掛為例子：

• Ctrl+Shift+P: 打開面板
• 輸入：install packages選擇install Packages Themes
• 輸入要安裝的外掛名字emmet
• 點入外掛介紹 找到github地址
• 開啟git切換到 C:\Users\erdou.atom\packages
• git clone https://github.com/emmetio/emmet-atom
• 切換到安裝的外掛資料夾cd emmet-atom
• npm install
• 重啟Atom

下面是參考：

cd ~/.atom/packages
git clone https://github.com/emmetio/emmet-atom
cd emmet-atom
npm install

3.前端必備外掛

• atom-html-preview — 瀏覽器實時預覽效果 （得更改快捷鍵，快捷鍵更改方法在下面）
• color-picker — 取色器,太讚了有木有,,比sublime那個好用,不卡,啟動超快
• emmet — HTML,CSS快速編寫的神器，emmet官網還有視訊演示
• atom-ternjs—-JavaScript 自動補全外掛還可以配置語言版本和指令碼庫
• docblockr — 程式碼註釋工具，提供程式碼註釋的模板
• jquery-snippets — jQuery 程式碼段
• javascript-snippets — JavaScript 程式碼段
• atom-ternjs — JavaScript 自動補全外掛還可以配置語言版本和指令碼庫
• atom-beautify — 格式化程式碼
• autocomplete-paths — 路徑補全，比如下找到某個圖片的位置
• autocomplete-sass — sass 語法自動補全
• atom-bootstrap3 — bootstrap3程式碼提示
• autocomplete-plus — 完善自帶autocomplete 程式碼自動補全外掛
• autoprefixer — 自動給 css 檔案中的屬性新增廠商字首
• project-manager — 強大的，快速的開啟專案的外掛，非常的有用
• run-in-browser — 將當前的 html 在瀏覽器中開啟
• open-in-browser — 將當前的 html 在瀏覽器中開啟
• linter — 程式碼驗證外掛 （下面是前端可能用到的）
  
  • linter-jshint, for JavaScript and JSON, using jshint
  • linter-coffeelint, for CoffeeScript, using coffeelint
  • linter-scss-lint, for SASS/SCSS, using scss-lint
  • linter-less, for LESS, using less
  • linter-csslint, for CSS, using csslint

顯示效果外掛

• react — 對 react 語法高亮支援，並且有補全效果
• file-icons — 在目錄樹 tree-view 的檔案前面加上響對應的 logo
• highlight-column — 高亮當前游標所在的列
• highlight-line — 高亮當前游標所在的行
• highlight-selected — 在當前編輯的檔案中高亮全部匹配的單詞
• pigments — 對 css 檔案中使用的顏色進行響應顏色的高亮
• minimap — 用過Sublime Text的都知道有一個很實用的功能,就是內部編輯有一個小小的程式碼圖,這貨就是補全atom這個功能的,支援高亮程式碼

美化篇外掛

• file-icons — 增加許多圖示,在側邊藍檔名前面的icon,,很贊
• filetype-color — amazing,,在標籤欄不同格式檔案顯示不同的顏色的標題,支援二度設定
• color-picker — 調色盤，可以選中自己鐘意的顏色，而且可以在面板中調整透明度

markdown寫作工具外掛

• markdown-scroll-sync—-編寫 markdown 可以根據寫到的部位，右邊預覽可以實時的滾動
• markdown-table-formatter—-對 markdown 語法繪製的表格格式化

協作篇外掛

• git-plus — 與Sublime Text 的sublimegit功能基本一致

（有好的外掛會繼續更新補充）

5.如何更改Atom快捷鍵

1.開啟keymap.cson檔案：

2.把要改的快捷鍵寫在最下面，依次新增。

  'atom-text-editor':
# F12在瀏覽器預覽html頁面
  'f12':'rib:run-in-browser'
#右邊欄實時瀏覽器呼叫快捷鍵
  'ctrl-F12':'atom-html-preview:toggle'

6. 快捷鍵