Java開發平臺IntelliJ IDEA教程：與React集成（下）
IntelliJ IDEA是Java語言開發的集成環境，IntelliJ在業界被公認為優秀的Java開發工具之一，尤其在智能代碼助手、代碼自動提示、重構、J2EE支持、Ant、JUnit、CVS整合、代碼審查、 創新的GUI設計等方面的功能可以說是超常的。
IntelliJ IDEA現已更新至2019.2版本，新版本改進了java13預覽等20余項功能，提高了開發效率，趕快下載體驗吧~（點擊查看更新詳情）
**僅Ultimate Edition 支持此功能。
整理一個React應用程序
所有針對JavaScript和HTML 的IntelliJ IDEA內置代碼檢查都可以在JSX代碼中使用。IntelliJ IDEA會在變量和函數未使用，缺少結束標記，缺少語句等情況下提醒您：
對于某些檢查，IntelliJ IDEA提供了快速修復，例如，建議添加缺少的方法。要查看快速修復彈出窗口，請按Alt+Enter。
要自定義檢查清單，請打開
除了提供內置的代碼檢查之外，IntelliJ IDEA還與linters集成在一起，例如用于JSX代碼的ESLint。
在內置終端（視圖|工具窗口|終端）中，鍵入npm install --save-dev eslint 和npm install --save-dev eslint-plugin-react。
將ESLint配置文件.eslintrc添加到您的項目。
在“ 設置/首選項”對話框（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內置規則以及可通過react plugin可用的規則。
{
"parser": "babel-eslint",
"env": {
"browser": true
},
"ecmaFeatures": {
"jsx": true
},
"plugins": [
"react"
],
"rules": {
"semi": 2
}
}重構一個作出反應的應用
除了常見的IntelliJ IDEA重構之外，在React應用程序中，您還可以為React組件運行Rename并使用Extract Component 創建新組件。
重命名組件
將插入號放置在組件名稱中，然后按 Shift+F6
下面是重命名僅在一個文件中定義和使用的組件的示例：
以相同的方式，您可以重命名在一個文件中定義的組件，然后使用命名的export導入到另一個文件：
提取JSX代碼
您可以通過從現有組件的render方法中提取JSX代碼來創建新的React組件。
1、選擇要提取的代碼，然后選擇“ 重構”。從主菜單或上下文菜單中提取| Component。
2、命名組件。
3、選擇類如果要定義組件作為一個類或函數，如果你想創建一個功能組件。
4、單擊確定。新組件將在現有組件的旁邊定義并在其中使用。
5、可選：使用“ 移動符號”重構 將新組件和所有必需的導入移動到單獨的文件中。
要修改IntelliJ IDEA用于新組件的代碼模板， 在設置/首選項對話框（Ctrl+Alt+S）中，轉到編輯器| 文件和代碼模板，然后打開代碼選項卡。
解構的應用做出反應
通過解構，您可以輕松地將數組和對象中的值分解為變量。此功能具有非常簡潔的語法，通常在需要在應用程序中傳遞數據時使用。
在IntelliJ IDEA中，您可以使用專用的重構，意圖操作或快速修復，簡化從數組或對象中獲取多個值的代碼片段。在使用React類組件時，請考慮使用Introduce對象或數組銷毀意圖動作。
運行和調試應用程序做出反應
建議開始構建新的React單頁應用程序的方法是Create React App。僅在這種情況下，您的開發環境才被預先配置為使用webpack和Babel。否則，您需要首先配置構建管道。
要運行一個應用程序做出反應
僅適用于使用創建的應用程序create-react-app。
在npm工具窗口（“ 視圖” |“工具窗口” |“ npm”）中，雙擊start任務。
WebPack熱模塊的更換，開發服務器運行時，應用程序就會自動為你改變任何的源文件并保存更新重新加載。
要調試應用程序做出反應
僅適用于使用創建的應用程序create-react-app。
1、雙擊npm工具窗口中的啟動任務 ，以開發模式啟動應用程序。
2、等待應用程序被編譯并且Webpack開發服務器準備就緒。在http：// localhost：3000 /中打開瀏覽器 以查看該應用程序。
3、復制運行應用程序的URL地址（默認情況下為http：// localhost：3000 /），以后在創建調試配置時將需要此URL。
5、創建一個新的JavaScript調試配置：選擇Run | 編輯配置，單擊
，然后從列表中選擇JavaScript調試。在“ 運行/調試配置：JavaScript調試”對話框中，將保存的URL http：// localhost：3000 /粘貼 到URL字段中。保存配置。
6、通過
在配置列表旁邊單擊，在代碼中設置斷點并啟動調試會話 。
7、當遇到第一個斷點時，切換到“ 調試工具”窗口，然后照常進行： 逐步執行程序， 停止并繼續執行程序， 在掛起時對其進行檢查，瀏覽調用堆棧和變量，設置監視，評估變量， 查看實際HTML DOM等等。
構建應用程序做出反應
如果在現有的IntelliJ IDEA項目中安裝了React，則需要設置構建過程 。
如果您使用create-react-app創建應用程序，則 您的開發環境已經預先配置為使用Webpack和Babel。
測試應用程序做出反應
您可以在使用create-react-app創建的React應用程序中 運行和調試Jest測試。在開始之前，請確保將react-scripts包添加到package.json的 依賴項對象中。
您可以通過運行/調試配置來運行和調試Jest測試，或者直接在編輯器中或在“ 項目”工具窗口中運行Jest測試。
要創建一個Jest運行/調試配置
1、打開“ 運行/調試配置”對話框（主菜單上的“運行” |“編輯配置 ”），
在左側窗格中單擊，然后從列表中選擇“ 笑話 ”。將打開“ 運行/調試配置：Jest”對話框。
或者，在“ 項目”工具窗口中選擇一個測試文件，然后從上下文菜單中選擇“ 創建
2、指定要使用的節點解釋器以及 應用程序的工作目錄。默認情況下，工作目錄字段顯示項目根文件夾。要更改此預定義設置，請指定所需文件夾的路徑，或從列表中選擇以前使用的文件夾。
3、在“ Jest包”字段中，指定react-scripts包的路徑。
4、在“ Jest選項”字段中，輸入--env=jsdom。
運行測試
1、從主工具欄上的列表中選擇Jest運行/調試配置，然后單擊
。
2、測試服務器將自動啟動，而無需您采取任何步驟。在“ 運行工具”窗口中查看和分析來自測試服務器的消息。
3、在 “ 運行” 工具窗口的“ 測試運行器”選項卡中監視測試執行。
調試測試
1、從主工具欄上的列表中選擇Jest運行/調試配置，然后單擊
。
2、在打開的“ 調試工具”窗口中，照常進行： 逐步執行測試， 停止并繼續執行 測試，在掛起時檢查測試，依此類推。
已知限制
首次在調試會話期間打開應用程序時，可能會發生以下情況：頁面加載時執行的代碼中的某些斷點未命中。原因是要在原始源代碼中的斷點處停止，IntelliJ IDEA需要從瀏覽器獲取源映射。但是，瀏覽器只能在頁面完全加載至少一次之后才能傳遞這些源映射。解決方法是，自己在瀏覽器中重新加載頁面。
=====================================================
IntelliJ IDEA示例/使用教程/視頻資源合集，請點擊此處查看
想要了解或購買IntelliJ IDEA正版授權的朋友，歡迎
關注下方微信公眾號，及時獲取產品最新消息和最新資訊
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線