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檔案。
如果沒辦法設定完成,也可以先新增這個.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
- 設定 - Back Up before Saving(自動備份): enable