前言

之前嘗試的各種前端編輯器H5Builder,SublimeText,VSCode,NotePad++等等；作為一名后端開發(fā)，自己是從Eclipse系列的IDE轉(zhuǎn)向使用JetBrain系列，深受InteliJ IDEA的毒害

近期公司的項(xiàng)目使用VSCode開發(fā)。然而作為大集成的IDEA，更能解決開發(fā)過程中的問題，無論是代碼提示、跳轉(zhuǎn)、插件、提示等等，還是IDEA更加符合自己的使用習(xí)慣。

環(huán)境準(zhǔn)備

1. nodejs v8.x.x以上

2. npm v5.x.x以上

3. WebStorm 2017.3 以上 / IntelliJ IDEA 2017.3以上?

安裝代碼檢查依賴

1. npm 安裝全局依賴

npm install -g babel-eslint eslint eslint-plugin-node eslint-plugin-vue eslint-plugin-standard eslint-config-standard eslint-plugin-promise

顯示安裝結(jié)果

2. WebStorm/IDEA 在Plugin Repository 中安裝?Eslint 插件 , Vue.js 插件；

plugin-vue

plugin-eslint

3. 禁用原生的代碼檢驗(yàn)，啟用ESlint

1.IDEA/WebStorm->Preferences，先開啟Eslint?

2.IDEA/WebStorm->Preferences->Editor->Inspections->JavaScript->關(guān)閉自身檢查只保留ESlint

啟用Eslint

禁用原生檢查，僅保留ESLint

4.替換IDEA/WebStorm自帶的格式化代碼（ctrl+alt+L）

在項(xiàng)目根目錄 .eslintrc.js 上右鍵，點(diǎn)擊菜單底部 "Apply ESLint Code Style Rule"；之后自動格式化就會按照 eslint 的規(guī)則

代碼編寫保存前需要手動執(zhí)行格式化，否則不符合eslint代碼規(guī)范的代碼無法編譯通過。

按照當(dāng)前項(xiàng)目中的eslint文件配置格式

運(yùn)行調(diào)試

1.點(diǎn)擊右上角運(yùn)行調(diào)試窗 Edit Configurations?

Edit Configuration

2. 如圖，添加類型為npm的配置；執(zhí)行腳本內(nèi)容為dev；這一步等同于用控制臺終端手動執(zhí)行 npm run dev；用于啟動node服務(wù)器

添加npm run dev

3.如同，再添加一個JavaScript Debug 類型的配置，用于調(diào)試；其中http://localhost:9527 指向頁面啟動的地址。默認(rèn)使用Chrome瀏覽器

JavaScriptDebug

4.先運(yùn)行dev-server 配置(也可以在底部Terminal中運(yùn)行npm run dev)

啟動npm dev服務(wù)器

啟動chrome調(diào)試

好了打上斷點(diǎn)，現(xiàn)在可以開始開發(fā)調(diào)試了。

斷點(diǎn)調(diào)試