EddyChang

Atom打造開發React的環境 - 簡介與套件

Eddy標籤: JavaScript, React, Atom點擊數: 10494
View Comments

前言

本文說明了使用Atom打造開發React時使用的開發工具。Atom需要安裝不少套件才能使用，它並不是一個軟體就完全滿足所有需求的軟體，本文的目的是提供一些安裝與設定的經驗。另外，某些套件也需要進一步設定，尤其是某些特殊使用的軟體，需要另外搭配Node.js才能正常使用。

Atom說明

以下針對1.10版本已測試過。套件列表 atom-packages-list 於2016/10/1更新。

核心

Atom是使用Github所主導的Electron專案所開發出來的跨平台泛用程式碼編輯軟體(實際Electron最早是從Atom中獨立出來的)，基於Chromium(V8)與Node.js兩大技術，你可以把它當成裡面有個瀏覽器+網站伺服器的應用程式。開發Atom的程式語言是CoffeeScript與JavaScript。設定檔主要的格式是CoffeeScript Object Notation(CSON)，類似JSON的格式。

Atom是一個開放原始碼程式，意思是說它是完全可以免費使用的。從最早發佈至今約有二年多，目前已逐漸穩定與成熟，適合用於各種程式語言的開發，尤其是JavaScript或類似超集的程式語言如CoffeeScript、TypeScript等。Atom在其他語言上的支援性也相當好。Atom內建許多基本套件，除了針對各種不同語言的自動完成或語法顏色顯示外，也內建對Git的支援。

Atom內附一個Shell命令工具 - apm，它實際上是一個包裝npm的程式，不過是專門用在Atom的套件管理，全名為Atom Package Manager。可以用選單"Install Shell Commands"進行安裝，apm主要針對套件的搜尋、安裝、移除等工作，可以提供另一種更為簡便的管理方式。使用apm時最好先關閉Atom，以免互相影響。

專案(Project)

Atom中的專案是統一記錄在Atom的projects.cson，這個檔案是位於電腦中使用者的個人資料夾中的.atom/目錄裡，專案可以直接用選單的"Add Project Folder"加入資料夾目錄，儲存後就會記錄在projects.cson檔中。不論是加入的目前位置，或是設定只能在這個檔案中編輯，它有一定的編輯規則，請參考project-manager套件裡的說明，使用project-manager套件管理專案會比較容易。

不同專案對Atom來說就是不同的視窗，雖然使用的安裝套件都是一樣的，但可以針對不同專案中的套件開啟、關閉，或是套用不同的設定值。除了功能性的套件(package)外，另外有一類的套件是針對外觀與語法顏色所設計的，稱為主題(theme)。

註: Sublime Text3是每個專案有自己的定義檔案，這點相當不同

eslint設定

eslint經多次改版，因為要要搭配Atom，最好先在全域中安裝，它可以變成預設的eslint設定檔案:

npm install -g eslint
eslint --init

eslint --init有可能會發生錯誤，我的解決方式是直接在個人資料夾根目錄裝一整套eslint、babel-eslint、eslint-plugin-react，像下面這樣，npm init會幫你產生一個package.json檔，一直按Enter鍵就行了。

npm init
npm install eslint babel-eslint eslint-plugin-react --save-dev
eslint --init

或是按照Displaying Lint Output in the Editor所說的裝到全域中，linter-eslint外掛還要再設定一下。

npm install -g eslint babel-eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype

這樣基本上eslint在使用時不會有錯誤訊息。如果專案目錄裡有個別的.eslintrc檔案，它會使用專案裡的設定檔內容。

atom-ternjs設定

Atom Ternjs是延伸自Tern的套件，Tern本身是一個獨立的程式碼分析引擎，這個套件可以提供更佳的程式碼智慧型自動完成功能，這個對於程式碼撰寫有大的幫助，建議一定要使用。

當在新增一個專案時加入至少一個根目錄，直接使用選單 Packages-> Atom Ternjs -> Configure project，是絕對沒辦法直接設定的，會出現像下面的警告訊息:

There is no active project. Please re-open or focus at least one JavaScript file of the project to configure.

解決方式是要先儲存這個專案，然後重開一次Atom，載入專案後再重新設定一次Ternjs，一定要看到右邊有出現這個設定畫面，"Save & Restart Sever"才算真正設定完成，設定完成時會在專案根目錄產生一個.tern-project檔案。

atom-ternjs config

如果沒辦法設定完成，也可以先新增這個.tern-project檔案(用下面的範例內容)，不過設定過程仍然是必要的，單純新增這個檔案並不會讓設定自動完成，這點是要注意的。第一次設定完成後，之後就可以繼續使用，不需要再重覆這個過程。

{
  "ecmaVersion": 6,
  "libs": [
    "browser",
    "jquery"
  ],
  "loadEagerly": [
    "src/*.js"
  ],
  "dontLoad": [
    "build/*.js"
  ],
  "plugins": {
    "complete_strings": {},
    "node": {},
    "angular": {},
    "requirejs": {},
    "modules": {},
    "es_modules": {},
    "doc_comment": {
      "fullDocs": true
    }
  }
}

