eslint 无法格式化ts_VS Code Prettier + ESlint 格式化Vue代码及遇到问题

介绍

prettier​prettier.io

prettier是一个专业代码格式化工具，支持JS、TS、sass、less、HTML、java、yaml、md、swift等等，主流的语言大多都支持。提供了VS、VSC 、Vim 、Atom、sublime 、WebStorm 等 IDE/编辑器插件，可以很方面安装及使用。下面介绍下 vscode 下的 配合eslint检查 vue代码的相关配置介绍和一些问题。

Vetur是一个 Vue文件(.vue)的VS Code 插件，其他编辑器应该有另外的第三方插件。

配合 VS Code 及 ESlint 使用

首先通过VS Code插件市场安装 prettier 和 Vetur。如下图：

然后重启VS Code

Vetur设置(文件 -> 首选参数 -> 设置 -> 扩展 -> Vetur)

找到 format > defanult formatter: xxxx

将所有的 formatter 都改成 prettier ，这样在格式化 *.vue文件 内部的 html模板/js/ts/css/sass时候都会调用 prettier 进行格式化。当然还有其他一些格式化参数也可以尝试去更改，例如：

Completion:Tag Casing 表示Vue标签是连接线式'my-button'的 还是 component变量的驼峰式 'MyButton' 的。

Completion:Auto Import 自动导入包

Validation:Script/Style/Template 检查模板

等等。

prettier的配置项非常少，可以参加官方文档࿰