Atom：優雅迷人的編輯神器
大學的時候，坊間對那些編程高手有一個令人向往的傳說，大概說的是大神們能夠直接使用text純文本寫代碼。覺得這種級別的境界特別高大上特別有逼格。自己用eclipse，vs這些帶有代碼補全功能的IDE就感覺有點low。於是在很長一段時間裏，都是帶著信仰去追求這種境界的。
直到後來發現了一款神器，加上認知的慢慢提高，我的這個高大上的信仰，被打擊得粉碎。這款神器就是，sublime text 2。雖然我今天要想大家介紹的不是這款編輯器，但是不得不承認以當時的眼界來說，sublime的吸引力是我無法抗拒的。
工作之後發現vim的使用者才是真正的傳說。他們可以在任何討論編輯器的場所傲嬌的俯視全場，可以在任何其他編輯器的吹噓者面前對他們不屑一顧，江湖上無一人能夠與vim抗衡，強大到無敵的定制能力，讓vim能夠擁有一切你想要的能力。然而今天我要給大家介紹的，也不是這款神器。
vim稱霸世界的時候，據說有只有一款叫做Emacs的編輯神器可以和其叫板。你vim的高度可定制，我也高度可定制，你vim高逼格，我也高逼格，你vim有的功能我都有！！！可是我沒用過！
今天給大家安利的是一款新一代的編輯神器！Atom。
正所謂長江後浪推前浪，Atom無疑是沒有讓我們失望的。
Atom
在這個看臉吃飯的時代，Atom僅僅只靠顏值就獲得一大批coder的關註。對於前端開發者來說，它擁有致命的誘惑。在其他許多方面，它都有令人驚艷的表現。這是一款集美貌與才華與一身的產品。
更加不可思議的是，對我而言，這不僅僅是一款coding神器。還是一款寫作神器。縱觀所有的產品中，簡書的markdown編輯器已經算是首屈一指的優秀，圖片粘貼功能一直被我認為是最貼心的設計。不過，Atom中，對markdown的支持，甚至更加強大。對於熱愛markdown寫作的人來說，Atom同樣是一款擁有無窮魅力的寫作軟件。我不怕它無法滿足你的需求，就怕你不給機會去了解它，那麽，這將是一場遺憾的錯過。
so，我們一起來體驗一下這款編輯器/寫作神器的魅力吧！
簡單易學 與 深度可定制
時至今日，發展了30余年的vim雖然仍然擁有無比優秀的功能，但是一副高冷範兒讓常人實在難以靠近。上手難度高雖然讓最後能夠熟練掌握的大神成為傳說，讓人敬仰。但是畢竟耗時耗力耗心神，阻絕了一大批慕名而來的仰慕者。而Atom作為一款功能上不輸vim，甚至在某些方面已經超過vim的編輯器，簡單易學就是他的致勝法寶。在這一點上，Sublime text3都趕不上。
進入Atom官網下載Atom
和下載其他任何軟件一樣，沒有任何難度，直接安裝即可。
啟動Atom後，輸入快捷鍵command + , 或者ctrl + ,，就會彈出Settings界面。
Settings的UI界面是Atom的一大優勢，獨此一家。我們不用再對設置界面感到任何的疑惑，讓任何人都能夠直觀的操作，贊+1。這種便利，是Sublime和vim做不到的。
Paste_Image.png
可能唯一的困境，就是英語界面單詞不認識了。 哈哈，這個我就不幫你解決了，you can spifflicate it.
Atom在易用性上最大的突破，無疑非包管理器莫屬。
說到包管理器，就忍不住想要給Atom吹一波牛逼。
第一是插件的數量。不到兩年的時間4000多個插件，表明了atom插件開發者的熱情不輸vim，遠勝sublime。
第二是簡單明了。我能夠很輕松地找到我想要的優秀插件。下面，我將以markdown為例，為大家演示如何在Atom的包管理器中尋找插件。
那麽，幹貨來了。我將一步一步介紹如何將Atom中的markdown武裝成為一款寫作神器。
1. 在settings界面搜索markdown插件
打開settings界面，點擊左側欄的Install按鈕。然後在搜索框中輸入關鍵字markdown，點擊右側packages開始搜索
搜索出現很多markdown相關的插件
2. 識別插件的作用
其實基本上我們就從插件的命名就能夠知道插件的作用了 - -！點擊列表中的項，還可以跳轉到一個插件功能說明界面，大多數插件都會詳細的介紹插件的下載，安裝，有什麽用，如何使用等。
這個就不截圖了，大家自己去點一下就行了
3. 尋找適合自己的插件與如何下載
一般來說，下載數量較高的插件往往能夠給你帶來驚喜。點擊搜索出來的插件項中的Install按鈕，即可下載。
知道如何搜索插件之後，下面我來一一介紹我將要用來武裝markdown的插件。
Markdown Preview
markdown預覽。目前已經有25萬的下載量，是markdown的基本功能，與簡書的預覽功能一模一樣。支持與github上100%一致的轉換語法，與簡書的語法基本保持一致，功能上比簡書更加強大，能夠識別更多的語法操作。
markdown preview
如何使用？ 按ctrl + shift + p 彈出搜索框，然後搜索markdown preview，然後點擊enter即可使用.
Paste_Image.png
markdown-scroll-sync
Paste_Image.png
實時滾動預覽插件。該插件能夠實現的效果，剛好就是簡書所缺乏的。真的希望簡書能夠早一點將該功能開發出來。寫作的時候，大大的提高了觀看預覽效果的效率。舒心了許多。
簡書的markdown很強大，就差一個實時滾動預覽了
tidy markdown
美化markdown顯示。功能介紹是這樣說的 Uses tidy-markdown to fix and reformat ugly Markdown. 推薦給對審美有追求的使用者，無追求的可以忽略。
表格整理
格式整理
列表整理
markdown-preview-opener
當打開一個markdown文件時，自動打開預覽界面。很實用貼心的小功能。
atomic chrome
這是一個神奇而且令人驚喜萬分的插件。
他令人驚訝與驚喜的地方就在於，他讓公眾號使用markdown發表文章成為可能。
也許你在很長一段時間，都在被公眾號的排版所困擾。而這個插件，卻無意間解決了這個問題。
該插件只適用於chrome瀏覽器。我們首先需要在chrome中安裝atomic插件。
若要安裝chrome插件需要FQ，因此這裏給大家推薦一款FQ軟件。https://www.gaotizi.com/。目前為止見過的最穩定的VPN。建議熱愛學習的去買個年費，如果不需要的就買個5塊錢的試用期。具體操作按照網站的幫助中心的文章指南操作。
然後在Atom中搜索到atomic chrome插件然後install。重啟Atom，就可以試用該插件的功能了。
那麽這個插件有什麽作用呢？
在chrome瀏覽器中，隨便找到一個編輯框，這裏大家可以以微信公眾號後臺的文章編輯頁面為例，選中編輯框之後，點一下chrome右上角的atomic插件按鈕，會自動在atom中彈出一個markdown文件，然後我就可以在atom中編輯文章內容了。文章內容會實時顯示在微信公眾號的編輯頁面中。官方的gif圖示如下。
這是展示的是實時同步到Gmail郵件編輯頁面。和同步到微信公眾平臺是一樣的。
但是這還沒有完。當我們使用markdown語法編輯文章之後，微信後臺是不支持markdown語法的，因此為了將markdown文件轉換成讀者可閱讀的模式，我們還需要一個一鍵轉換的插件。Markdown Here。
下載地址: markdown here
Paste_Image.png
4. 具體使用步驟使用步驟
選中微信文章編輯框 -->
點擊chrome右上角的atomic插件。這時會在Atom編輯器中自動新建一個md文件。-->
在Atom新建的md文件中編輯你的文章內容。在頁面中，微信編輯框中的內容自動實時刷新 -->
文章編輯完成之後，在頁面中選中微信編輯器，然後點擊chrome右上角的markdown here插件，這樣就會生成下圖內容。如果你已經編輯完成沒有修改，就可以保存文章然後發推送了。
Paste_Image.png
到這裏，一個完全形態的markdown編輯器基本就已經打造完成了。比簡書更加優秀，功能更加強大的編輯器。
支持實時預覽，實時滾動預覽，在微信公眾號上發表文章等寫作必備技能。
當然，你還可以繼續擴展markdown的功能。在Atom中仔細尋找，你還會發現諸如，圖片粘貼功能的插件，導出為pdf功能的插件，markdown語法增強版插件，markdown快捷鍵增強版插件等。
這些就留給大家自己去探索吧。
如何尋找到讓自己滿意的插件
Atom的包管理器足夠強大也足夠方便。上面我們看到了當我們想要找到markdown相關的插件，我們只需要搜索對應關鍵字即可。那麽要尋找到其他功能的插件，自然也是搜索對應的關鍵字啦。
以SCSS 插件為例
搜索如圖
Paste_Image.png
我們可以從插件的功能介紹，下載數量，以及自身的體驗效果來確定這些插件是否符合自己的需求，尋找到一款最滿意的插件。
而且不同方向的開發人員對插件的需求是不一樣的，盲目安裝許多插件只會增加Atom的體積，因此我們只需要找到自己需要的插件就可以啦。
一目了然的快捷鍵列表
熟練使用快捷鍵，是程序員的必修課。Atom內置的快捷鍵列表，極大地方便我們搜索和查看快捷鍵。讓用戶不再茫然。
快捷鍵太多腫麽辦？沒關系，查找功能輕松解決。
點擊側邊欄的keybindings，在彈出界面的搜索框中輸入markdown，就能找到所有與markdown有關的快捷鍵，如下圖。
Paste_Image.png
按照設置界面的排列表格，列出幾個常用的快捷鍵，更多的可以詳細查看settings界面的列表
新安裝插件的快捷鍵也會在這個列表中顯示
| 快捷鍵 | 快捷鍵的功能 | 來源於哪一個插件 | 選擇器 |
|---|---|---|---|
| cmd + , | 顯示/隱藏設置界面 | core[核心] | body |
| cmd + \ | 顯示/隱藏側邊欄 | nuclide file tree | xx |
| cmd + p | 查找文件 | xx | xx |
| cmd + o | 打開文件 | xx | xx |
| cmd + 數字鍵 | 切換到第x個選項卡文件 | xx | xx |
| cmd + shift + [ | 向左切換 | xx | xx |
| cmd + shift + ] | 向右切換 | xx | xx |
| cmd + k + 方向鍵 | 分屏操作 | xx | xx |
| cmd + w | 關閉當前文件 | xx | xx |
| cmd + ↑ | 移動到代碼頂端 | xx | xx |
| cmd + ↓ | 移動到代碼底端 | xx | xx |
| cmd + enter | 在上一行的任何位置換行 | xx | xx |
| cmd + enter | 在上一行的任何位置換行 | xx | xx |
| cm的 + d | 選擇整個單詞 | xx | xx |
關於分屏操作，在mac端是先按cmd + k，然後再按方向鍵，在windows端是ctrl + k + 方向鍵一起按。因為設置界面有詳細的快捷鍵列表，這裏我就不再多說了，需要大家在使用過程中慢慢積累與熟練。
前端開發插件推薦
體驗一把炫酷的coding，只發圖，不多說。如果你下載了插件不知道如何運用，請按ctrl + shift + p，彈出一個搜索框，然後查找這個插件，點擊enter就能使用了，還能看到該插件對應的快捷鍵。
activate-power-mode
activate-power-mode atom package
emmet
html快速編寫神器。前端開發必備。如果你還不會emmet的語法，可以點擊查看
因為emmet已經出來很多年，所以網上的教程也很多，大家可以搜索學習一下。
各種補全插件，因為Atom已經內置了大多數語言的補全插件，因此我這裏就不多介紹了，你們也不用擔心這個問題
jshint
js語法檢測插件
錯誤語法提示
類似的還有htmlhint，csshint
git-plus
git 操作的插件。目前已經有55萬的下載量，使用的人很多，會使用git的同學值得一試。與github深度契合。完美無缺。
Paste_Image.png
可定制的UI界面
使用一款可以隨時切換皮膚的編輯器是一種什麽體驗？試試就知道。
Atom的外觀插件分為2個部分。一個是控制整個編輯器風格的插件。另外一個就是控制代碼高亮的插件，
我們可以在themes中搜索到自己喜歡的風格。很值得高興的是，這些風格都是用css來控制元素樣式的。如果你是一個前端開發者。你需要懂一點關於less語法的東西，那麽你就可以很輕松的修改主題插件中的樣式了。
下面我介紹一下我最喜歡的幾款主題與高亮配色
目前個人最喜歡的英文字體: Source code pro.
one Dark
Paste_Image.png
one Light
Paste_Image.png
seti ui
據說是目前最火的UI皮膚，很漂亮。
Paste_Image.png
性能越來越卓越
在Atom剛出來的時候，憑借高顏值吸引了很多圍觀者，但是卡成為了一個很大的槽點。而1.0版本出來之後，這方面的問題就得到了很大的改善。目前Atom已經更新到了1.7版本，性能方面得到了很大的優化。說實話，Atom已經越來越快。並且一直在進步中。
兼容vim模式
對一個程序員來說，在服務端編輯文件還得使用vim。因此學習和掌握基本的vim指令還是必須的。下載一個vim mode插件，就能讓atom兼容vim。
免費
對，就這2個字，免費。
到這裏，Atom就已經集齊了所有優勢於一身，
免費 + 高顏值 + 簡單易學 + 功能強大 + 可以調教 + 可以整容 + 輕量級 + 性能卓越 ... ...
上手簡單，讓Atom能夠成為了一款優雅而低門檻的神器，深度可定制的特性，讓Atom在你的打磨之下，變得越來越符合你的心意。因此，無論你是用來寫作，還是用來寫代碼，這都是一款你值得擁有的神器。
學習過程中遇到什麽問題或者想獲取學習資源的話，歡迎加入學習交流群
343599877，我們一起學前端！
Atom：優雅迷人的編輯神器