废话不多说上图
vetur直接点击设置 进入拓展设置
前提下载 Vetur !!!
点击 JSON中编辑 后 copy 下方代码
最后附带 换行方法 个人整合所有方法集合
{
"workbench.colorTheme": "Default Light+",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 添加 vue 支持
"eslint.validate": ["javascript", "vue", "html"],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "aligned-multiple"
// #vue组件中html代码格式化样式
}
},
// 格式化stylus, 需安装Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false,
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"files.associations": {
".eslintrc": "json",
"*.vue": "vue",
"vetur.validation.template": "false"
},
"git.ignoreWindowsGit27Warning": true,
"git.openRepositoryInParentFolders": "never",
"bracket-pair-colorizer-2.depreciation-notice": false,
"workbench.startupEditor": "none"
}
标签之间不换行 搜索 “wrap_attributes” copy 后边的 粘贴 “wrap_attributes”: “aligned-multiple”
标签之间换行 搜索 “wrap_attributes” copy 后边的 粘贴 “wrap_attributes”: “force-aligned”
注 :
// 对属性进行换行 wrap_attributes
// - auto: 仅在超出行长度时才对属性进行换行。
// - force: 对除第一个属性外的其他每个属性进行换行。
// - force-aligned: 对除第一个属性外的其他每个属性进行换行,并保持对齐。
// - force-expand-multiline: 对每个属性进行换行。
// - aligned-multiple: 当超出折行长度时,将属性进行垂直对齐。
// prettyhtml(doc: string, options?): vFile
// - tabWidth: 缩进级别的空间宽度(默认值:2)
// - useTabs: 使用制表符代替空格进行缩进(默认值:false)
// - printWidth: 使用不同的最大行长度(默认值:80)
// - usePrettier: 对嵌入内容使用更漂亮(默认值:true)
// - prettier: 为嵌入的内容使用自定义更漂亮的设置(默认:本地配置)
// - singleQuote: 使用单引号代替双引号(默认值:false)
// - wrapAttributes: 强制包装属性(当它有多个时,默认:false)
// - sortAttributes: 按字母顺序对属性进行排序(默认值:false)
能看到最后 再告诉你 如果一开始用VScode v-for 飘红怎么办 好办 看图