eslint 无法格式化ts_详解如何在vue项目中使用eslint+prettier格式化代码

对于前端代码风格这个问题一直是经久不衰，每个人都有自己的代码风格，每次看到别人代码一团糟时候我们都会吐槽下。今天给大家介绍如何使用eslint+prettier统一代码风格。

对于eslint大家应该比较了解了，是用来校验代码规范的。给大家介绍下prettier,prettier是用来统一代码风格，格式化代码的，支持js、ts、css、less、scss、json、jsx。并且集成了vscode、vim、webstorm、sublime text插件。

如果你的项目中采用的是ellint默认规则并且没有添加别的规则、没有使用standard或airbnb得风格，你可以下载编辑器插件直接保存代码时自动格式化。

以vscode为例：搜索插件  Eslint、vuter、prettier-code安装，在编辑器首选项   配置中修改配置

//由于prettier不能格式化vue文件template 所以使用js-beautify-html格式化

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

"vetur.format.defaultFormatterOptions": {

"js-beautify-html": {

"wrap_attributes": "force-aligned" //属性强制折行对齐

}

},

"eslint.autoFixOnSave": true, //保存时使用自动格式化

"eslint.validate": [ //验证文件类型

"javascript",

"