大家好，我是K.J.！無意中通過搜索引擎來到了簡書，看到了很多大大們的精彩分享，因此受到了不少啟發。
這幾天感覺自己是不是也應該寫點什么？
算回報給那些幫助我解惑的作者大大們，還有這可歌可泣的互聯網分享精神。
首先說明下為什么要寫這個主題呢？很久以前就聽聞了Atom的大名，也曾經下載過來玩耍了下。可是呢，因為當時 Win 下插件實在是太難安裝了（沒想現在也是依舊如此）。自己那時也沒 Mac ，自然也就沒怎么去深究。
直到最近擁有了人生第一臺 Mac ，然后又無意中看了簡書大大們對Atom的美贊。自然而然又勾起了我那顆蠢蠢欲動，想要再嘗試一番的心。
而后，在公司的 Win 機上又體會了一番折磨人的插件安裝，所以回家用 Mac 又嘗試了一遍，沒想到完全是兩種不同的感受。
說了這么多前因后果，那么現在，入正題！
安裝 Win & Mac 兩個系統都要需要的東西：
一、科學上網
由于簡書提示有推廣成分，所以這里的軟件就大伙自己找吧
PS： 科學上網還是很有必要的，就算不是為了裝插件。其實，有時候上Google搜索一些技術型的外文資料，還是必不可少的。筆者發現，有些技術問題用英文在Google搜索還是很精準的。而且，國外的一些技術論壇的回復質量基本都挺好。當然啦，前提是你的英語水平還是有那么點的。
二、Atom（主角上場）
- 前往官網下載對應自己系統的版本
- 雙擊下載完成的文件，就可以開始安裝了
到目前為止，無論是Win還是Mac，都是一樣的。
沒什么根本上的區別，都是下載和安裝的操作。
三、Win 和 Mac 的差異
Win 系統：打開Atom，點 File => Settings => Install
筆者無論是開沒開藍燈，搜索出要的插件后，接著點Install后都會神奇的卡住
只有如下圖的install按鈕上一直在循環的陰影動畫
內心真的是深深的無力感～！
Mac 系統：然而筆者在自己的MacBook Pro上，同樣的操作，一切都沒問題，過一會兒（時間視插件大小而定）就安裝上了。（難道這就是蘋果這么貴的原因之一嗎？易用性！！！）
解決方法：重點來了，那么 Win 下如何安裝插件呢？
以下是筆者自己琢磨的方法，如有錯漏，歡迎大家補充
- 首先到github搜索頁
- 搜索自己想要的插件（一般右側的排列類型選擇【Most stars】 ，出來的結果中看到 **for atom **的字樣 基本就是了）
- 進入插件的詳情頁，點綠色的Clone or download，選擇藍色的 Download ZIP
- 將下載好的解壓到對應的Atom插件目錄，默認安裝都是在這里 C:\Users\Administrator.atom\packages
或者你可以在package里看到路徑
PS：下面的步驟起，要安裝node環境 官方node下載。npm 是node安裝時自帶的包管理工具，安裝成功后就可以使用了。在Win 下的開始菜單里可以找到node的命令行窗口（也是個黑黑底色的窗口），打開輸入筆者下面的命令應該是一樣效果（筆者用的是Git bash）。
- 打開Git bash，cd 到自己剛剛解壓好的插件目錄里 ，然后 npm install（一定要先安裝好node環境，才會識別這個命令哦）
- 安裝成功后會有一堆的信息刷屏出來
筆者覺得 Win 之所以卡住的原因應該是網絡的問題，導致要安裝的插件包下載不過來。
所以就想到先去github手動下載，然后再手動用Gitbash安裝，確實麻煩是麻煩多了（大家若有更好的辦法，歡迎留言補充）
PS:筆者試過直接用git命令也會卡住半天沒動靜
Atom插件【自用】 (Web前端方向）：
筆者目前還只用到了以下插件
插件標題已添加對應插件的 github鏈接
歡迎大家留言補充
互相學習，共同進步
結構格式美化，自動縮進之類的
Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom
js代碼智能提示補全
JavaScript code intelligence for atom withTern. Adds support for ES5, ES6, ES7, Node.js, jQuery, Angular and more.
**添加css各瀏覽器前綴如-webkit-、-moz-等 **
Prefix CSS and SCSS with Autoprefixer
顏色選取器
Right click and select Color Picker, or hit CMD-SHIFT-C/CTRL-ALT-C to open it. Currently reads HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and VEC4 colors – and is able to convert between the formats.
html標簽補全
美化左側資源管理器里的文件圖標，算主題的一部分吧
在右上角生產代碼全局預覽圖
Shows the code that's under the mouse cursor when hovering the minimap.
直接在編輯器內右鍵瀏覽器打開
A very simple Open in Browser Atom.io Package. This allows you to right click and have a menu that will open the current file in your default program. That opens that extension. HTML files will open in your default browser or application.
謝謝你一直如此認真的看完，你一定是個很好學的人。
如果你覺得不錯，可以關注我，我會時不時的更新有感悟的Web前端知識。
當然啦，你要是很喜歡，也可以點個贊 ，支持下我的首發文分享，萬分感謝。
