This article introduces some basic concepts of ESLint, and how to configure ESLint in webpack and vscode.
Why do I need ESLint?
ESLint supports jsx and ES6 syntax and is highly configurable, which is one of the reasons why it is more popular.
webpack.config.js file and add the following.
Create a new
.eslintrc file in the project root directory, the
.eslintrc file is the configuration file for eslint, add eslint rules to it.
"parser" "@babel/eslint-parser" is specified above to make ESLint support the es6 syntax.
The values of the rules of eslint can be numeric values
0-2 or in array format.
0: turn off the rule
1: turn on the rule and issue a warning message when the rule is not satisfied
2: turn on the rule and send an error message when the rule is not met
Additional information can also be set using arrays.
If you have multiple projects that need to use the same set of rules, you can publish a package that contains these ESLint rules and simply introduce the package using the
extends field. Many such packages already exist, one of the more popular ones is Airbnb ESLint configuration, which can be found at here for details of the specification it is based on.
configuration file, add the
Configuring ESLint in vscode
You can install the plugin
ESLint in vscdoe and add the following settings to
editor.codeActionsOnSave means that some lint errors are automatically fixed each time you save, and
eslint.validate means that the supported Languages are validated.