干掉一切warning？！

缘起

事情的原由要从一个正则表达式提及，以下：

/[\$]/g
复制代码

结果webpack构建的时候给了一个warning

19:121   warning  Unnecessary escape character: \$  no-useless-escape
复制代码

大意如此。

查了一下文档，正则表达式

原来字符集合里面，你因此为的大多数特殊符号都不须要转义，因而项目在webpack编译过程的lint阶段就报了一个warning，本着不放过任何一个warning的原则，咱们继续进行下面的研究。

eslint

eslint中文站介绍eslint是著名的前Yahoo大牛Nicholas C. Zakes建立的。

一年前的去年3月30日发布了5.0-alpha版。

检查了一下咱们的项目，嗯呵，^5.1.0，上npmjs去check一下。

eslint npm项目主页 嗯，4天前publish的一个最新版，5.16.0，周下载量接近700w，一个很是牛逼的项目。

项目主页给出了一些使用说明。

第一步 单独检测目标js文件

按照eslint项目主要的说明，将单个文件单独拿出来检测。

./node_modules/.bin/eslint TARGET_JS_FILE
复制代码

除了文章开头提到的一堆warning以外，还多了一句单独的warning

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .
复制代码

打开网页查了一下，这个是一个针对react的代码进行eslint检查的单独的插件，查看了下package.json里的"devDependencies"字段，没有这个插件，看起来能够不用管。

不放心，再查一遍"dependencies"，哇靠，赫然出现

"eslint-plugin-react": "^7.10.0"
复制代码

看来不能无论，仍是再看看吧。

eslint-plugin-react页面提到让咱们参考ESLint documentation来扩展配置文件，得，还得回去再看看eslint的文档。

第二步 从新审视.eslintrc

那咱们再对着eslint的文档和项目的.eslintrc文件来审视一下该怎么纠正这个warning。

github.com/yannickcr/e… 这个issue讨论了半天，彷佛有一些争议，好吧，我给项目的.eslintrc文件增长一个配置试试：

{
  "settings": {
    "react": {
      "version": "16.4.1"
    }
  }
}
复制代码

果真就没有这个warning了，而后我把version随便改了改，也是ok的，那要这个配置有个毛蛋用啊！

深刻eslint-plugin-react这个包看一下，里面到底在玩什么花。

function getReactVersionFromContext(context) {
  let confVer = '999.999.999';
  // .eslintrc shared settings (http://eslint.org/docs/user-guide/configuring#adding-shared-settings)
  if (context.settings.react && context.settings.react.version) {
    let settingsVersion = context.settings.react.version;
    if (settingsVersion === 'detect') {
      settingsVersion = detectReactVersion();
    }
    if (typeof settingsVersion !== 'string') {
      error('Warning: React version specified in eslint-plugin-react-settings must be a string; ' +
        `got “${typeof settingsVersion}”`);
    }
    confVer = String(settingsVersion);
  } else if (!warnedForMissingVersion) {
    error('Warning: React version not specified in eslint-plugin-react settings. ' +
      'See https://github.com/yannickcr/eslint-plugin-react#configuration .');
    warnedForMissingVersion = true;
  }
  confVer = /^[0-9]+\.[0-9]+$/.test(confVer) ? `${confVer}.0` : confVer;
  return confVer.split('.').map(part => Number(part));
}
复制代码

果真，你要么设置detect，要么设置一个具体的值，反正要有这个设置，否则就给你一个warning。

那么咱们查一下，这个设置到底干吗用的。

不出意外，是用于保证某些规则与对应的react版本所匹配，若是react版本太低，会提示你升级react版本。

(Array.from)[developer.mozilla.org/zh-CN/docs/…] 另外，这个包里也出现了比较版本号的代码。

以及获取某一个npm包的版本号的代码，用node命令后模式执行了一遍，当前的react版本是16.8.4

第三步 解决

时间有限，不深刻扩展.eslintrc的配置了，将全部warning解决即为咱们现阶段的目标。

根据提示，这一行1000+字符的正则表达式屡次出现了

[\$\(\)\+\*]
复制代码

根据前面正则表达式的知识咱们知道，集合内部除了特殊的"\"字符，其余通常特殊字符是不须要转义的，那么咱们将代码中的这些多余的"\"去掉便可。

结论

不放过每个warning，深刻npm包内部，解决遇到的每个问题，最后，学好英语。