曾经入职过一些公司，第一天项目老大就说我们有代码规范，比如每行代码的缩进是多少，函数名后面有没有空格等，我当时就提出说这种格式上的规范为什么不在项目里放一个格式化文件，为什么要去规定每个成员用手去敲这些格式，老大说，这个敲一下不费什么事吧，反正我们以前没用格式化工具，当时我就在心里给他打了一个‘不是合格程序员’的标签，果然我也没能在这个组里待太久，可能不合格的是我吧。
代码格式化我现在的套路就是eslint、 prettier、 vetur
eslint 是用来做语法上的规范的，vetur 是对vue文件的格式化的，但是它本身在格式化能力上不强，所以需要prettier做支持。
首先vs code 的格式化你可以在本地配置，和工作区配置，鉴于我们每个团队项目的格式化需求不同，所以建议你配置到工作区；vs code 配置快捷键ctrl + shift + p；输入 setting 就可以进入设置文件。你会在你的项目目录下看到如下文件；
然后在里面复制我如下代码
{
// vetur的配置 我还是比较喜欢vetur 来做vue的格式化，prettier一些功能的支持，eslint 是在代码还在没有运行做eslint检查
/* vue 文件的配置 */
// 格式化vue 文件的默认插件
"[vue]": {
"editor.defaultFormatter": "octref.vetur" // 使用vuter 格式化vue 文件
},
"vetur.validation.template": false, //让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript", // 处理js 部分的插件
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前面加上空格
"vetur.format.scriptInitialIndent": false, //默认script标签缩进
"vetur.format.styleInitialIndent": false, //默认style标签缩进
// vetur 的配置依赖prettier插件，有些配置必须这种写法
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, //无分号
"singleQuote": true, //单引号
"TrailingCooma": true, //让对象里面有个空格
"eslintIntegration": true // 是否用eslint 整合
}
},
"vetur.format.options.tabSize": 4, // 空格缩进
/* js 文件的配置 */
// 格式化js 文件的插件
"[javascript]": {
"editor.defaultFormatter": "svipas.prettier-plus"
},
/* prettier的配置 */
"prettier.tabWidth": 4, // 空格缩进
"prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
/* json 文件的配置 */
// 格式化json 文件的插件
"[json]": {
"editor.defaultFormatter": "svipas.prettier-plus" // 使用prettier 格式化json 文件
},
/* 结束 */
}
如果你喜欢我，可以关注我的公众号，九月有风，支持一下
