介紹一些適用於 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

經過 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

• atom-ctags，使用 ctags 來強化自動完成功能，需藉助於 autocomplete-plus。

• javascript-snippets，顧名思義，輸入特殊的字符後自動擴展成對應的 Javascript 代碼片斷。

  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

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

  CSSLint

 

版本控制類

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

  git plug

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

• merge-conflicts，在 Atom 裏面處理合併產生衝突的文件。

 

輔助類

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

  Mini Map

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