適用於WEB開發者的Atom編輯器Package

這個週末試用 GitHub 的 Atom 編輯器編寫一個WEB項目，感受很是好用。 Atom 的社區很繁榮，有着豐富的擴展/插件（packages）。安裝 Atom 的 Package 很是簡單，能夠在編輯器的偏好設置裏面安裝，也能夠在命令行中使用 apm 命令來安裝。

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

安裝 Atom Package

經過偏好設置安裝 Package

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

經過 apm 命令安裝 Package

Atom 自帶了一個 apm 的 Package 管理工具。咱們能夠在命令行下執行如下命令來確認 apm 是否已經安裝：

apm help install

命令以後應該輸出 apm install 的詳細信息。若是輸出不是 apm install 的命令信息，打開 Atom 菜單，選擇 Install Shell Commands 來安裝 atom 和 apm 。

確認 apm 正確安裝後，即可以開始安裝 Package 。正如上述執行 apm help install 所提示的，安裝的命令是：

apm install [<package_name>...]
apm install <package_name>@<package_version>
apm install --packages-file my-packages.txt

Package 推薦

快捷輸入類

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

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

• 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 代碼。

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

版本控制類

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

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

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

輔助類

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

• 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 中沒法使用。

---

原始出處：IIssNan's Notes - 適用於WEB開發者的Atom編輯器Package