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

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

點擊下載IntelliJ IDEA最新試用版

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

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

**僅Ultimate Edition 支持此功能。

整理一個React應用程序

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

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

要自定義檢查清單，請打開 

除了提供內置的代碼檢查之外，IntelliJ IDEA還與linters集成在一起，例如用于JSX代碼的ESLint。 

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

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

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

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

.eslintrc結構示例（帶有react插件的ESLint 1.x）

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

• 在plugins對象中，添加react。

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

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

重構一個作出反應的應用

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

重命名組件

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

WebPack熱模塊的更換，開發(fā)服務器運行時，應用程序就會自動為你改變任何的源文件并保存更新重新加載。

要調試應用程序做出反應

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

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

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

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

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

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

構建應用程序做出反應

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

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

測試應用程序做出反應

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

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

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

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

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

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

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