幹掉一切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包內部，解決遇到的每個問題，最後，學好英語。