Atom使用插件精選(FE)

Foreword

Atom琳琅滿目的插件中,不少插件參差不齊,根據個人實踐狀況,爲前端coder推薦一些實用的插件。css

  1. sync-settings

首先,這是一個配置備份插件,方便之後的遷移,配合gist實用快捷。html

  1. atom-beautify

使你的代碼一鍵格式化,支持多種語言,相對較全。前端

  1. autoclose-html

html代碼自動化閉合,更加便捷的寫div.vue

  1. autocomplete-paths

更加智能的補全你的資源路徑。jquery

  1. autoprefixer

爲CSS和SCSS增長瀏覽器前綴。git

  1. color-picker

在編輯器選擇你想要的顏色,找到顏色,點擊就OK.github

  1. docblockr

輔助編寫你的註釋,讓你愛上寫註釋。正則表達式

  1. elastic-tabstops

彈性製表符,適用於對於tab有強迫症的coder。gulp

  1. emmet

前端神器多年,前端必備,配合快捷鍵更個性化。瀏覽器

  1. file-icons

指定文件擴展名的圖標和顏色,改善視覺。

  1. git-control

提供了一個GUI界面來管理全部經常使用的git命令。(若是你不喜歡命令行)

  1. gulp-control

顯示gulp任務的列表,在atom裏實現GUI執行。

  1. highlight-selected

雙擊時高亮當前選擇的詞。

  1. jquery-snippets

支持jquery代碼編寫。

  1. language-vue

高亮顯示Vue代碼,支持Vue組件。

  1. linter-csslint

檢測你的CSS是否基本規範,減小你的錯誤,提升代碼質量。

  1. linter-eslint

看你上面的,我想你也瞭解這個是幹嗎的了。

  1. linter-sass-lint

若是你使用SASS/SCSS,這個檢測是必要的。

  1. minimap

一個完整源代碼的預覽,讓你看到代碼地圖。(不建議在一個文件裏寫很長的代碼)

  1. minimap-highlight-selected

在你代碼概覽地圖上高亮顯示你的選擇。

  1. open-in-browsers

你想在哪一個瀏覽器裏運行你的代碼,安裝這個吧。

  1. regex-railroad-diagram

若是你常常要寫正則表達式,這個插件能夠顯示光標下的正則表達式鐵路圖。

  1. simplified-chinese-menu

Atom 的簡體中文語言包,完整漢化,兼容全部已發佈版本 Atom。

  1. tree-view-git-status

樹形文件視圖中顯示Git存儲庫狀態。

  1. prettier-atom

An atom package for the prettier formatter.

Tips:

  1. 以前找了好久atom的自動保存插件,沒找到,原來騎驢找驢,在自帶的核心擴展裏面就有。autosave,把裏面的配置settings裏的"Enabled"勾選中,就能夠在當前編輯頁面失去焦點的時候自動保存。

  2. 在編輯器的核心包裏有line-ending-selector能夠定義你的換行類型。

  3. 這個連接是個人配置gist: GitHubGist(包含上面全部的插件,還有我本身的配置,能夠直接導入擴展)

  4. 若是你想更改atom-beautify裏的換行符,LF or CRLF ,see:

  • Retrieves the default line ending based upon the Atom configuration

  • line-ending-selector.defaultLineEnding. If the Atom configuration

  • indicates "OS Default", the process.platform is queried, returning

  • CRLF for Windows systems and LF for all other systems.

  • Code modified from atom/line-ending-selector

  • returns: The correct line-ending character sequence based upon the Atom

  • configuration, or null if the Atom line ending configuration was not

  • recognized.

  • see: line-ending

  • 在下面的路徑下修改你想要的:

  • packages\atom-beautify\src\beautifiers\js-beautify.coffee

    getDefaultLineEnding= ->
    switch atom.config.get('line-ending-selector.defaultLineEnding')
      when 'LF'
        return '\n'
      when 'CRLF'
        return '\r\n'
      when 'OS Default'
        return if process.platform is 'win32' then '\r\n' else '\n'
      else
        return null
    複製代碼
相關文章
相關標籤/搜索