1. 程式人生 > >前端學習 開發編輯器 Atom使用配置

前端學習 開發編輯器 Atom使用配置

前言

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 。通過它可以查到其他快捷鍵。

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

快捷鍵 描述
command + S 儲存當前檔案
command + shift + S 另存為
command + alt + S 全部儲存
command + \ tooggle tree-view
ctrl 0 focus tree-view
command + 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的用於前端開發自己也是剛剛開始,之前僅僅是作為單純的文字編輯檢視器了,目前還在不停的摸索階段。不過這些外掛用於目前學習基礎的前端開發已經夠用了。之後隨著學習的深入,會不斷補充。

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