开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

前言：

成功没有捷径但成长有路径

老概念新理解，重点记录一下

正文

背景

最近团队有新同学过来，团队协作的时候总是遇到代码格式化不一样的问题，梳理一下我们的基本配置，应用Eslint+Prettier来提升代码质量。

主要分为几个点 1，Prettier是什么? 官网 2，为什么要用Prettier? 3，Prettier的优势以及配置Prettier 4，eslint和prettier什么关系

代码格式化有以下优点：

1.代码格式化后更易于阅读和修改。

2.不需要去刻意调整代码样式了，代码格式化工具会帮你做好。

3.团队可以使用统一的代码格式化，减少冲突。

正文

prettier是JavaScript以及其他一些文件类型的格式化工具，VSCode提供了prettier插件，我们可以使用它对代码格式化。

如何使用prettier

1.安装prettier

tnpm i -g prettier

2,安装编辑器插件

• vscode 安装prettier - code formatter插件
• 打开vsc的配置页面，增加下面的配置，文件会在保存的时候直接格式化

"editor.formatOnSave"：true

3，公共配置 .prettierrc 把配置文件放到项目根目录就可以了

更多配置选项，查看官方文档 prettier.io/docs/en/opt…

4，eslint和prettier什么关系 默认的逻辑为,如果用户配置了prettierrc则会使用prettier 里格式化,如果没有则会使用prettier-eslint,读取eslint的配置,执行类似eslint fix的操作。

Eslint解决了代码格式检查的问题，同时会给一些提示能让我们发现bug和无用代码，但是，eslint并不能自动帮我们美化代码，自动让代码风格统一，格式优美。后来出现了一些工具，这些做得还是太少了。Prettier 很好地解决了剩下的问题，通过配置，我们可以制定想要的代码风格，然后一键格式化。