一次深刻的vscode及其插件跳坑記錄(value-keyword-case)

場景複現

經過長達兩個月的代碼遷移工作，終于在這一天，我将項目上線了。^_^

然後，立馬收到了問題回報！！！好吧！！因為這是個遷移的老項目再加上時間緊迫，該項目沒有測試人員的加入，隻進行了主流程功能的自測，有些非主流程的小細節并沒有全部測試。是以-----------------出問題了！

問題出在哪裡？報錯如下圖：

但是-----我在代碼中并沒有找到這個modes字段，見鬼了！！通過仔細查找發現，原始字段為MODES。

但是這段代碼，我根本就沒有動過哈，純粹隻是進行了一次Copy到Paste的操作，為何會出錯？？？

嘗試後發現如下現象，當我在JSX檔案中輸入如下代碼：

然後，點選儲存，将自動轉換為如下代碼：

WHY?

我猜測應該是vscode在儲存的時候做了什麼！！ 是什麼呢？

問題原因排查

step1

從vscode的配置檔案中可見，onsave的時候做了代碼問題修複工作！

"editor.codeActionsOnSave": {
    "source.fixAll": true,
  },
           

step2

确定✅安裝了哪些lint插件？如下有：eslint和stylelint

step3

确定✅是哪個lint導緻的這個問題？

采用排查法：

1. 将vscode的onsave操作具體化，如：隻做eslint操作

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
           

結論：上面問題沒有複現！！由此：确定✅是stylelint導緻的問題！

1. 是哪個屬性導緻的問題呢？

   開啟代碼錯誤❌提示功能：

   

   同時，setting.json檔案沒有如下配置覆寫了UI界面的配置即可。

得到錯誤提示，如下：

3. 确定✅錯誤原因為：value-keyword-case

4. 處理：

為了保證項目開發環境的統一性，将該配置在項目 .stylelintrc.json 配置檔案中做關閉處理。這樣stylelint就會忽略這個問題！

"rules": {
    "value-keyword-case": null
  },