Vscode格式化的樣式設置

 一、文件

Settings.json

 

二、路徑

  設置--->用戶（常用設置）【文本編輯器】上面--->在setting.json中編輯

 

 

三、代碼

規則1：

{
  "files.eol": "\n",
  "typescript.preferences.quoteStyle": "single",
  "javascript.preferences.quoteStyle": "single"
  // tab 大小為2個空格
  "editor.tabSize": 2,
  // 編輯器換行
  "editor.wordWrap": "off",
  // 保存時格式化
  "editor.formatOnSave": false,
  // 開啟 vscode 文件路徑導航
  "breadcrumbs.enabled": true,
  // prettier 設置語句末尾不加分號
  "prettier.semi": false,
  // prettier 設置強制單引號
  "prettier.singleQuote": true,
  // 選擇 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // vetur 的自定義設置
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "aligned-multiple"
    },
    "prettier": {
      "singleQuote": true,
      "semi": false,
      "printWidth": 100,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  }
}

 

規則2：

{
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "editor.tabSize": 2,
  "eslint.autoFixOnSave": true, // 每次保存的時候將代碼按eslint格式進行修復
  "prettier.eslintIntegration": true, //讓prettier使用eslint的代碼格式進行校驗
  "prettier.semi": false, //去掉代碼結尾的分號
  "prettier.singleQuote": true, //使用帶引號替代雙引號
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函數(名)和后面的括號之間加個空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto" //"force-aligned" //屬性強制折行對齊
    }
  },
  "[jsonc]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false, //  #不讓函數(名)和后面的括號之間加個空格
  "vetur.validation.template": false,
  "[json]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "html.format.wrapAttributes": "preserve",
  "search.followSymlinks": false // 阻止iview報錯
}