如何统一、美化编码风格？

【观点】：团队中保持统一、美观的编码风格是绝对有必要滴！

今天给大家介绍两款编码风格美化小工具：

EditorConfig； Prettier；

它们配置简单、主流IDE都支持、Ctrl+S就能触发（忘了 Ctrl+Shift+F 吧

）。

图：ant-design-icons 开源项目中就有使用

1. EditorConfig ？

A. 是什么？

EditorConfig 不是什么软件，而是一个名为 .editorconfig 的配置文件，该文件描述了项目的编码规范。

图：.editorconfig 的常规配置；

B. 放哪？

通常在项目根目录放一个就ok。

图：.editorconfig放项目根目录就行

C. 需要额外装插件吗？

不需要，主流 IDE 基本都原生支持 EditorConfig；

图：这些 IDE 原生支持 EditorConfig；

D.怎么触发？

Ctrl + S 保存文件时自动触发；

2. Prettier？

A. 是什么？

是个流行的代码格式化工具；

动图：使用 Prettier 格式化代码；

B. 需要安装什么？

只需要在项目中安装一个 prettier 组件；

npm install --save-dev --save-exact prettier

C. 需要配置什么？

• 在项目根目录放一个.prettierrc 配置文件，描述项目代码格式；

图：Prettier 典型配置；

• 配置 WebStorm，实现保存时（Ctrl + S）触发格式化；

图：Prettier 的 WebStorm 配置；

3. EditorConfig or Prettier？

EditorConfig 很好用，但功能有限（只能控制字符集、缩进、空行）。 Prettier 则更进一步，可以针对语言进行美化，功能更强大。建议将 EditorConfig 与 Prettier 配合使用。

参考：

EditorConfig官网：https://editorconfig.org/ Prettier官网：https://prettier.io/