最近开发Vue项目，由于前面的前端开发离职，写的代码混乱，没有统一的格式，于是想搞一套前端统一格式化的配置，方便以后代码查看，git提交等。

然后我就查阅资料写了各种配置项

{

"explorer.confirmDelete": false，

"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",

"vetur.format.defaultFormatter.html": "js-beautify-html",

"vetur.format.defaultFormatter.stylus": "stylus-supremacy",

// 可以通过关闭自动设置选项，防止格式覆盖

"editor.detectIndentation": false,

// 控制折行的方式。

"editor.wordWrap": "wordWrapColumn",

// 超出160个字符开始折行

"editor.wordWrapColumn": 160,

// 折行方式 下面配置项有说明

"vetur.format.defaultFormatterOptions": {

"js-beautify-html": {

// - auto: 仅在超出行长度时才对属性进行换行。

// - force: 对除第一个属性外的其他每个属性进行换行。

// - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。

// - force-expand-multiline: 对每个属性进行换行。

// - aligned-multiple: 当超出折行长度时，将属性进force-aligned行垂直对齐。

"wrap_attributes": "aligned-multiple" //我这里是想配置超出160个字符开始折行(HTML模板)，并且第一个属性不折行，后面的属性对其第一个属性折行，没有超出160个字符，属性不折行，但是不成功

}

},

"emmet.triggerExpansionOnTab": true,

"emmet.includeLanguages": {

"vue-html": "html",

"vue": "html"

},

// 保存格式化

"editor.formatOnSave": true,

"prettier.tabWidth": 4,

"vetur.format.options.tabSize": 4,

"prettier.useTabs": true,

"vetur.format.options.useTabs": true,

"window.zoomLevel": 0,

"editor.formatOnType": true,

// tab4个空格

"editor.tabSize": 4,

// 让vue中的js按编辑器自带的ts格式进行格式化

"vetur.format.defaultFormatter.js": "vscode-typescript",

// 函数名前 加空格

"javascript.format.insertSpaceBeforeFunctionParenthesis": true,

"[markdown]": {},

// #去掉代码结尾的分号

"prettier.semi": true,

"files.associations": {

"*.json": "json"

}

}

我在这里面遇到了几个问题

折行问题

// 控制折行的方式。

"editor.wordWrap": "wordWrapColumn",

// 超出160个字符开始折行

"editor.wordWrapColumn": 160,

// 折行方式 下面配置项有说明

"vetur.format.defaultFormatterOptions": {

"js-beautify-html": {

// - auto: 仅在超出行长度时才对属性进行换行。

// - force: 对除第一个属性外的其他每个属性进行换行。

// - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。

// - force-expand-multiline: 对每个属性进行换行。

// - aligned-multiple: 当超出折行长度时，将属性进force-aligned行垂直对齐。

"wrap_attributes": "aligned-multiple" //我这里是想配置超出160个字符开始折行(HTML模板)，并且第一个属性不折行，后面的属性对其第一个属性折行，没有超出160个字符，属性不折行，但是不成功

}

}

这几句的意思在注释中我也说的明白，就是不成功，wrap_attributes 这个属性的值是 force-aligned 时能够生效，但是设置 aligned-multiple 不生效，到现在还没解决

格式化问题

我上面设置的是空格4格 tab也是4格，但是实际近过程中，我发现新文件能够按照我想要的方式进行格式化，但是有些文件依然不是要想要的效果，有些还是2格格式化。

不过好的事我在网上找到了一个解决方案，我忽略了一个项目配置文件 .editorconfig ，然后我按照他的方法配置过后好像能满足我的效果。配置如下

root = true

[*]······

indent_style = space # 空格缩进

indent_size = 4 # 缩进空格为4个

end_of_line = lf # 文件换行符是 linux 的 `\n`

charset = utf-8 # 文件编码是 utf-8

trim_trailing_whitespace = true # 不保留行末的空格

insert_final_newline = true # 文件末尾添加一个空行

curly_bracket_next_line = false # 大括号不另起一行

spaces_around_operators = true # 运算符两遍都有空格

indent_brace_style = 1tbs # 条件语句格式是 1tbs

[*.js] # 对所有的 js 文件生效

quote_type = single # 字符串使用单引号

[*.{html,less,css,json}] # 对所有 html, less, css, json 文件生效

quote_type = double # 字符串使用双引号

[package.json] # 对 package.json 生效

indent_size = 4 # 使用2个空格缩进

··