格式化配置优先级：
1、项目中的配置文件：eslintrc.js、editconfig.js等
2、settings.json中的配置
VScode用户设置
- 打开设置
文件--首选项--设置，打开用户设置。VScode支持选择配置，也支持编辑setting.json文件修改默认配置。个人更倾向于编写json的方式进行配置。
这里解析几个常用配置项：
（1）editor.fontsize用来设置字体大小，可以设置editor.fontsize : 14;
（2）files.autoSave这个属性是表示文件是否进行自动保存，推荐设置为onFocusChange——文件焦点变化时自动保存。
（3）editor.tabCompletion用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值，推荐设置为on;
（4）editor.codeActionsOnSave中的source.organizeImports属性，这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列，推荐设置为true,即"editor.codeActionsOnSave": { "source.organizeImports": true }；
（5）editor.lineNumbers设置代码行号,即editor.lineNumbers ：true；
个人配置参考：
{
"files.associations": {
"*.vue": "vue",
"*.wpy": "vue",
"*.wxml": "html",
"*.wxss": "css"
},
"terminal.integrated.shell.windows": "C:\Windows\System32\cmd.exe",
"git.enableSmartCommit": true,
"git.autofetch": true,
"emmet.triggerExpansionOnTab": true,
"emmet.showAbbreviationSuggestions": true,
"emmet.showExpandedAbbreviation": "always",
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html",
"wpy": "html"
},
//主题颜色
//"workbench.colorTheme": "Monokai",
"git.confirmSync": false,
"explorer.confirmDelete": false,
"editor.fontSize": 14,
"window.zoomLevel": 1,
"editor.wordWrap": "on",
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
//失去焦点后自动保存
"files.autoSave": "onFocusChange",
// #值设置为true时，每次保存的时候自动格式化；
"editor.formatOnSave": false,
//每120行就显示一条线
"editor.rulers": [
],
// 在使用搜索功能时，将这些文件夹/文件排除在外
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/target": true,
"**/logs": true,
},
// 这些文件将不会显示在工作空间中
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/*.js": {
"when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中
},
"**/node_modules": true
},
// #让vue中的js按"prettier"格式进行格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// #vue组件中html代码格式化样式
"wrap_attributes": "force-aligned", //force、auto
"wrap_line_length": 200,
"end_with_newline": false,
"semi": false,
"singleQuote": true
},
"prettier": {
"semi": false,
"singleQuote": true
}
}
}
jsbeautify格式化html属性分行展示
{
"eol": "\n", //all.行结束符
"end_with_newline": false,//all,确保在文件结束时换行
"indent_char": "\t",//all,缩进字符，默认" "，\t 跳格(移至下一列)
"indent_size": 4,//all,缩进尺寸，默认4
"indent_with_tabs": true, //all,使用tab缩进,将会覆盖“indent_size”和“indent_char”设置，默认false
"preserve_newlines": true,//all,保留空行，默认“true”（保留换行符）
"max_preserve_newlines": null,//html、js,保留连续换行符个数，默认10（比如设为2，则会将2行以上的空行删除为只保留1行）
"wrap_line_length": 0,//html、js,在 n 个字符之后换行(设置为0忽略换行)
"html":{
"extra_liners":["head", "body", "/html"], //配置标签列表，需要在这些标签前面额外加一空白行（换行符）
"indent_body_inner_html":false,//缩进 < body> 中的元素，默认：true
"indent_handlebars":true,//格式和缩进，默认为false
"indent_head_inner_html":false, //缩进 < head> 中的元素，默认：true
"indent_inner_html":true,// 缩进< head>和< body>中的元素（head和body也会缩进），默认：false
"indent_scripts":"normal",//缩进< script> 标签里的代码，有三个值：“keep”(对齐< script>标签)、“separate”(对齐左边界)、“normal”(正常缩进)，默认：“normal”
"inline":[],//各种标签的缩进[ "a", "abbr", "area", "audio", "b", "bdi", "bdo", "br", "button", "canvas", "cite", "code", "data", "datalist", "del", "dfn", "em", "embed", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "map", "mark", "math", "meter", "noscript", "object", "output", "progress", "q", "ruby", "s", "samp", "select", "small", "span", "strong", "sub", "sup", "svg", "template", "textarea", "time", "u", "var", "video", "wbr", "text", "acronym", "address", "big", "dt", "ins", "strike", "tt" ]
"wrap_attributes":"auto",//将属性换到新行，有5个值：“auto”(不换行)、“force”(第2个起换行)、 “force-aligned”(第2个起换行，与第1个属性对齐)、 “force-expand-multiline(所有属性都换行)，默认：“auto”
"wrap_attributes_indent_size":4,//属性换行缩进大小,默认：indent_size
"unformatted":[],//数组中的标签不会重新格式化，默认：[]
"content_unformatted":[],//数组中标签的内容不会重新格式化，默认：[“pre”,“textarea”]
"void_elements":[],//定义自关闭标签,["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "menuitem", "meta", "param", "source", "track", "wbr", "!doctype", "?xml", "?php", "?=", "basefont", "isindex"]
},
"js":{
"brace_style":"collapse",//括号风格，“collapse-preserve-inline”, “collapse”, “expand”, “end-expand”, or “none” ,默认“collapse”
"break_chained_methods":true,//中断多行间的链式方法调用，默认true
"comma_first":true,//将逗号放在新行的开头而不是结尾，默认为false
"e4x":true,// 不受影响地传递E4X xml文本,默认为false
"indent_level":0,// 初始缩进级别
"jslint_happy":true,// 开启jslint-stricter的严格模式（强制开启“space_after_anon_function”选项）,默认false
"keep_array_indentation":true,// 保持数组缩进，默认false
"keep_function_indentation":true,// 保持函数缩进，默认false
"operator_position":"before-newline",// 将操作符移动到新行之前或之后，或保持原样。“before-newline”， “after-newline”，或"preserve-newline",默认为"before-newline"
"space_after_anon_function":true,// 在匿名函数的括号前加空格,默认为false
"space_after_named_function":,// 在具名函数之前加一个空格
"space_before_conditional":true,// 在条件语句之前保留一个空格，默认true
"space_in_empty_paren":true,// 在括号中留空格，默认为false
"space_in_paren":true,// 在函数参数之间增加空格，默认为false
"unescape_strings":true,// 解码用xNN表示法编码的可打印字符,默认为false
"unindent_chained_methods":true,// Unindent链接方法,默认为false
}
"css":{
"newline_between_rules":false,//在css规则之间添加一个换行符，默认为false
"selector_separator_newline":true,//在多个选择器之间加一个换行符
"space_around_combinator":false,//确保选择器分隔符周围的空间 (>+~)
}
}
