安裝這三個組件

?windwos?
ctrl+,打開設置然后點擊右上角這里

?將一下內容粘貼并保存

{
    // tab 大小為2個空格
    "editor.tabSize": 2,
    // 100 列后換行
    "editor.wordWrapColumn": 100,
    // 保存時格式化
    "editor.formatOnSave": true,
    // 開啟 vscode 文件路徑導航
    "breadcrumbs.enabled": true,
    // prettier 設置語句末尾不加分號
    "prettier.semi": false,
    // prettier 設置強制單引號
    "prettier.singleQuote": true,
    // 選擇 vue 文件中 template 的格式化工具
    "vetur.format.defaultFormatter.html": "prettyhtml",
    // 顯示 markdown 中英文切換時產生的特殊字符
    "editor.renderControlCharacters": true,
    // 設置 eslint 保存時自動修復
    "eslint.autoFixOnSave": true,
    // eslint 檢測文件類型
    "eslint.validate": [
       "vue",
       "html",
       "javascript",
       "typescript",
       "javascriptreact",
       "typescriptreact"
    ],
    // vetur 的自定義設置
    "vetur.format.defaultFormatterOptions": {
      "prettier": {
        "singleQuote": true,
        "semi": false
      }
    },
    // vue 擴展的文件默認使用 prettier 進行格式化
     "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
  }
  

之前的代碼是這樣的

?直接ctrl+s保存一下?

代碼變換成這樣。非常的時尚?