我的前端故事----優美的編輯器GitHub Atom


       很多前端的同學都在用sublime text,我之前也在使用,但是后來接觸到了Atom,就被它的高顏值深深的吸引了~~不愧是GitHub的工程師哦~審美就是高  Atom

       作為一個跨平台的編輯軟件,安裝和使用都是十分的方便,剛剛接觸的同學也很容易在上面找到sublime text的影子,這非常方便像我這樣的人搬過來,那么最基礎我就不介紹了,今天這篇就給剛剛接觸Atom的同學帶來一些常用的插件,你會發現,原來Atom可以變得更美麗~~

插件篇

效果可在插件首頁中查看

       atom-beautify:這是個美化代碼的插件,幾乎支持所有主流的語言,完全可以滿足前端同學的使用。

       autocomplete-paths:常用IDE的同學會常常在引入圖片的時候發現只要輸入 . 或者/ 或者文件夾名稱的時候就會自動顯示出文件夾中的內容,非常的實用,強烈推薦。

       autoprefixer:很多前端的同學在寫css樣式的時候常常忘記了添加兼容性前綴,例如-webkit-等內容,所以在寫完css之后只需要這個插件就可以自動的幫你添加好所有需要的兼容性前綴。

       color-picker: 作為一個有審美的設計向前端,常常需要確認自己的顏色屬性是否是完美的,那么就需要這個插件,你就可以在任何一種顏色屬性上看到一個完整的取色器。

       docblockr: 我們不僅僅要寫代碼,還要養成寫好注釋的習慣,而經常看開源框架的同學會發現那些大神的代碼前都會有一段完美的注釋,寫清了所有的參數和使用方式,你會覺得大神不僅僅代碼專業,態度也是非常的認真,其實,有了這個插件,你僅僅需要一個tab鍵就可以寫出一樣專業的注釋!強烈推薦!!!

       emmet:用sublime text的同學都知道這個插件,我這里就不多說了。

       file-icons:你不覺得每一個文件前面都要有個漂亮的圖標嘛~沒錯,你就需要它!

       grunt-runner:作為一個前端,grunt相信大家都聽說過,因為這個插件你就可以直接在編輯器里面操作你的grunt任務了。

       git-plus:雖然原生的Atom就支持了git命令,但是這個插件會讓你更加喜歡在Atom中使用git,這非常方便在Windows上使用git的同學。

       linter:你覺得你的代碼寫的很不專業嗎?這個插件會自動提示你代碼中不規范的地方,如果你希望得到更完整的提示的話可以嘗試更加詳細的系列,例如linter-jshint

       markdown-formatmarkdown-writer:如果你不是Mac用戶,並且十分喜歡使用markdown來寫東西的話,那么你一定會愛上在Atom上寫markdown的感覺~~

       minimap:用過sublime text的同學一定知道右邊那方便的縮略圖,難道這么好用的工具Atom上會沒有嗎?不會!這個插件就會讓你見到熟悉的縮略圖,那么為什么要用插件呢?因為這個插件可以繼續安裝插件!你會發現一個真正強大的縮!略!圖!

package

說明

minimap-codeglance

用過Webstrom的同學都會記得有個代碼放大鏡的功能,這個插件就會讓你的鼠標移動到縮略圖上的時候放大顯示那邊部分的代碼

minimap-find-and-replace

當你想替換單詞的時候你會想起ctrl+D,可以你知道全篇有多少你要替換的字符串嗎?通過這個插件你就可以在縮略圖上看到所有你選中的字符串

minimap-git-diff

通過這個插件,每當你修改你的代碼的時候你就會在縮略圖上看到和之前git中的區別

minimap-highlight-selected

當你選中部分代碼的時候,它就會高亮的出現在縮略圖中

minimap-linter

這個插件讓你的縮略圖顯示的更加漂亮和完整

apm install

說了這么多,我們如何給縮略圖安裝插件呢?通過這個命令就可以在命令行中下載安裝你需要的縮略圖插件了

      project-manager:做完一個前端狗,我相信你開發的不僅僅只有一個項目吧~那么你就需要這個插件來在一個Atom中管理你所有的項目。

      javascript-snippets:這個插件也是我強烈推薦的!!!你以為只有html才有Emmet嗎?太年輕了你!這個插件會告訴你javascrpt也有Emmet一樣的插件!只需要輸入幾個字母,一個tab就讓你完成了一長串的代碼!!

      expose:當你一次性打開多個文件的時候也許你會使用分屏來查看,但是我相信你的屏幕不會大到讓你無限的分屏,那么就需要在多個文件中切換,或者是查看多個文件,那么你可以點擊最上邊的標簽,那有沒有更方便的呢?有的!!那就是這個插件,shift+atl+e,就是這個效果:

12

就問你!美!不!美!

       vim-mode:如果你是個忠誠的vim黨,我相信這個插件你一定會喜歡的!

主題篇

       雖然原生的Atom就很漂亮了,但是既然Atom那么注重插件,主題用插件也是很常見的,在這里我就推薦我一直使用和十分推薦的一個主題,atom-material-ui,為什么我還要用這個插件呢?因為這個插件不僅僅配色很好看,更重要的是它有很多的動畫,讓你的編輯器更加生動,你會更喜歡它的,每天打碼的心情都會好很多哦~

      但是有個注意的地方,如果你使用了酷炫的expose插件的話,需要在主題的插件中將

19這里關閉,否則expose插件不會出現那么酷炫的效果。

結束

       今天就到這里了,最后上一張我目前編輯器的全家福~雖然費力幾天的時間去調配自己喜歡的編輯器,但是我就是喜歡折騰這個漂亮的編輯器,每天打碼都看着這個漂亮的家伙~不僅僅心情愉悅~打碼的效率都高了~2333~~

        <( ̄▽ ̄)>

31


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM