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

       不少前端的同窗都在用sublime text,我以前也在使用,可是後來接觸到了Atom,就被它的高顏值深深的吸引了~~不愧是GitHub的工程師哦~審美就是高  Atomjavascript

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

插件篇

效果可在插件首頁中查看

       atom-beautify:這是個美化代碼的插件,幾乎支持全部主流的語言,徹底能夠知足前端同窗的使用。html

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

       autoprefixer:不少前端的同窗在寫css樣式的時候經常忘記了添加兼容性前綴,例如-webkit-等內容,因此在寫完css以後只須要這個插件就能夠自動的幫你添加好全部須要的兼容性前綴。java

       color-picker: 做爲一個有審美的設計向前端,經常須要確認本身的顏色屬性是不是完美的,那麼就須要這個插件,你就能夠在任何一種顏色屬性上看到一個完整的取色器。git

       docblockr: 咱們不只僅要寫代碼,還要養成寫好註釋的習慣,而常常看開源框架的同窗會發現那些大神的代碼前都會有一段完美的註釋,寫清了全部的參數和使用方式,你會以爲大神不只僅代碼專業,態度也是很是的認真,其實,有了這個插件,你僅僅須要一個tab鍵就能夠寫出同樣專業的註釋!強烈推薦!!!web

       emmet:用sublime text的同窗都知道這個插件,我這裏就很少說了。vim

       file-icons:你不以爲每個文件前面都要有個漂亮的圖標嘛~沒錯,你就須要它!markdown

       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

相關文章
相關標籤/搜索