一、插件要求

Prettier

Vetur

二、配置文件

{"workbench.startupEditor": "newUntitledFile","files.autoSave": "off", // 关闭文件自动保存，避免开发时候页面变化"editor.tabSize": 2, // tab距离"vetur.format.options.tabSize": 2, //"editor.formatOnSave": true, // 在保存时自动格式化"editor.minimap.enabled": true, // 关闭右侧快速预览"files.eol": "\n", // 设定文件的换行符,\n（linux模式）或\r\n(win模式)"editor.detectIndentation": false, // 关闭vscode的缩进检查"editor.fontSize": 14, //设置文字大小"editor.lineHeight": 0, //设置文字行高"editor.lineNumbers": "on", //开启行数提示"editor.quickSuggestions": {//开启自动显示建议"other": true,"comments": true,"strings": true},"window.zoomLevel": 0, // 调整窗口的缩放级别//根据文件后缀名定义vue文件类型"files.associations": {"*.vue": "vue"},// 为各类文件制定Fatmatter插件"[vue]": {// "editor.defaultFormatter": "esbenp.prettier-vscode" // 采用prettier处理格式化"editor.defaultFormatter": "octref.vetur" // 采用vetur来处理Fatmatter},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[jsonc]": {"editor.defaultFormatter": "vscode.json-language-features"},// Vetur 的各类设定,仅当上面[vue]的editor.defaultFormatter的值为octref.vetur的时候，才起效"vetur.format.options.tabSize": 4,"vetur.format.defaultFormatter.html": "js-beautify-html", // 针对vue中的template部分的风格模版，也可以是：prettier"vetur.format.defaultFormatter.css": "prettier", // 针对vue中的style部分的风格模版"vetur.format.defaultFormatterOptions": {"js-beautify-html": {  // 给js-beautify-html设置属性隔断"wrap_line_length": 200, //换行长度// 属性换行// 对属性进行换行。// - auto: 仅在超出行长度时才对属性进行换行。// - force: 对除第一个属性外的其他每个属性进行换行。// - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。// - force-expand-multiline: 对每个属性进行换行。// - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。"wrap_attributes": "aligned-multiple",// Maximum number of line breaks to be preserved in one chunk (0 disables)// "max_preserve_newlines": 0,"end_with_newline": false,"singleQuote": true,},"prettyhtml": {"printWidth": 120,"singleQuote": true,"wrapAttributes": false,"sortAttributes": false},"prettier": {// Prettier option here"wrap_attributes": "auto","printWidth": 120,"trailingComma": "none", // 多行时，尽可能打印尾随的逗号"tabWidth": 4, // 会忽略vetur的tabSize配置"useTabs": false, // 是否利用tab替代空格"semi": true, // 句尾是否加;"singleQuote": true, // 使用单引号而不是双引号"arrowParens": "avoid", // allow paren-less arrow functions 箭头函数的参数使用圆括号"trailingComma": "all","htmlWhitespaceSensitivity": "ignore"}},// 函数名后增加空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
}