如何分析vue保存自動(dòng)格式化換行

這篇文章將為大家詳細(xì)講解有關(guān)如何分析vue保存自動(dòng)格式化換行，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

網(wǎng)上找了好多方法改著也沒用，后面從一個(gè)大佬上看到的，就摘下來了，字體的話還是原來系統(tǒng)自帶的看著舒服，就自己添加上去了，需要改動(dòng)的可自行修改，在右上角文件--首選項(xiàng)--設(shè)置--搜索setting---在setting.json編輯，把其他的注釋掉，換上下面的代碼塊就可以了，字體大小和行高可自行修改

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

關(guān)于如何分析vue保存自動(dòng)格式化換行就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。