The vscode code is automatically modified to a compliance code when it is formatted and saved

Install these three components

 windwos 
ctrl+, Open the settings and click here in the upper right corner

  Paste and save the following content

{
    // tab  The size is 2 A space 
    "editor.tabSize": 2,
    // 100  Line feed after column 
    "editor.wordWrapColumn": 100,
    //  Format on save 
    "editor.formatOnSave": true,
    //  Turn on  vscode  File path navigation 
    "breadcrumbs.enabled": true,
    // prettier  Set the end of the statement without a semicolon 
    "prettier.semi": false,
    // prettier  Set mandatory single quotation marks 
    "prettier.singleQuote": true,
    //  choice  vue  In file  template  Format tool for 
    "vetur.format.defaultFormatter.html": "prettyhtml",
    //  Show  markdown  Special characters generated when switching between Chinese and English 
    "editor.renderControlCharacters": true,
    //  Set up  eslint  Auto repair on save 
    "eslint.autoFixOnSave": true,
    // eslint  Test file type 
    "eslint.validate": [
       "vue",
       "html",
       "javascript",
       "typescript",
       "javascriptreact",
       "typescriptreact"
    ],
    // vetur  Custom settings for 
    "vetur.format.defaultFormatterOptions": {
      "prettier": {
        "singleQuote": true,
        "semi": false
      }
    },
    // vue  The extended file defaults to  prettier  format 
     "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
  }
  

The previous code looked like this

  direct ctrl+s Save it  

The code changes like this . Very fashionable