Author/Yun Huang cups pour
Writing in the front
The configuration is basically the same, with node addresses, Eslint execution file addresses, Eslint configuration files (i.e..eslintrc), etc., and can be easily searched online without further details.
“How to configure Eslint under WebStorm?” “How to configure Eslint under WebStorm?” However, the two configuration items are similar (setting three or four items in one WebStorm setting page and checking the enable check box), so it is easy to confuse.
In addition, the author himself in the use of time, but also in a grope, after comparing differences, just choose the right way for their own. I leave this for the record.
Method 1: WebStorm comes with Eslint
It’s easy to configure either way, so let’s just say it both ways.
To use webStorm with Eslint, just open Setting, go to the Eslint Settings page, fill in a few items, and check the Enable check box.
Method 2: Use the plugin Eslint
Step 1: You need to go to the plugin library, locate the esLint plugin, and click Install. The diagram below:
Step 2: After the plugin is installed, go to the Setting page and search for ESLint. In this case, you will find a new setting page in addition to the esLint Settings page in mode 1, under the bottom menu of the Setting dialog. The setting items inside are similar to method one.
diff
Difference 1: Use mode.
To use it, go to the left project directory list and select a folder or file that you want ESLint to fix automatically. Right-click and the Fix ESLint Problems menu appears. The diagram below.
You can also go to the right side of the code editing area, select a file that you want to automatically fix esLint for bugs, right click on the Fix ESLint Problems menu. The diagram below.
This is the first use of webStorm’s built-in ESLint mode.
Here’s the second one, which uses the use of the third-party plugin ESLint.
The second configuration will add a submenu to webStorm’s code menu called Eslint Fix. Here are two images, one before and one after the second configuration. You can see the extra submenus in the Code menu.
The second option is to select the esLint Fix submenu under the Code menu, which will take all the projects currently loaded by your entire WebStorm, All.eslintrc files detected that do not match your setting in the setting will be fixed automatically. With WebStorm, you can choose which directory you want to fix. Therefore, the first approach is more user-friendly in terms of customizing which files to fix. Of course, the biggest problem with auto-fix in the second configuration scheme is that once you click on the EsLint Fix submenu in the Code menu, all WebStorm projects are automatically fixed, which can cause a lot of problems, because a lot of times you just want to set esLint for a project in WebStorm.
Difference 2: Whether vUE files are detected
The first method directly supports detecting code areas in vue files that do not conform to ESLint rules and are marked with red wavy lines, while the second method does not support detecting code areas in Vue files that do not conform to ESlintrc rules without much configuration.
Here is the first way, in a blank line, type a few Spaces to display the red wavy line, say it does not comply with the rule, then right click on the file and select the Fix ESLint Problems submenu to remove the red wavy line.
The last
Currently no configuration items have been found that only work for a single WebStorm project. Both methods apply to all projects loaded by WebStorm. This is a bit awkward to use, since not all projects need ESLint after all.
If you know the front-end ER can communicate.