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


前言

本文說明了使用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