Java開發(fā)平臺IntelliJ IDEA教程：與React集成（下）

IntelliJ IDEA是Java語言開發(fā)的集成環(huán)境，IntelliJ在業(yè)界被公認(rèn)為優(yōu)秀的Java開發(fā)工具之一，尤其在智能代碼助手、代碼自動提示、重構(gòu)、J2EE支持、Ant、JUnit、CVS整合、代碼審查、 創(chuàng)新的GUI設(shè)計等方面的功能可以說是超常的。

 IntelliJ IDEA現(xiàn)已更新至2019.2版本，新版本改進(jìn)了java13預(yù)覽等20余項功能，提高了開發(fā)效率，趕快下載體驗吧~（點擊查看更新詳情）

點擊下載IntelliJ IDEA最新試用版

• Java開發(fā)平臺IntelliJ IDEA教程：與React集成（上）

• Java開發(fā)平臺IntelliJ IDEA教程：與React集成（中）

**僅Ultimate Edition 支持此功能。

整理一個React應(yīng)用程序

所有針對JavaScript和HTML 的IntelliJ IDEA內(nèi)置代碼檢查都可以在JSX代碼中使用。IntelliJ IDEA會在變量和函數(shù)未使用，缺少結(jié)束標(biāo)記，缺少語句等情況下提醒您：

對于某些檢查，IntelliJ IDEA提供了快速修復(fù)，例如，建議添加缺少的方法。要查看快速修復(fù)彈出窗口，請按Alt+Enter。

要自定義檢查清單，請打開 該 編輯器| IntelliJ IDEA設(shè)置的“ 檢查”頁面 Ctrl+Alt+S，并禁用您不想查看的檢查或更改其嚴(yán)重性級別。

使用ESLint

除了提供內(nèi)置的代碼檢查之外，IntelliJ IDEA還與linters集成在一起，例如用于JSX代碼的ESLint。 ESLint帶來了各種各樣的整理規(guī)則，這些規(guī)則也可以通過插件進(jìn)行擴展。鍵入時，IntelliJ IDEA會在編輯器中立即顯示ESLint報告的警告和錯誤。借助ESLint，您還可以使用JavaScript標(biāo)準(zhǔn)樣式。

為了讓ESLint正確理解React JSX語法，您需要eslint-plugin-react。使用此插件，例如，當(dāng)未為React組件設(shè)置顯示名稱或使用了某些危險的JSX屬性時，系統(tǒng)會警告您：

如果您使用create-react-app創(chuàng)建了應(yīng)用程序，則您的開發(fā)環(huán)境已經(jīng)預(yù)先配置為使用ESLint。

在IntelliJ IDEA中開始使用ESLint

1. 在內(nèi)置終端（視圖|工具窗口|終端）中，鍵入npm install --save-dev eslint 和npm install --save-dev eslint-plugin-react。

2. 將ESLint配置文件.eslintrc添加到您的項目。

3. 在“ 設(shè)置/首選項”對話框（Ctrl+Alt+S）中，轉(zhuǎn)到“ 語言和框架” | JavaScript | 代碼質(zhì)量工具| ESLint。在打開的ESLint頁面上，選擇自動ESLint配置。IntelliJ IDEA會自動在項目的node_modules文件夾中找到ESLint ，然后默認(rèn)使用.eslintrc配置。

您還可以手動配置ESLint以使用自定義ESLint軟件包和配置。

.eslintrc結(jié)構(gòu)示例（帶有react插件的ESLint 1.x）

• 在ecmaFeatures對象中，添加"jsx" = true。您還可以在此處指定要使用的其他語言功能，例如ES6類，模塊等。

• 在plugins對象中，添加react。

• 在該rules對象中，您可以列出 要啟用的ESLint內(nèi)置規(guī)則以及可通過react plugin可用的規(guī)則。

{
   "parser": "babel-eslint",
  
   "env": {
    
   "browser": true
  
    },
  "ecmaFeatures": {
    
    "jsx": true
  
    },
  "plugins": [
   
     "react"
  ],
  
     "rules": { 
     "semi": 2 
     }
}

重構(gòu)一個作出反應(yīng)的應(yīng)用

除了常見的IntelliJ IDEA重構(gòu)之外，在React應(yīng)用程序中，您還可以為React組件運行Rename并使用Extract Component 創(chuàng)建新組件。

重命名組件

在npm工具窗口（“ 視圖” |“工具窗口” |“ npm”）中，雙擊start任務(wù)。

WebPack熱模塊的更換，開發(fā)服務(wù)器運行時，應(yīng)用程序就會自動為你改變?nèi)魏蔚脑次募⒈４娓轮匦录虞d。

要調(diào)試應(yīng)用程序做出反應(yīng)

1、雙擊npm工具窗口中的啟動任務(wù) ，以開發(fā)模式啟動應(yīng)用程序。

2、等待應(yīng)用程序被編譯并且Webpack開發(fā)服務(wù)器準(zhǔn)備就緒。在http：// localhost：3000 /中打開瀏覽器 以查看該應(yīng)用程序。

3、復(fù)制運行應(yīng)用程序的URL地址（默認(rèn)情況下為http：// localhost：3000 /），以后在創(chuàng)建調(diào)試配置時將需要此URL。

5、創(chuàng)建一個新的JavaScript調(diào)試配置：選擇Run | 編輯配置，單擊，然后從列表中選擇JavaScript調(diào)試。在“ 運行/調(diào)試配置：JavaScript調(diào)試”對話框中，將保存的URL http：// localhost：3000 /粘貼 到URL字段中。保存配置。

6、通過在配置列表旁邊單擊，在代碼中設(shè)置斷點并啟動調(diào)試會話 。

7、當(dāng)遇到第一個斷點時，切換到“ 調(diào)試工具”窗口，然后照常進(jìn)行： 逐步執(zhí)行程序， 停止并繼續(xù)執(zhí)行程序， 在掛起時對其進(jìn)行檢查，瀏覽調(diào)用堆棧和變量，設(shè)置監(jiān)視，評估變量， 查看實際HTML DOM等等。

構(gòu)建應(yīng)用程序做出反應(yīng)

如果在現(xiàn)有的IntelliJ IDEA項目中安裝了React，則需要設(shè)置構(gòu)建過程 。

如果您使用create-react-app創(chuàng)建應(yīng)用程序，則 您的開發(fā)環(huán)境已經(jīng)預(yù)先配置為使用Webpack和Babel。

測試應(yīng)用程序做出反應(yīng)

您可以在使用create-react-app創(chuàng)建的React應(yīng)用程序中 運行和調(diào)試Jest測試。在開始之前，請確保將react-scripts包添加到package.json的 依賴項對象中。 

您可以通過運行/調(diào)試配置來運行和調(diào)試Jest測試，或者直接在編輯器中或在“ 項目”工具窗口中運行Jest測試。

要創(chuàng)建一個Jest運行/調(diào)試配置

1、打開“ 運行/調(diào)試配置”對話框（主菜單上的“運行” |“編輯配置 ”），在左側(cè)窗格中單擊，然后從列表中選擇“ 笑話 ”。將打開“ 運行/調(diào)試配置：Jest”對話框。

2、指定要使用的節(jié)點解釋器以及 應(yīng)用程序的工作目錄。默認(rèn)情況下，工作目錄字段顯示項目根文件夾。要更改此預(yù)定義設(shè)置，請指定所需文件夾的路徑，或從列表中選擇以前使用的文件夾。

3、在“ Jest包”字段中，指定react-scripts包的路徑。

4、在“ Jest選項”字段中，輸入--env=jsdom。