聊一聊 vscode 的代码格式化

写在开头

这篇文章来聊一聊我在 vscode 代码格式化上遇到的一些坑。

如果你想快速配置自己的 vscode 支持保存自动格式化功能，请看另一篇文章：三步搞定 vscode 代码格式化

先贴出最终的配置文件：

{// tab 大小为2个空格"editor.tabSize": 2,// 100 列后换行"editor.wordWrapColumn": 100,// 保存时格式化"editor.formatOnSave": true,// 开启 vscode 文件路径导航"breadcrumbs.enabled": true,// prettier 设置语句末尾不加分号"prettier.semi": false,// prettier 设置强制单引号"prettier.singleQuote": true,// 选择 vue 文件中 template 的格式化工具"vetur.format.defaultFormatter.html": "prettyhtml",// 显示 markdown 中英文切换时产生的特殊字符"editor.renderControlCharacters": true,// 设置 eslint 保存时自动修复"eslint.autoFixOnSave": true,// eslint 检测文件类型"eslint.validate": ["vue","html","javascript","typescript","javascriptreact","typescriptreact"],// vetur 的自定义设置"vetur.format.defaultFormatterOptions": {"prettier": {"singleQuote": true,"semi": false}},"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
}

一、eslint 和 prettier 的区别

1、 eslint

eslint 是用来做代码风格检查的，比较关注代码质量，并且会提示不符合风格规范的代码。除此之外 eslint 也具有一部分代码格式化的功能。

这里我们先对 eslint 做对应的配置：

  // 保存时格式化"editor.formatOnSave": true,// 设置 eslint 保存时自动修复"eslint.autoFixOnSave": true,

为什么说是一部分格式化的功能呢？这里给大家举个例子，如下图是用 eslint 格式化 js 文件的效果：

可以看出，eslint 的确格式化了代码，但是中间的空行并没有被格式化。还是有点欠缺的哈。

2、prettier

prettier 本身就是用来做代码格式化的，准确的说它是来美化代码的，所以这方面有更大的优势。同时 prettier 也是对 eslint 格式化的基础上的一个极好的补充。

那么两者都有格式化的功能，就不会有冲突吗？

当然有了，不过只要简单的配置就可以解决了，比如语句末尾不加分号和强制单引号等 eslint 风格检查。配置如下：

  // prettier 设置语句末尾不加分号"prettier.semi": false,// prettier 设置强制单引号"prettier.singleQuote": true,

来看看效果，这下连空行也可以格式化了：

到这是不是就完了，其实还有个冲突就是匿名函数后空格的问题。 function () （eslint 推荐）和 function() （prettier 推荐）的冲突。我们后面继续说这个问题。下面来看对 vue 文件格式化的配置。

二、vue 文件格式化配置（Vetur 配置）

vscode 对 vue 的支持也是很棒的。对于 vue 的格式化，我们用到了 Vetur 插件，Vetur 插件的格式化大多也是直接用的 prettier 规范。这也是我们选择 prettier 格式化代码的原因之一。

Vetur 的格式化配置只需修改关于模版的部分就好了。

  // 选择 vue 文件中 template 的格式化工具"vetur.format.defaultFormatter.html": "prettyhtml",

用 prettyhtml 格式化 template 可以消除多余的空行，并且对属性超长的行可以合理换行显示。

三、问题

1、vue 文件和 html 文件，没有 eslint 风格提示。

vue 文件：

html 文件：

解决方法：
在 setting.json 文件中加入如下配置：

// eslint 检测文件类型"eslint.validate": ["vue","html","javascript","typescript","javascriptreact","typescriptreact"]

再看看效果，已经有提示了，html 文件也一样，就不展示了：

2、 `function ()` （eslint 推荐）和 `function()` （prettier 推荐）的风格冲突问题

上面提到过这个问题，这里来说说我自己的处理方法，大家可以参考。

如果推崇 eslint 的规范，也就是 function () 这种的。那么恭喜你，你什么都不用改。

如果你和我一样推崇 prettier 的规范，也就是 function() 这种的。那么就需要改改了。

先把 setting.json 中 eslint.validate 字段关于 vue 的自动修复功能注释掉。这样保证在格式化 vue 文件的时候，走
prettier 的规范，而不再需要根据 eslint 的规范，进行 fix。

这样做有个好处是，如果你的项目不需要配置 eslint 来检查代码，代码就不需要格式化为 eslint 的规范。

 {"language": "vue"// "autoFix": true}

但是如果你的项目配置了 eslint ，比如用 vue-cli 构建的项目，一般都会进行 eslint 检查。那么就在项目根目录的 eslintrc.js 中添加下面的配置，这种情况就可以 autoFix 了，自动修复成 eslint 的规范。

// 自定义的规则
module.exports = {rules: {'space-before-function-paren': 0}
}

over。