Win & Mac雙系統Atom配置

大家好,我是K.J.!無意中通過搜索引擎來到了簡書,看到了很多大大們的精彩分享,因此受到了不少啟發。
這幾天感覺自己是不是也應該寫點什么?
算回報給那些幫助我解惑的作者大大們,還有這可歌可泣的互聯網分享精神。

首先說明下為什么要寫這個主題呢?很久以前就聽聞了Atom的大名,也曾經下載過來玩耍了下。可是呢,因為當時 Win 下插件實在是太難安裝了(沒想現在也是依舊如此)。自己那時也沒 Mac ,自然也就沒怎么去深究。

直到最近擁有了人生第一臺 Mac ,然后又無意中看了簡書大大們對Atom的美贊。自然而然又勾起了我那顆蠢蠢欲動,想要再嘗試一番的心。

而后,在公司的 Win 機上又體會了一番折磨人的插件安裝,所以回家用 Mac 又嘗試了一遍,沒想到完全是兩種不同的感受。

說了這么多前因后果,那么現在,入正題!


安裝 Win & Mac 兩個系統都要需要的東西:

一、科學上網

由于簡書提示有推廣成分,所以這里的軟件就大伙自己找吧

PS: 科學上網還是很有必要的,就算不是為了裝插件。其實,有時候上Google搜索一些技術型的外文資料,還是必不可少的。筆者發現,有些技術問題用英文在Google搜索還是很精準的。而且,國外的一些技術論壇的回復質量基本都挺好。當然啦,前提是你的英語水平還是有那么點的。

二、Atom(主角上場)

  • 前往官網下載對應自己系統的版本
如此辣眼的按鈕
  • 雙擊下載完成的文件,就可以開始安裝了
下載好的Atom文件
安裝成功

到目前為止,無論是Win還是Mac,都是一樣的。
沒什么根本上的區別,都是下載和安裝的操作。


三、Win 和 Mac 的差異

Win 系統:打開Atom,點 File => Settings => Install

筆者無論是開沒開藍燈,搜索出要的插件后,接著點Install后都會神奇的卡住
只有如下圖的install按鈕上一直在循環的陰影動畫
內心真的是深深的無力感~!

卡出翔的安裝

Mac 系統:然而筆者在自己的MacBook Pro上,同樣的操作,一切都沒問題,過一會兒(時間視插件大小而定)就安裝上了。(難道這就是蘋果這么貴的原因之一嗎?易用性!!!)

Mac 插件安裝成功--超省心

解決方法:重點來了,那么 Win 下如何安裝插件呢?

以下是筆者自己琢磨的方法,如有錯漏,歡迎大家補充

github搜索頁
  • 搜索自己想要的插件(一般右側的排列類型選擇【Most stars】 ,出來的結果中看到 **for atom **的字樣 基本就是了)
file icons 為例--棒棒的搜索結果
  • 進入插件的詳情頁,點綠色的Clone or download,選擇藍色的 Download ZIP
未標題-2.jpg
  • 將下載好的解壓到對應的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鏈接

        歡迎大家留言補充

        互相學習,共同進步

  1. atom-beautify

結構格式美化,自動縮進之類的
Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom

  1. atom-ternjs

js代碼智能提示補全
JavaScript code intelligence for atom withTern. Adds support for ES5, ES6, ES7, Node.js, jQuery, Angular and more.

  1. atom-autoprefixer

**添加css各瀏覽器前綴如-webkit-、-moz-等 **
Prefix CSS and SCSS with Autoprefixer

  1. color-picker

顏色選取器
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.

  1. emmet

html標簽補全

  1. file-icons

美化左側資源管理器里的文件圖標,算主題的一部分吧

  1. minimap

在右上角生產代碼全局預覽圖
Shows the code that's under the mouse cursor when hovering the minimap.

  1. open-in-browser

直接在編輯器內右鍵瀏覽器打開
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前端知識。
當然啦,你要是很喜歡,也可以點個贊 ,支持下我的首發文分享,萬分感謝。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容