文章目錄
一、開發環境
- chrome
- JetBrains IDE Support
- WebStorm2018.3
二、Debug html
2.1、WebStorm建立debug
首先在WebStorm中建立debug調試，步驟如圖1-圖3所示。
圖1
圖2
圖3
2.2、配置JetBrains IDE Support
在chrome上安裝JetBrains IDE Support插件然後進行配置，只需要確保端口和webstorm中調試的端口一致即可。具體配置選項如圖4所示。
圖4
2.3、開始調試
選擇WebStorm的調試按鈕進行調試，調試按鈕如圖5所示。
圖5
注意：現在選擇進行調試會重新打開一個chrome瀏覽器，這個新打開的chrome瀏覽器沒有任何插件和書籤，是非常乾淨的一個chrome。當然，如果在這個乾淨的chrome中想要自己插件和書籤，只需要登錄自己的chrome賬號即可進行插件和書籤的同步。這樣下次再次進行調試調試打開的chrome上就會擁有相應的書籤和插件。（當然前提是要能夠登錄chrome賬號）。
從上面的步驟可以看出其實我們安裝的JetBrains IDE Support插件根本就沒有體現出作用。那JetBrains IDE Support有什麼作用呢？這個插件的主要作用就是能夠在當前已經打開的chrome中進行調試，不需要重新打開新的chrome進行調試。那應該怎麼設置呢？通過一個偶然的事件，發現需要設置Live Edit選項。在 File->Settings->Build,Execution,Deployment->Live Edit->選擇使用JetBrains IDE Support插件調試。具體設置如圖6所示。
圖6
三、配置 ESLint
首先還是要安裝node.js，並且安裝eslint。然後打開webstorm進行設置即可，具體設置如下圖所示：
四、配置 EditorConfig
參考文獻
[1] webstorm上安裝ESLint