安装Vetur
配置自动格式化,具体路径【文件】-【首选项】-【设置】,打开设置(json)
{
"workbench.iconTheme": "material-icon-theme", // 指定工作台中使用的文件图标主题
"window.zoomLevel": 0, // 调整窗口的缩放级别,原始大小是 0
"editor.formatOnSave": true, // 在保存时格式化文件
"editor.tabSize": 2, // 一个制表符等于的空格数
"[jsonc]": {
"editor.defaultFormatter": "octref.vetur" // 定义一个默认格式化程序
},
"[javascript]": {
"editor.defaultFormatter": "octref.vetur" // 定义一个默认格式化程序
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur" // 定义一个默认格式化程序
},
"files.autoSave": "off", // 控制自动保存未保存的编辑器
"git.confirmSync": false, // 同步Git存储库前请先进行确认
"git.autofetch": true, // 启用时,提交将自动从当前Git存储库的默认远程获取
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数名和后面的括号之间加个空格
"vetur.format.options.tabSize": 2, // 每个缩进级别的空格数,由所有格式化程序继承
"vetur.format.scriptInitialIndent": false, // js部分是否有初始缩进
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// - auto: 仅在超出行长度时才对属性进行换行
// - force: 对除第一个属性外的其他每个属性进行换行
// - force-aligned: 对除第一个属性外的其他每个属性进行换行,并保持对齐
// - force-expand-multiline: 对每个属性进行换行
// - aligned-multiple: 当超出折行长度时,将属性进行垂直对齐
"wrap_attributes": "force-expand-multiline", // 属性折行对齐方式
"wrap_line_length": 120, // 设置一行多少字符换行
"semi": false, // 是否在每行末尾添加分号
"singleQuote": true, // 使用单引号
"end_with_newline": false
}
},
"eslint.validate": [
"javascript",
"html",
"vue"
]
}