Eslint+prettier Eslint+ PRETtier Eslint+ Prettier

Now the front-end project is getting bigger and bigger, and everyone in the project has their own editor they are used to, and everyone has different coding styles, which leads to greater difficulty in code review and project maintenance

Eslint+prettier

1, use husky for commit, use prettier for formatting, Eslint (which can also format code) for autocomplete or fix

There are times when Eslint may not be able to fix the code. You can manually fix the errors, but if you’re writing code, it’s not a problem

Iii. Configuration and Use process: The vue-CLI project is used as an example

1. Early dependency package installation: husky, ESLint, Lint-Staged, prettier

Yarn add husky eslint Lint - Staged prettier --dev or NPM install husky eslint Lint - Staged prettier -dCopy the code

2. Configure according to the Git commit process

  • When you commit your code, you need to check it with one of the hooks git provides – the Husky configuration

  • Before committing an prettier task, format the prettier task. – Prettier is configured for an PRETtier task

  • Fixes for irregular code – Eslint configuration

  • For code that Eslint can’t fix, commit will fail and prompt you with the “git Add” configuration

The above four points need to be configured inside package.json, as follows:
// package.json
{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"}},"lint-staged": {
    "src/**": [
      "prettier --config .prettierrc --write"."eslint --fix"."git add"]}}Copy the code

3. Create the required files in package.json above

  • Create.prettierrc in the root directory of the project
  • IO /docs/en/opt… prettier Document address: prettier.
// .prettierrc
{
    "printWidth": 200,
    "tabWidth": 2."useTabs": true."semi": false."singleQuote": true."bracketSpacing": true."arrowParens": "avoid"
}
Copy the code

4. Add rules to the project root directory.eslintrc.js /.eslintrc.json

  • Add the rules rule to.eslintrc.js in the project root directory
  • Eslint document address: eslint.org/
// .eslintrc.js
// extends:["@vue/prettier"} prettier Module. Exports = {root:true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential"."@vue/prettier"."@vue/typescript"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off"."no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"."no-dupe-keys": "error"."no-duplicate-case": "error"."no-empty": ["error", {"allowEmptyCatch": true}]."no-ex-assign": "error"."no-extra-boolean-cast": "error"."no-extra-semi": "error"."curly": "error"
  },
  parserOptions: {
    parser: "@typescript-eslint/parser"}};Copy the code

Verify the configuration

1. The configuration rules in the project require single quotation marks

  • The following is a screenshot of the code before Git Commit
  • Git commit -m “auto-fix”

  • The configuration shown in the preceding figure has taken effect

Five, the summary

  • Code automatic formatting and automatic repair, effectively improve the quality of the project and the efficiency of cooperative operations
  • In the later stage, engineering projects can be independently built for deeper rule customization