詳解vue儲存自動格式化換行

阿新 • • 發佈：2021-12-16

網上找了好多方法改著也沒用，後面從一個大佬上看到的，就摘下來了，字型的話還是原來系統自帶的看著舒服，就自己新增上去了，需要改動的可自行修改，在右上角檔案--首選項--設定--搜尋setting---在setting.on編輯，把其他的註釋掉，換上下面的程式碼塊就可以了，字型大小和行高可自行修改

{
  //設定文字大小
  "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",//側邊欄背景色
   zQZMUc 
 // "activityBar.foreground": "#23f8c8",//活動欄前景色(例如用於圖示)
    "editor.background": "#292a2c" //編輯器背景顏色
  },// vscode預設啟用了根據檔案型別自動設定tabsize的選項
  "editor.detectIndentation": false,// 重新設定tabsize
  "editor.tabSize": 2,// #每次儲存的時候自動格式化
  "editor.formatOnSave": true,//  #讓函式(名)和後面的括號之間加個空格
  ".format.insertSpaceBeforeFunctionParenthesis": true,// #這個按使用者自身習慣選擇
  "vetur.format.defaultFormatter.html": "js-beautify-html",// #讓中的js按編輯器自帶的ts格式進行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",// 儲存時執行的程式碼ESLint操作型別。
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },// 新增emmet支援vue檔案
  "emmet.includeLanguages": {
    "wxml"http://www.cppcns.com 
: "html","vue": zQZMUc"html"
  },// 兩個選擇器中是否換行
  "minapp-vscode.disableAutoConfig": true,//快速預覽（右側）
  "editor.minimap.enabled": true,// tab 程式碼補全
  "files.associations": {
    "*.wpy": "vue","*.vue": "vue","*.cjson": "jsonc","*.wxss": "","*.wxs": "script"
  },// 用來配置如何使用ESLint CLI引擎API啟動ESLint。 預設為空選項
  "eslint.options": {
    "extensions": [
      ".js",".vue"
    ]
  },// 在onSave還是onType時執行linter。預設為onType。
  "eslint.run": "onSave",// 啟用ESLint作為已驗證檔案的格式化程式。
  "eslint.format.enablezQZMUc 
": 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_lengthzQZMUc": 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"
}