Front end Engineering (webpack eslint)

Time:2021-3-9

As mentioned above, we have some knowledge about wepack. Here we integrate the configuration of eslint.
First, install the corresponding module

  • Installing the eslint module
  • Installing the eslint loader module
  • initialization. eslintrc.js File configuration

After the installation, initialize the configuration first:
yarn eslint –init
Then answer some questions:
1. We choose to check the syntax, find problems, and execute the unified code style
2. Modularization here we use JavaScript modules (ES6 syntax)
3. At present, we assume that the configuration is a react project, and select react
4. When we use TS here, select Yes
Finally, I specialize in the project runtime browser
6. We use the mainstream style in the market and choose the first one (standard: open source community)https://github.com/standard/s…
7. The configuration file uses JS format
8. Finally, automatically install some other packages
Finally, configure the file JS
Front end Engineering (webpack eslint)
If you have something to use globally, you can add it, such as jQuery
globals:{

"jQuery":"readonly"

}

Eslint configuration comments
http://eslint.cn/docs/user-gu…

Loader configuration in webpack
Front end Engineering (webpack eslint)

Then, eslint and git hooks are used to check the code before submitting
Using husky
Install first

npm install husky --save-dev

Then corresponding package.json to configure
Front end Engineering (webpack eslint)
The husky property configures the GIT hook stage of pre commit to check with our NPM run test
Then add the test command to NPM scripts,

test: "eslint --ext .js,.vue src/"

We detect all the files in the SRC directory

We can manually add a repair command to execute it manually

test:"eslint --fix --ext .js,.vue src/"

You can also format it automatically when git commit, and then add it back
Install first

npm install -D lint-staged

Then configure package.json ,
Call lint staged through procommit

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.js": ["eslint --fix" , "git add"]
  },
  "husky":{
    "hooks":{
        "pre-commit":"npm run precommit"
    }
  }
}

In this way, you can use eslint to fix git add before commit.

If you want to use with prettier, please refer to the following:
Introduction and basic usage of prettier