前端學習 開發編輯器 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
窗格 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使用技巧
安裝atom命令列
導航欄中,點選Atom,選項會有 Install Shell Commands,安裝後可在terminal中直接使用atom命令列直接開啟該指定路徑檔案。atom xxx
修改快捷鍵
在使用atom-beautify時,發現它的快捷鍵太難用了。control-alt-b
十分難按。在android開發中,格式化和程式碼儲存最常用。於是就把格式化的快捷鍵改了。- 開啟atom選單,選中KeyMap…選項
新增如下程式碼,複寫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這個編輯器。
檢視markDown PreView
使用command + shift + P
後搜尋 markdown preview,就可以開啟視窗檢視。
結語
Atom的用於前端開發自己也是剛剛開始,之前僅僅是作為單純的文字編輯檢視器了,目前還在不停的摸索階段。不過這些外掛用於目前學習基礎的前端開發已經夠用了。之後隨著學習的深入,會不斷補充。
關於摸索過程中翻到的好文章,連結全在下面啦,大家可以看看。