前端跨界开发指南:JavaScript工具库原理解析与实战
上QQ阅读APP看书,第一时间看更新

3.4 新秀工具Prettier

Prettier是一个调整前端开发中常见文件格式的格式化工具,官方还提供了针对其他编程语言的扩展插件。Prettier可用于扫描文件中的格式问题,并自动重新格式化代码,以确保缩进、间距、分号、单双引号等遵循一致的规则,可以将它看作升级版的editorconfig,但Prettier的使用方式更加多元化,对于排版格式的控制粒度也更细,支持命令行、nodeAPI、ESLint插件等多种引入方式,是一个非常适合前端开发的新秀工具。正如官方网站的指南中所描述的那样,“使用Prettier最大的理由就是它可以终止所有现存的有关格式的争论”。

Prettier从安装、配置再到使用,整个过程与ESLint极其相似,浏览一下官方文档,你会发现很容易上手使用。需要注意的是,如果希望它能够与自己的代码编辑器配合使用,则仍然需要从官网下载对应编辑器的插件。一个典型的“.prettierrc”配置文件是下面这样的(完整的配置项可以查阅官方文档):

{
    "printWidth":80,             //每一行字符数,超出后会启用换行策略
    "tabWidth":4,                //每个Tab代表几个空格
    "useTabs":false,             //是否使用Tab进行缩进,默认为false,即使用空格进行缩进
    "semi":false,                //是否在语句后强制加分号
    "singleQuote":true,          //字符串是否使用单引号
    "trailingComma":none,        //是否去除末尾逗号
    "bracketSpacing":true,       //对象字面量的大括号与内容之间是否自动添加空格
}

如果已经在全局安装了Prettier工具,那么只需要在项目的根目录下开启命令行,并输入“Prettier”就可以进行代码的格式化了。对于在初始化时就使用了Prettier工具的项目,建议直接在IDE中将其配置为“保存时自动格式化”的形式。

拓展知识

ESLint和Prettier是非常好的搭档,尽管有时候因为配置的问题可能会在检查项上出现冲突,这种时候根据实际要求关闭其中一个的检查项即可。总之,ESLint更倾向于发现和修复语言本身相关的漏洞或风险,而Prettier关注的则是格式和排版风格方面的一致性,两者各司其职。