註: 如果你一直無法設定成功、沒作用或出現錯誤，有可能是你用了太新的版本，請降級到0.14.2版本，先關閉Atom，然後輸入以下指令:

apm rm atom-ternjs

apm install Email住址會使用灌水程式保護機制。你需要啟動Javascript才能觀看它.2

讓emmet支援JSX自動用tab鍵完成

這個設定的方法來自這裡

在選單"Atom" -> "Keymap"打開keymap.cson檔案，最下方空一行加入以下的設定值:

'atom-text-editor[data-grammar~="jsx"]:not([mini])':
  'tab': 'emmet:expand-abbreviation-with-tab'

套件安裝

套件安裝有好幾種方式，目前查到可以批次安裝的方式如下。

註: 有些套件如果你一直裝不上、裝上沒作用、有錯誤訊息等等，請先停用，然後移除再降級看看。另外，套件不需要急著升級，有時候一升級套件就壞了，雖然這種情況很少見。

安裝星星評分套件

到Atom.io先註冊帳號或登入，然後對要安裝的套件先作星星評分，用apm工具的指令可以安裝你評過星星的套件，這種方式有點不太切實際。如果你有很多美國時間可以試試:

apm star --installed

使用套件清單檔案批次安裝

直接用apm以下的指令產生一個套件列表清單檔案，我個人覺得這種方式比較合理:

apm list --installed --bare > package-list.txt

然後到要安裝的另一台電腦中，先裝好Atom與apm工具，執行以下的指令進行批次安裝:

apm install --packages-file package-list.txt

下面的通用套件與React所需的套件，我已經產生出幾個套件列表 atom-packages-list 可以下載。記得要用apm工具來安裝，需要一點時間，安裝時先關閉Atom。整個套件全部裝完需要500MB左右。

使用sync-settings套件

這套件有備份Atom中設定與安裝套件清單的功能，不過要求你要先註冊一個Github帳號與建立一個Gist檔，這機制只能用在個人的帳號，無法分享給其他人使用。

如果你已經有Github帳號，是可以用它來作日常的備份。

通用的套件

套件的說明請參考Packages網頁。

  • atom-beautify: 程式碼漂亮格式化工具
  • autoclose-html: 自動加上關閉標記在html碼中
  • autocomplete-paths: 自動完成輸入路徑
  • cht-menu: 繁體中文化選單與選項說明
  • color-picker: 顏色選擇工具
  • emmet: 使用簡碼快速編輯html的工具，支援JSX
  • file-icons: 以不同的圖示顯示不同檔案
  • highlight-selected: 高亮度顯示選中字詞與相同字詞
  • hyperclick: 可以參照不同檔案跳到定義處或顯示說明。可搭配js-hyperclick或hyperclick-php使用
  • minimap-highlight-selected: 小地圖中顯示選中字詞
  • minimap: 程式碼對映小地圖
  • open-recent: 開啟最近編輯的檔案
  • Pigments: 顯示程式碼中顏色標記的顏色
  • pretty-json: 格式化JSON
  • project-manager: 專案管理協助套件
  • sort-lines: 按照英文字元開頭排序
  • symbols-view: 顯示目前程式碼中的函式/方法，快捷鍵cmd-r
  • sync-settings: 使用Github Gists來同步化套件安裝與設定(需參考文件進行設定，要有Github帳號，套件裝完再開始同步。從套件列表中移出，有需要請再另外安裝)
  • tab-control: 控制tab與space的工具
  • terminal-plus: 終端機工具(顯示於編輯器下方，這個套件似乎在Windows平台上裝不上去，從套件列表中移出，有需要請再另外安裝)
  • todo-show: 顯示專案程式碼中TODO/FIXME等

React用套件

  • atom-ternjs: 智慧型自動完成工具，注意每個專案都要先重設一次。
  • language-babel: 針對babel、JSX & Flow等語法設計的工具。
  • linter-eslint: eslint工具套件，需要先裝linter套件。另外需要裝eslint在你的專案中。可以用eslint-init在個人資料夾中建立一個預設使用值。
  • linter: linter基礎工具套件

注意: react: 會與language-babel衝突，language-babel是比較新的套件

  • nuclide: facebook出的套件整合包，裡面附加的功能很多，不只是針對JS開發，需要另外安裝約10個套件。建議你對Atom的使用熟悉後再來使用。

Markdown用套件

  • markdown-pdf: 轉換markdown為pdf、png或jpeg
  • markdown-scroll-sync: 自動捲動對應預覽與目前的編輯區
  • markdown-toc: 產生markdown檔案中的目錄
  • markdown-writer: 各種方便編輯的工具

其他建議設定

  • 內建套件 - autosave: enable

autosave

  • 設定 - Back Up before Saving(自動備份): enable

backup