atom編輯器社區插件推薦

本文轉載自查看原文 2016-01-12 19:09 23335 javascript

atom是github出品的文本編輯器，為開發者又提供了一款易用、牛逼的文本編譯器。在開始接觸前端並從工作開始一直用webstrom來進行前端開發，開始使用時，被他各種強大神奇的功能給折服：支持zen-coding、文件可以跟指定的類型關聯、版本管理、文件查找等等，到現在我還是覺得他對我的開發效率有很大的提升。但是他重了，依賴了大量的包。導致后面高版本對硬件的要求越來越高，一般的機子都能卡半天。看圖說話：

尼瑪，mac配置算高了吧，但是就是這樣在用webstrom10還是卡，卡，卡。被迫無奈，據說atom挺火，就嘗試用了下，給我最大的感覺就是用着清爽，依賴github強大的社區，基於atom的插件也特別豐富，按需安裝；基本滿足我開發需求。話說回來，atom文本編輯器具體的優勢在哪里，通過官網可以看到：

跨平台支持，支持windows、linux、mac
內置了atom自己的包管理。我們可以根據需要自己來安裝需要的插件，如需要linter-jshint，可以使用其提供的apm命令，也可以在atom編輯器里安裝插件，插件都會被安裝到.atom文件的packages
```
apm install linter-jshint
```
文件系統瀏覽。可以在atom編輯器窗口中同時打開一單個文件、一個工程文件或者多個工程的文件
強大的社區支持，背靠github社區,可以提供大量基於atom插件（個人的觀點）

好了，言歸正傳，atom在安裝之后會默認自帶了一些github核心的插件，有些的插件功能是很好用的如autocomplete-plus，這些插件是不可卸載的，只能禁用；顯然這些插件不會囊括開發者涉及到的方方面面，所以剩下的就留給github社區來提供；下面推薦一下本人所裝的atom社區插件（以下有些插件的圖片來自於參考文獻的圖片）

1、emmet

這款插件是用來支持zend-coding，Emmet的前身是大名鼎鼎的Zen coding，如果你從事Web前端開發的話，對該插件一定不會陌生。它使用仿CSS選擇器的語法來生成代碼，大大提高了HTML/CSS代碼編寫的速度

    type this:
    ul.list>li.item${val-$$}*3

    get this:
    <ul class="list">
        <li class="item1">val-01</li>
        <li class="item2">val-02</li>
        <li class="item3">val-03</li>
    </ul>

2、linter-jshint

該插件是用jshint來檢查代碼，想必大家都聽說過jshint代碼檢查工具，它有一個配置文件.jshintrc，這個文件告訴jshint執行的檢查規則。通過jshint能發現代碼中存在的問題，可以及時避免bug的發生。linter-jshint插件基於atom規則來使用jshint，該插件可以在項目根目錄下新建一個.jshintrc來告訴檢查規則，也可以不用創建此文件來進行代碼檢查。
注意：linter-jshint是依賴linter插件來使用的，也就是說必須先安裝linter插件；因為linter是一個粗糙的檢查，有很多針對專門項的代碼檢查，如linter-csslint、linter-php等等