前言

Android開發時，也經常使用使用文件編輯器。就是主要用在看一些比較簡單的開源專案時，不想用IDE開啟，僅僅是閱讀一下程式碼，用文件編輯器就會方便很多。 stormZhang講過一篇部落格 Gradle命令詳解與匯入第三方包，裡面提到了Sublime這個編輯器。剛開始自己用的這個，後來Atom出了，看了一眼，便非常喜歡，於是就轉到Atom上來。

現在自己在學習前端開發基礎，使用Atom作為編輯器，那麼就摸索一下怎麼配置Atom，才能方便前端開發，比如如何自動補全，如何智慧提示等等功能。

這篇文章核心是Atom的配置，但也會從基礎開始介紹。

1. 安裝

就在Atom官網上直接下載下來解壓就可以使用了。很舒服。

2. 介紹Atom基礎術語

先了解Atom的使用的一些概念，在之後理解有很大幫助。

• 緩衝區 Buffer :
  A buffer is the text content of a file in Atom. It’s basically the same as a file for most descriptions, but it’s the version Atom has in memory. For instance, you can change the text of a buffer and it isn’t written to its associated file until you save it.
  Atom會將檔案中的文字內容全部載入到記憶體中，這就是緩衝區。當你修改文字內容時，實際上修改的是緩衝區中的內容。當按下 command + S

  進行儲存時，Atom會將快取區內容寫入到硬碟上進行持久化儲存。

• 窗格 Pane:
  A pane is a visual section of Atom.
  窗格是Atom的視覺化部分。就是一塊一塊的區域。

3. 介紹命令面板 Command Palette

快捷鍵 command + shift + P 快速調出命名面板，可以通過該命令面板檢視所有的快捷鍵。
官方這麼說：If you only remember one keyboard shortcut, make it command + shift + P 。通過它可以查到其他快捷鍵。

更多快捷鍵在之後的使用中新增進來。

注 ： Mac下快捷鍵的符號所對應的按鍵
⌥ —> option|alt
⇧—>shift
⌃—>control
⌘—>command
⎋—>esc

4. 前端開發配置

瞭解了atom後，就可以開始配置atom，方便我們的編碼工作。

• 通過命令列安裝外掛（外掛介紹可看文末連結）

  apm install emmet //前端常用
  apm install atom-beautify //格式化
  apm install minimap //程式碼地圖
  apm install autoclose-html //自動閉包
  apm install linter //lint檢查
  apm install linter-jshint//js檢查
  apm install file-icons //檔案檢視圖示
  apm install run-in-browser //使用瀏覽器預覽
  

恩，配置完成後，就可以開心的編碼啦。

5. Atom使用技巧

1. 安裝atom命令列
   導航欄中，點選Atom，選項會有 Install Shell Commands，安裝後可在terminal中直接使用atom命令列直接開啟該指定路徑檔案。

   atom xxx
   

2. 修改快捷鍵
   在使用atom-beautify時，發現它的快捷鍵太難用了。control-alt-b 十分難按。在android開發中，格式化和程式碼儲存最常用。於是就把格式化的快捷鍵改了。

   1. 開啟atom選單，選中KeyMap…選項

   2. 新增如下程式碼，複寫atom內建的快捷鍵：

      'atom-text-editor':
          #格式化
          'alt-cmd-l': 'atom-beautify:beautify-editor'
          #用瀏覽器開啟
          'alt-cmd-o': 'rib:run-in-browser'
      

      這裡為alt-cmd-L，設定為和android studio一樣，就方便書寫程式碼了。哈哈哈。這裡設定它的快捷鍵比andorid studio方便的多，真的佩服Atom這個編輯器。

3. 檢視markDown PreView
   使用 command + shift + P 後搜尋 markdown preview,就可以開啟視窗檢視。

結語

Atom的用於前端開發自己也是剛剛開始，之前僅僅是作為單純的文字編輯檢視器了，目前還在不停的摸索階段。不過這些外掛用於目前學習基礎的前端開發已經夠用了。之後隨著學習的深入，會不斷補充。

關於摸索過程中翻到的好文章，連結全在下面啦，大家可以看看。