大家好,我是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前端知識。
當然啦,你要是很喜歡,也可以點個贊 ,支持下我的首發文分享,萬分感謝。