VSCode vue文件格式化

"editor.fontSize": 18,
// 代码缩进的空格数量
"editor.tabSize": 2,
"editor.fontFamily": "Source Code Pro, Consolas, 'Courier New', monospace",
// 主题，需要安装插件 Atom One Dark
"workbench.colorTheme": "Atom One Dark",
// 图标插件，需要安装 vscode-icons
"workbench.iconTheme": "vscode-icons",
// 检测到不同的工程文件，自动重启插件，需要安装 vscode-icons
"vsicons.projectDetection.autoReload": true,
// 终端光标样式，下划线
"terminal.integrated.cursorStyle": "underline",
// 终端字号
"terminal.integrated.fontSize": 18,
// 将新打开的文件放在选项卡的最后
"workbench.editor.openPositioning": "last",
// stylus 样式文件属性与属性值之间是否使用 : ，需要安装插件 language-stylus
"languageStylus.useSeparator": false,
// cssrem 插件的根标签 font-size 将根据此值(px)来自动计算 rem 值，需要安装插件 cssrem
"cssrem.rootFontSize": 75,
// git 是否自动刷新文件，如果有喜欢的第三方 git 工具，可以关闭此项，需要系统安装 git ，vscode在启动时会自动扫描 git ，如果检测到了则使用
"git.autorefresh": false
// 下面三项为 vue 文件中格式化 stylus 的选项，因为 "vetur.format.defaultFormatter.stylus": "stylus-supremacy" ，所以需要设置 stylusSupremacy，更多选项参考 https://thisismanta.github.io/stylus-supremacy/#options
// 注：如果 VSCode 没有安装 Manta's Stylus Supremacy 插件，则这些选项会出现绿色波浪线，是因为 VSCode 没有检测到跟这些配置相关的插件，但是这个可以忽略，会生效的
"stylusSupremacy.insertBraces": false, // 是否使用括号
"stylusSupremacy.insertColons": false, // 属性名和属性值之间是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 属性值后面是否使用分号
// vue 文件中格式化 html 的选项，默认为 prettyhtml (https://github.com/Prettyhtml/prettyhtml) ，但是配置相对 js-beautify-html (https://github.com/vuejs/vetur/blob/master/server/src/modes/template/services/htmlFormat.ts) 要少（个人最在意的就是属性换行这个选项），所以就改用 js-beautify-html 了
"vetur.format.defaultFormatter.html": "js-beautify-html",
// vue 文件中 js 和 html 的格式化选项，css 部分已在上面 stylus 选项中列出
"vetur.format.defaultFormatterOptions": {
  // js 部分
  "prettier": {
    "semi": false, // 使用分号
    "singleQuote": true // 使用单引号
  },
  // html 部分
  "js-beautify-html": {
    "end_with_newline": true // 换行显示，整个一行
    "wrap_attributes": "auto", // 属性换行显示，只针对属性，和 end_with_newline 不同
    "wrap_line_length": 100, // 换行的列数值
  }
}
复制代码