Github atom IDE Plugin 簡介與使用心得

atom

atom a hackable text editor

  • GitHub 出品必屬佳作。
  • 內建 Package Control 與搜尋安裝介面。
  • 所有功能都是模組可以自訂 ( ex: 外觀可以透過 CSS 修改 )。

筆者原本使用 sublimeText 經社群朋友推薦使用 atom 進而 荼毒 推薦同事，因此本文件為共筆紀錄（nabi, ann）。

快速鍵

大部份的快速鍵都跟 sublimeText 差不多，這邊只列出不同或特殊的地方。

功能 windows Mac
設定面板 Ctrl + , command + ,
開發者工具 Ctrl + alt + I command + option + ,
向上移動 Line Ctrl + ↑ control + command + ↑
向下移動 Line Ctrl + ↓ control + command + ↓

Customized Style Setting

Atom is a desktop application built with HTML, JavaScript, CSS, and Node.js integration. It runs on Electron.

  1. 因此身為一個前端工程師改改 CSS 也是很正常的。
  2. 開啟 CSS 設定檔：ctrl + shift + p 輸入 Stylesheet
  3. 選擇：Open Your Stylesheet
  4. 開啟 style.less 檔案，此可以撰寫 CSS hack your atom。

編輯區中間那條白線好煩.. 移除 wrap guide

加入以下 CSS 語法：

1
2
3
4
5
.atom-text-editor::shadow {
    .wrap-guide {
        visibility: hidden;
    }
}

改變 results found page 的 path 顏色

修改以下 CSS 語法：

1
2
3
4
.preview-pane .results-view .path-name {
	/* show path */
	background-color: hsla(210, 60%, 40%, 0.5);
}

theme

設定路徑：settings -> 左邊選擇 theme

theme 在 setting 裡面分別可以設定兩種：第一種是整個 IDE 的外觀設定 theme - UI，另一種則是編輯器中的語法樣式設定: highlight，字型，大小等…

theme - Syntax

  • atom-monokai theme
    • monokai - sublimeText 預設樣式剛剛跳過來的朋友可以裝一下。

theme - UI

Editor Settings

  1. Show Indent Guide
    • 開啟編輯器輔助直線、對齊線
  2. Tab Length
    • 設定為 4 or 2 端看團隊 Code Style
    • sublimeText 預設 4。
  3. whitespace
  4. 關閉拼字檢查
    • 紅色虛線為 atom 拼字檢查 Plugin
    • 設定：Packages > spell-check > Toggle

Plugin

Language

  1. AngularJS
    • 提供 AngularJS 內建方法和變數的關鍵字，讓你輕鬆使用 AngularJS
  2. Markdown Preview
    • 直接在 atom 裡面預覽 Markdown 轉換後的樣式
    • 快速鍵：ctrl + shift + P 加上 ctrl + shift + M
    • 到 Setting > Use GitHub.com style 打勾 view 會變成 GitHub style 白色背景

React

  1. language-babel
    • JSX註解小幫手
  2. language-javascript-jsx
    • JSX語法高亮提示
  3. react
  4. trailing-spaces
    • Highlights trailing white space.

Support

  1. emmet
    • Zen Code
  2. autocomplete-paths (autocomplete 是一系列家族，還有各種功能)
    • 自動列出路徑下所有有資料夾與資料
  3. pigments
    • 色碼直接顯示
  4. color-picker
    • 右鍵叫出選單，可以直接選顏色、透明度
  5. atom-beautify
    • 一鍵 Beautify 所有格式
  6. Go To Line
    • Ctrl + G 跳到你想要的行數
  7. docblockr
    • 程式註解小幫手
    • \** + Tab
  8. javascript-snippets (snippets 是一系列家族，還有各種程式語言)
    • 自動產生 JS 對應語法或片段
  9. file-watcher
    • 監看 file 變動 reload atom
    • 嘗試解決 git discard file 後 atom 沒有同步改變內容。
    • 安裝後會提示你是不是要 reload 新的資料進 atom
  10. Highlight Line
    • 高亮游標在的那一行，幫助判斷游標位置
    • 好用
  11. Highlight Selected
    • 點兩下 word 會幫你 highlight 相同字串
    • 沒內建，必裝。
  12. drag-drop-text
    • 拖動 word 包含複製、移動、剪下功能
    • simple-drag-drop-text <- 這是簡易版
    • 沒內建，必裝。

View

  1. minimap
    • 在右側產生 sublimeText 的 “code 小地圖”
  2. symbols-tree-view
    • 在右邊幫你列出這支檔案所有的 class, function, var..
    • click can Scroll to !
    • 右鍵可以設定顯示類別 參考
    • 非常厲害！
  3. file-icons
    • 資料小圖顯示為 type 縮圖 icon
    • 漂亮必裝

Git

  1. git-plus
    • 在 atom 中操作 git 指令
  2. atomatigit
    • 可介面化操作git
  3. Git Log
    • 在 atom 中檢視 git Log
  4. Merge Conflicts
    • Git Merge Tool
    • list 衝突檔案
    • 利用顏色區塊分類本地檔案、遠端檔案

Other

  1. sync-settings
  2. Indent helper
    • 選取後依據 = or : 平均對齊

好玩的 Plugin

atom 使用兩週心得：

  • atom 好處
    1. 免費、開源、plugin 持續增加中。
    2. plugin 安裝介面非常好用。
    3. 不喜歡的樣式可以撰寫 CSS 語法自訂，非常酷。
    4. 與 sublimeText 相去不遠，沒有購買提示、沒有更新提示。
    5. plugin 非常新奇部分在 sublimeText 沒看過非常酷。
  • 待改進觀察..
    1. 有點 log
      • 有點 log
        • 有點 log
    2. 將分頁拉出來變成獨立視窗，這個動作我常使用..可是非常卡..
    3. 不小心點到壓縮過後的檔案..會跑很久..

atom 基本上還算是很年輕的編輯器，並且不斷的在強化當中，其中可以關注的像是它的開發工具 Electron. 基本上可以用前端技術打造桌上軟體了，非常厲害！至於效能的問題就持續關注 github 如果有更新版本就在裝看看，或者持續追蹤是否有其他開發者針對效能做調整、改善，後續再補充。

使用三週心得：大部份拿都拿撰寫 markdown 文件..:P 持續觀察中。