origin

It all started with a regular expression like this:

/[\$]/g
Copy the code

The webPack builds with a warning

 19:121   warning  Unnecessary escape character: \$  no-useless-escape
Copy the code

That’s the idea.

I looked it up in the documentation, regular expressions

Most of the special characters in the character set do not need to be escaped, so the project reported a warning during the Lint phase of the Webpack compilation process. In order to avoid any warnings, we continue to investigate the following.

eslint

Eslint was created by former Yahoo guru Nicholas C. Zakes.

The 5.0-Alpha version was released a year ago on March 30 last year.

Check our project, HMMM, ^5.1.0, go to NPMJS to check.

Eslint NPM project home page Well, published the latest version 4 days ago, 5.16.0, close to 700w weekly downloads, a very cool project.

The project home page gives some instructions.

The first step is to separately detect the target JS file

Follow the main instructions of the ESLint project to separate out individual files for testing.

./node_modules/.bin/eslint TARGET_JS_FILE
Copy the code

In addition to the bunch of warnings mentioned at the beginning of this article, there is a single warning

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .
Copy the code

Json “devDependencies”;}}}}}}}}}}}}}}}}}}}}}

Check “dependencies” again

"eslint-plugin-react": "^ 7.10.0"
Copy the code

I can’t leave it alone. Let’s see.

The eslint-plugin-React page mentions that we should refer to ESLint documentation to extend the configuration file, and we should go back to the ESLint documentation.

Step two: review.eslintrc

Let’s look at the esLint documentation and the project’s.eslintrc file to see how to correct this warning.

Github.com/yannickcr/e… This issue has been discussed for a long time, there seems to be some controversy, ok, I will add a configuration to the project’s.eslintrc file to try:

{
  "settings": {
    "react": {
      "version": "16.4.1"}}}Copy the code

As expected, there is no such warning, and THEN I changed the version randomly, and it is also OK, that needs this configuration to have a bad egg!

Take a look inside the eslint-plugin-React package to see what’s going on inside.

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 (typeofsettingsVersion ! = ='string') {
      error('Warning: React version specified in eslint-plugin-react-settings must be a string; ' +
        ` got"The ${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));
}
Copy the code

Sure enough, you can either set detect or set a specific value, either way, or you’ll get a warning.

So let’s see what this setting does.

Not surprisingly, it is used to ensure that certain rules match the react version. If the React version is too low, it will prompt you to upgrade the React version.

(Array. The from) [developer.mozilla.org/zh-CN/docs/…]. In addition, code for comparing version numbers appears in the package.

The react version is 16.8.4. The react version is 16.8.4

Step 3 Solution

Time is limited and we will not extend it further. With the configuration of ESlintrc, solving all the warnings is our current goal.

As prompted, the 1000+ character regular expression appears multiple times

[\ $\ \ + \ * (\)]Copy the code

As we know from the previous regular expression knowledge, except for special “\” characters inside the collection, other general special characters do not need to escape, so we can remove these redundant “\” in the code.

conclusion

Every warning, go deep into the NPM package, solve every problem you encounter, and finally, learn English well.