干掉一切warning？！

jackyqi
3,675 阅读2分钟

缘起

事情的起因要从一个正则表达式说起，如下：

/[\$]/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包内部，解决遇到的每一个问题，最后，学好英语。

avatar
文章
阅读
粉丝