介绍

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的配置项非常少，可以参加官方文档，不过后面遇到一些问题，后面再说要怎么更改。

ESlint如果是通过Vue cli 创建的项目，只要在创建项目的时候代码检查选项时候勾选 ESlint + prettier 即可，基础配置已经都帮我们配置好了。

还可以在 VS Code 中设置保存时触发格式化。

使用时候遇到的一些问题

Q1：包裹文字时候结束标签的结尾尖括号掉到了下一行。如图：

原因可能是Vue模板的格式逻辑不严谨问题，不过只要通过Prettier设置即可解决:

Prettier:HTMLWhitespaceSensitivity ： 'ignore'

Q2: Prettier: 在编辑器设置的选项无效？

如果更改了 Prettier 的设置选项，但实际不起作用，可以尝试在根目录新建一个 .prettierrc 文件，通过json来配置，这样做的好处可以把配置上传到代码服务器，团队都使用相同格式的代码。如：

{

"printWidth": 200, // 最大打印宽度，超出将换行

"singleQuote": false, // 默认单引号 ，false 默认使用双引号

"bracketSpacing": true,

"jsxBracketSameLine": true,

"htmlWhitespaceSensitivity": "ignore" // 问题1中的设置

}

Q3：Prettier 格式化后 ESlint 检查警报，并更改了我的代码格式.

首先检查ESlint 配置是否使用了prettier规则，如果确定使用了，则是一些自定义规则在ESlint 和 Prettier插件中的配置不一致导致的。检查eslintrc.js

module.exports = {

root: true,

env: { node: true },

extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"],

rules: {

"no-console": process.env.NODE_ENV === "production" ? "error" : "off",

"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",

"prettier/prettier": [

"error",

// 如果插件配置中修改了相关选项，// 则必须在此添加相对应的自定义规则否则就会出现编辑器格式化后ESlint检查无法通过的情况。 {

printWidth: 200,

singleQuote: false,

bracketSpacing: true,

jsxBracketSameLine: true,

htmlWhitespaceSensitivity: "ignore"

}

]

},

parserOptions: { parser: "@typescript-eslint/parser" }

};