介紹一些適用於 Web 開發者的 Atom 編輯器插件


Atom 的社區很繁榮,有着豐富的擴展/插件(packages)。安裝 Atom 的 Package 非常簡單,可以在編輯器的偏好設置里面安裝,也可以在命令行中使用 apm 命令來安裝。

在介紹適用於 WEB 開發的 Package 之前,讓我們快速過下如何安裝 Atom Packages。

 

安裝 Atom Package

 

通過偏好設置安裝 Package

使用快捷鍵 command + ,/ctrl + , 打開偏好設置。點擊左側的 Install 即可瀏覽線上的 Package 。 頂部是一個搜索框,可以搜索已經發布在 atom.io 上的 Package ;緊接着是 Feature Packages,即精選的 Package ,列出來的是一些比較優質的 Package 。

Install atom packages

Install atom packages

通過 apm 命令安裝 Package

Atom 自帶了一個 apm 的 Package 管理工具。我們可以在命令行下執行以下命令來確認 apm 是否已經安裝:

  1. apm help install

命令之后應該輸出 apm install 的詳細信息。如果輸出不是 apm install 的命令信息,打開 Atom 菜單,選擇 Install Shell Commands 來安裝 apm 。

確認 apm 正確安裝后,便可以開始安裝 Package 。正如上述執行 apm help install 所提示的,安裝的命令是:

  1. apm install [<package_name>...]
  2. apm install <package_name>@<package_version>
  3. apm install --packages-filemy-packages.txt

 

Package 推薦

 

快捷輸入類

  • autocomplete-plus,當輸入的時候,提供可能的候選項。

    autocomplete plus

    autocomplete plus

  • atom-ctags,使用 ctags 來強化自動完成功能,需借助於 autocomplete-plus
  • javascript-snippets,顧名思義,輸入特殊的字符后自動擴展成對應的 Javascript 代碼片段。

    javascript-snippets

    javascript-snippets

  • vim-mode

    VIM-Mode 支持在 Atom 中使用 VIM 編輯器的操作方式來編輯。這對我來說是個非常 Killer 的 Package ,在此之前我一直在 WebStorm 上通過一個插件模擬 VIM 操作,異常難用。而在 Atom 上的這個模擬VIM操作,使用起來感覺還是比較順手的。你可以混合 VIM 操作和普通的編輯操作。

  • emmet

    手寫 HTML 多少顯得專業,但是手寫的問題在於得大量的代碼。Emmet大幅提升手寫的效率。非常值得一裝。

  • go-to-line,跳轉到指定的行,只要 ctrl + g 后輸入行號即可。

 

Linters

  • jshint,驗證你的 JavaScript ,寫更專業的 JavaScript 代碼。

    JSHint

    JSHint

  • csslint, CSSLint 會報告出不合規定的 CSS 規則。

    CSSLint

    CSSLint

 

版本控制類

  • git plus,在 Atom 里面執行 Git 命令,不用來回切換終端和編輯器。

    git plug

    git plug

  • git-log,在 Atom 里面顯示圖形化的提交記錄。

 

輔助類

    • minimap,為 Atom 加上 Sublime Text 的源碼預覽圖,提供豐富的自定義選項,值得一用。

      Mini Map

      Mini Map

    • file-icons,顯示文件類型對應的圖標。
  • atom-beautify,格式化代碼,更統一的代碼風格。
  • Color Picker
  • 在編輯器里面挑選顏色。通過右鍵選擇 Color picker ,或者 cmd + shift + c/ctrl + alt + c 快捷鍵調出顏色選擇面板。支持 HEX, HEXA, RGB, RGBA, HSL, HSLA 形式指定的顏色值。
  • csscombCSSComb 的一個擴展工具, CSSComb 幫你寫出更漂亮的 CSS !
  • autoprefixerAutoPrefix的一個擴展工具,自動為 CSS 屬性添加特定的前綴。
  • localization,國際化 Package ,支持簡體中文。但是在我使用的版本 0.179.0 中無法使用。


免責聲明!

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



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