右鍵格式化文檔或者ctrl + s保存 html不換行

1.安裝兩個插件①vetur ②Prettier - Code formatter

2.在vetur的settings.json中設置

配置ctrl+s觸發格式化去除分號和單引號；配置格式化js換行；配置解決html屬性換行

將最后一部分的設置，修改成上圖即可

// // 當保存代碼的時候，會自動格式化"editor.formatOnSave": true,// 不添加分號"prettier.semi": false,// 使用單引號"prettier.singleQuote": true,// 解決Vue的屬性換行問題"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.js": "vscode-typescript",//在配置了默認格式后 這個需要打開 否則js格式化會換行"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "auto"},"prettyhtml": {"printWidth": 1000,"singleQuote": false,"wrapAttributes": false,"sortAttributes": false}},

3.如果右鍵格式化或者ctrl+s，沒有觸發效果，在配置一下格式化的默認方式：看圖，選擇Vetur為默認值。

4.這是我自己mac上的settings.json完整配置：

{"vetur.format.defaultFormatter.css": "prettier","vetur.format.defaultFormatter.postcss": "prettier","vetur.format.defaultFormatter.scss": "prettier","vetur.format.defaultFormatter.less": "prettier","vetur.format.defaultFormatter.stylus": "stylus-supremacy","vetur.format.defaultFormatter.ts": "prettier","editor.quickSuggestions": {"strings": true},// "workbench.iconTheme": "material-icon-theme","git.autofetch": true,// vscode默認啟用了根據文件類型自動設置tabsize的選項"editor.detectIndentation": true,// 重新設定tabsize"editor.tabSize": 2,// 添加 vue 支持"eslint.validate": ["javascript","javascriptreact","vue","html"],// 顯示 markdown 中英文切換時產生的特殊字符"editor.renderControlCharacters": true,// #讓函數(名)和后面的括號之間加個空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,// #這個按用戶自身習慣選擇"workbench.iconTheme": "vscode-icons","diffEditor.ignoreTrimWhitespace": true,"search.followSymlinks": false,"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"files.trimTrailingWhitespace": true,"editor.suggestSelection": "first","vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue","typescript.format.semicolons": "remove","javascript.format.semicolons": "remove","path-intellisense.mappings": {"@": "${workspaceRoot}/src"},"git.enableSmartCommit": true,"explorer.confirmDragAndDrop": false,"explorer.confirmDelete": false,"editor.accessibilitySupport": "off","workbench.sideBar.location": "left","tabnine.experimentalAutoImports": true,"gitlens.hovers.currentLine.over": "line","html.format.enable": true,"search.exclude": {"**/node_modules": true,"**/bower_components": true,"**/dist": true},"files.associations": {"*.cjson": "jsonc","*.wxss": "css","*.wxs": "javascript"},"emmet.includeLanguages": {"wxml": "html"},"minapp-vscode.disableAutoConfig": true,"scssFormatter.singleQuote": true,"javascript.preferences.quoteStyle": "single","[vue]": {"editor.defaultFormatter": "octref.vetur"},"files.autoSave": "afterDelay",// // 當保存代碼的時候，會自動格式化"editor.formatOnSave": true,// 不添加分號"prettier.semi": false,// 使用單引號"prettier.singleQuote": true,// 解決Vue的屬性換行問題// "eslint.enable": false, //如果你的項目開啟了eslint和.eslintrc.js 那么設置false會關閉所有的eslint的檢驗（例如駝峰和變量是否聲明和==）"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.js": "vscode-typescript", //在配置了默認格式后 這個需要打開 否則js格式化會換行"vetur.format.defaultFormatterOptions": {"prettier": {"semi": false,"singleQuote": true,"proseWrap": "always","printWidth": 160,"trailingComma": "none"},"js-beautify-html": {"wrap_attributes": "auto"},"prettyhtml": {"printWidth": 1000,"singleQuote": true,"wrapAttributes": false,"sortAttributes": false}},"emmet.triggerExpansionOnTab": true,"terminal.integrated.defaultProfile.osx": "bash","[jsonc]": {"editor.defaultFormatter": "vscode.json-language-features"},"[json]": {"editor.defaultFormatter": "vscode.json-language-features"},"[html]": {"editor.defaultFormatter": "HookyQR.beautify"},"security.workspace.trust.untrustedFiles": "open","[javascript]": {"editor.defaultFormatter": "HookyQR.beautify"}, }

總結

以上是生活随笔為你收集整理的解决vscode格式化代码html属性换行问题； ctrl+s格式化去除分号，格式化自动单引号；解决js格式化换行问题；mac上的settings.json完整配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。