Atom使用外掛精選(FE)

AlenQi發表於2018-02-12

Foreword

Atom琳琅滿目的外掛中，很多外掛良莠不齊，根據我的實踐情況，為前端coder推薦一些實用的外掛。

  1. sync-settings

首先，這是一個配置備份外掛，方便以後的遷移，配合gist實用快捷。

  1. atom-beautify

使你的程式碼一鍵格式化，支援多種語言，相對較全。

  1. autoclose-html

html程式碼自動化閉合，更加便捷的寫div.

  1. autocomplete-paths

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

  1. autoprefixer

為CSS和SCSS增加瀏覽器字首。

  1. color-picker

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

  1. docblockr

輔助編寫你的註釋，讓你愛上寫註釋。

  1. elastic-tabstops

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

  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
複製程式碼

相關文章