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

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

點(diǎn)擊下載IntelliJ IDEA最新試用版

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

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

**僅Ultimate Edition 支持此功能。

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

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

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

要自定義檢查清單，請(qǐng)打開 

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

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

2. 將ESLint配置文件.eslintrc添加到您的項(xiàng)目。

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

您還可以手動(dòng)配置ESLint以使用自定義ESLint軟件包和配置。

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

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

• 在plugins對(duì)象中，添加react。

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

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

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

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

重命名組件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

要?jiǎng)?chuàng)建一個(gè)Jest運(yùn)行/調(diào)試配置

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

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

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

4、在“ Jest選項(xiàng)”字段中，輸入--env=jsdom。