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

场景复现

经过长达两个月的代码迁移工作，终于在这一天，我将项目上线了。^_^

然后，立马收到了问题反馈！！！好吧！！因为这是个迁移的老项目再加上时间紧迫，该项目没有测试人员的加入，只进行了主流程功能的自测，有些非主流程的小细节并没有全部测试。所以-----------------出问题了！

问题出在哪里？报错如下图：

但是-----我在代码中并没有找到这个modes字段，见鬼了！！通过仔细查找发现，原始字段为MODES。

但是这段代码，我根本就没有动过哈，纯粹只是进行了一次Copy到Paste的操作，为何会出错？？？

尝试后发现如下现象，当我在JSX文件中输入如下代码：

style={{ width: MODELS }}

然后，点击保存，将自动转换为如下代码：

style={{ width: models }

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导致的问题！

2. 是哪个属性导致的问题呢？
   开启代码错误❌提示功能：
   
   同时，setting.json文件没有如下配置覆盖了UI界面的配置即可。

"stylelint.config": {},

得到错误提示，如下：

3. 确定✅错误原因为：value-keyword-case
4. 处理：
为了保证项目开发环境的统一性，将该配置在项目 .stylelintrc.json 配置文件中做关闭处理。这样stylelint就会忽略这个问题！

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