快捷導(dǎo)航

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

更新時間：2021年12月14日 17:15:43 作者：zailaisanwan

這篇文章主要為大家介紹了vue保存自動格式化換行，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

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

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