[個人筆記] VSCode排版縮排設置

  • 847
  • 0

某些換行的設置不太喜歡,所以習慣會關閉

 
"vetur.format.defaultFormatter.html": "js-beautify-html", // html 不换行
"vetur.format.defaultFormatter.js": "vscode-typescript", // js 不换行
"vetur.format.defaultFormatterOptions": {
	"js-beautify-html": {
	  "wrap_line_length": 0, // 设置多个字符后换行 0 表示忽略
	  "wrap_attributes": "force-aligned", // html 标签属性 换行设置[auto|force|force-aligned|force-expand-multiline] ["auto"]
	  "end_with_newline": false // 在文件结尾添加新行
	},
	"prettyhtml": {
	  "singleQuote": false,
	  "wrapAttributes": false,
	  "sortAttributes": false
	}
},
"vetur.format.options.tabSize": 2,
"vetur.format.options.useTabs": true,
"git.autofetch": true,
"editor.autoClosingBrackets": "always",
"[vue]": {
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "octref.vetur"
},

 

部分欄位說明

"vetur.format.defaultFormatter.js": "vscode-typescript", // js 不换行
這行的影響是

  let myValue = parseInt(this.amount.toString().replace(",", ""), 10);

會強制換行成類似這樣

  let myValue = parseInt(

this.amount.toString().replace(",", ""), 

10

);

 

 

  "wrap_attributes": "force-aligned", // html 标签属性 换行设置[auto|force|force-aligned|force-expand-multiline] ["auto"]
    這行的影響是

<div class="red" style="width:100%"></div>

 

如果 force-aligned 會變成

<div class="red"

        style="width:100%">

</div>

如果 force-expand-multiline 則

<div class="red"

        style="width:100%"

  >

</div>