下载掌阅APP，畅读海量书库
立即打开
代码格式化工具可以保持代码格式风格的一致性。Prettier是一款开源的JavaScript/TypeScript的代码格式化工具。虽然ESLint也支持一些代码格式化，但是在实际应用中通常会把代码格式化和风格检查隔离开。本书提供的 @skimhugo/eslint-config 借鉴了https://github.com/AlloyTeam/eslint-config-alloy的理念，即ESLint完全关闭格式化功能，格式完全交由Prettier来处理。因为代码格式化配置一般固定下来以后，通常对代码影响较小，可以在IDE设置保存自动格式化。但是代码风格因为影响较大，很多时候也会用eslint-disable语法禁用一些限制，所以通常不会使用代码风格格式化自动设置。另一个区别是，ESLint因为影响的语法部分比较多，如影响全局变量，通常会以Monorepo子项目作为配置单位，即有多少子项目，就有多少ESLint的配置文件，而Prettier的自定义空间很小，通常只在根工作目录放置一个配置文件.prettierrc，影响全局即可。
Prettier的设计理念是“ 约定大于配置 ”，为了实现这个理念，Prettier坚持具备很少的配置项，这样做的好处是减少在代码风格上的争论，让开发者更专注于代码的功能实现。Prettier详情如表2-4所示。
表2-4 Prettier详情
在项目根目录命令行终端执行Prettier安装命令。
执行后，package.json中会新增Prettier依赖。
在项目根工作目录新建Prettier配置文件.prettierrc.cjs，用于配置具体格式化规则，内容如下。
新建.prettierignore文件，用于设置Prettier忽略的文件列表，内容如下。
最后安装VS Code的Prettier插件，打开VS Code扩展菜单栏搜索Prettier，选择发布者是Prettier的扩展，单击“安装”按钮进行安装，如图2-12所示。
图2-12 Prettier VS Code插件安装
开发者可以通过设置settings.json文件，在VS Code保存文件时自动使用Prettier来格式化代码。
在Monorepo项目根目录的 .vscode/settings.json 中添加如下配置，这个设定只会影响该项目。
