前端開發利器Deepin+Atom

原文地址：www.ctoku.com/post/RHPqj7…

這裏提及前端開發工具，主要是將更方便的開發方式分享給你們！ 由於工做須要及前輩的影響，讓我接觸到了Deepin Linux操做系統，搭載Atom開發工具，這對前端來講也是一個很大的挑戰，面臨這一個新的操做系統及摸不透的命令行。由於工做須要及前輩的影響，讓我接觸到了Deepin Linux操做系統，搭載Atom開發工具，這對前端來講也是一個很大的挑戰，面臨這一個新的操做系統及摸不透的命令行。 在師父(FungLeo)的帶領下進入了Linux世界，今後在開發的征程中獲得了很大的提高。

首先咱們來講說Deepin操做系統

deepin操做系統安裝是很是方便的，具體安裝方式請移步deepin官方文檔https://www.deepin.org/installation/

整個界面仍是十分美觀的，結合了Windows和Mac OS的一些優勢，默認Chrome瀏覽器，對於前端開發足以，除此以外，deepin系統自帶應用商店，安裝軟件簡單，也可使用Linux命令安裝。

ATOM

Atom 一個21世紀的一個黑客文本編輯器（是否是這樣只有本身試過才知道） 官方地址：atom.io/

deepin系統安裝

能夠直接在應用商店搜索安裝，這種方式比較廣泛，也很簡單

Linux命令行安裝

sudo add-apt-repository ppa:webupd8team/atom
sudo apt-get update
sudo apt-get install atom
複製代碼

Atom 配置

Atom 禁用「自動去掉行尾空格」

File -> Preferences -> type "whitespace" -> disable [Remove Trailing Whitespace].

去掉的緣由是，有些開源的庫是並無符合codestyle，可是那些也不是本身要改的，若是自行更改了會形成很多的麻煩。

好比之後合併時會至關麻煩。若是是一個自行開發的項目能夠這樣從新打開這個開關。

Atom修改Tab長度

File -> Preferences -> Settings -> Tab Length

(注：修改後原來的並不會跟着改變，須要手動改變一下，畢竟是用空格代替的Tab)

Atom 查件安裝

官網下載安裝atom軟件，官網傳送門連接 atom.io/

自動安裝插件

進入目錄file -> setting

手動安裝

必要條件：安裝git,node

cd ~/.atom/packages/
git clone <插件的git地址> # 好比：git clone https://github.com/Glavin001/atom-beautify.git
cd <包名> # cd atom-beautify
npm install
複製代碼

推薦幾款經常使用包

（1）atom-ternjs : js(e6)的自動補充

（2）key-binding-mode : atom 快捷鍵管理

（3）pre-view ： pdf預覽

（4）activate-power-mode : 相信不少人開始用atom是由於看了關於這個超級炫酷的動畫來的，它讓你敲代碼的時候產生炫酷效果，＝＝ 然而對於程序媛來講病並無用 只適合娛樂和在外行前裝bi

（5）color-picker : 可像chorme裏面同樣，直接吸收顏色的色值，寫css的時候不錯

（6）language-todotxt : 通常po主用來看小說（開始的時候用sublime，小說能夠直接拖進去，可是用了atom之後，txt不被識別，因此纔去找了插件）

（7）pigments : 它和（5）多是姐妹吧，在atom裏面全部顏色的色值，它會自動加上背景色，因此是顏色的地方一看就知道是什麼sai

（8）atom-beautify : 支持html,css,js,php...等的格式美化

（9）emmet ： 這個對於寫html來講的必不可少,鏈上一個語法傳送門 docs.emmet.io/cheat-sheet…

（10）markdown-format : 支持.md文件在atom裏的預覽

（11）file-type-icons : 對於寫代碼來講其實用處也不大，就是在atom的目錄裏面給不一樣文件添上特點圖標，不過細節決定品質

（12）mini-map : 代碼的小地圖，和sublime沒什麼區別