vue vscode 保存自動格式化換行

用vscode開發少不了要配置setting.json, 在右上角文件--首選項--設置--搜索setting---在setting.json編輯

{
  //設置文字大小
  "editor.fontSize": 18,
  //設置文字行高
  "editor.lineHeight": 20,
  //開啟行數提示
  "editor.lineNumbers": "on",
  // 在輸入時顯示含有參數文檔和類型信息的小面板。
  "editor.parameterHints.enabled": true,
  // 調整窗口的縮放級別
  "window.zoomLevel": 0,
  // 文件目錄
  // "workbench.iconTheme": "vscode-icons",
  // 設置字體
  "editor.fontFamily": "'Consolas','Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
  // 自動換行
  "editor.wordWrap": "on",
  // 自定義vscode面板顏色
  "workbench.colorCustomizations": {
    // "tab.activeBackground": "#253046", // 活動選項卡的背景色
    // "activityBar.background": "#253046", //活動欄背景色
    // "sideBar.background": "#253046", //側邊欄背景色
    // "activityBar.foreground": "#23f8c8", //活動欄前景色(例如用於圖標)
    "editor.background": "#292a2c" //編輯器背景顏色
  },
  // vscode默認啟用了根據文件類型自動設置tabsize的選項
  "editor.detectIndentation": false,
  // 重新設定tabsize
  "editor.tabSize": 2,
  // #每次保存的時候自動格式化
  "editor.formatOnSave": true,
  //  #讓函數(名)和后面的括號之間加個空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #這個按用戶自身習慣選擇
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #讓vue中的js按編輯器自帶的ts格式進行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 保存時運行的代碼ESLint操作類型。
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 添加emmet支持vue文件
  "emmet.includeLanguages": {
    "wxml": "html",
    "vue": "html"
  },
  // 兩個選擇器中是否換行
  "minapp-vscode.disableAutoConfig": true,
  //快速預覽（右側）
  "editor.minimap.enabled": true,
  // tab 代碼補全
  "files.associations": {
    "*.wpy": "vue",
    "*.vue": "vue",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  // 用來配置如何使用ESLint CLI引擎API啟動ESLint。 默認為空選項
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue"
    ]
  },
  // 在onSave還是onType時執行linter。默認為onType。
  "eslint.run": "onSave",
  // 啟用ESLint作為已驗證文件的格式化程序。
  "eslint.format.enable": true,
  // 語言標識符的數組，為此ESLint擴展應被激活，並應嘗試驗證文件。
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "vue-html",
    "vue",
    "html"
  ],
  //關閉rg.exe進程 用cnpm導致會出現rg.exe占用內存很高
  "search.followSymlinks": false,
  // 給js-beautify-html設置屬性隔斷
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto",
      "wrap_line_length": 200,
      "end_with_newline": false
    },
    "prettyhtml": {
      "printWidth": 200,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    },
    "prettier": {
      "semi": false,
      "singleQuote": true
    }
  },
  // style默認偏移一個indent
  "vetur.format.styleInitialIndent": true,
  // 定義匿名函數的函數關鍵字后面的空格處理。
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  // 定義函數參數括號前的空格處理方式。
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 新版本消息
  "vsicons.dontShowNewVersionMessage": true,
  // 控制資源管理器是否在把文件刪除到廢紙簍時進行確認。
  "explorer.confirmDelete": true,
  // 使用eslint-plugin-vue驗證<template>中的vue-html
  "vetur.validation.template": false,
  // 指定用在工作台中的顏色主題。
  // "workbench.colorTheme": "One Dark Pro"
}