[React速成班]有錢沒錢,選個編輯器好過年(2)-用Visual Studio Code開發React支援Highlight, IntelliSense]

要讓Visual Studio Code開發React的語法highlight不要亂掉,只需要把.js檔改為.jsx檔即可,不過大部分React的範例還是會用.js檔來完成,這樣會造成我們在閱讀別人程式碼時的不便,所以今天就來介紹一下如何用Visual Studio Code開發React時可以在.js檔內開發JSX也不會造成highlight的問題,另外也介紹一下如何讓Visual Studio Code支援React的intellisense

讓.js檔支援JSX highlight

要讓Visual Studio Code在.js檔中支援JSX其實很簡單,安裝一個js-is-jsx外掛即可:

  1. 首先打開Visual Studio Code後按下F1,輸入ext,然後選擇Extensions: Install Extension

  2. 接著輸入js-is-jsx,按下Enter

  3. 重新開啟Visual Studio Code

這時候打開包含JSX的.js檔就可以看到highlight不會亂掉啦!

讓Visual Studio Code支援React的IntelliSense

要在Visual Studio中使用React的IntelliSense設定比較複雜一點,接下來就來解說這些步驟…

啟用Salsa功能

2016/0316 updated: Visual Studio Code的February updated中已經預設以使用Salsa作為編輯JavaScript的處理服務了,所以不用再執行啟用Salsa的功能囉。可以直接往下看安裝TypeScript和typings的動作。

Salsa是Visual Studio Code強化TypeScript與JavaScript的一項功能,不過目前正在preview中,所以要啟用Salsa,必須做一些比較麻煩的設定:

設定系統變數

  1. 在我的電腦按右鍵->內容
  2. 在進階分頁點擊「環境變數」
  3. 點擊「系統變數」下的「新增」按鈕
  4. 變數名稱輸入:VSCODE_TSJS;變數值輸入:1
  5. 確定

安裝TypeScript

打開Node.js指令列,切換到專案目錄下,輸入以下指令

1
npm install [email protected]

確認Salsa啟用

重新啟動Visual Studio Code,隨便打開一個.js檔,可以看到右下角的狀態列,如果是出現橘色的(Salsa !),代表沒有成功

如果出現白色的(Salsa)就成功啟用Salsa啦!

加入tsconfig.json

請用Salsa後,接著在專案的跟目錄加上一個tsconfig.json檔案,並加入以下內容,告知Visual Studio Code在目前專案處理JavaScript的方法:

1
2
3
4
5
6
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs"
}
}

安裝typings

2016/09/18 updated: TypeScript 即將推出,屆時將不需要使用typings,而是將所有定義檔交由npm管理,但還不是正式版不確定會來發展會如何,所以這裡先不介紹

接著使用npm安裝typings,typings是另外一隻命令列的程式,可以幫助你尋找並安裝TypeScript的定義檔,雖然我們沒有要用TypeScript開發程式,但Visual Studio Code依然可以透過TypeScript的定義檔,來完成JavScript內IntelliSense的功能

1
npm install -g typings

利用typings安裝IntelliSense定義檔

安裝完typings後,切換到專案的資料夾,利用typings安裝react-global跟react的定義檔

1
2
typings install react-global --ambient
typings install react --ambient

就算是大功告成啦!

在檔案中輸入React時,就可以看到IntelliSense的結果

在React compoment內的lifecycle api也照常顯示!

單元回顧

本篇介紹了讓Visual Studio Code支援React開發的一些設定方法,設定完只能說句Visual Studio Code好棒棒啊XD