还在手动调整代码格式？还在为团队代码风格不统一而头疼？
相信很多朋友都遇到过这样的痛苦场景：
- 写完代码一团糟，看着就难受
- 团队成员代码风格千差万别，维护起来要命
- 每次提交代码前都要手动整理格式，费时费力
上一篇《10分钟搞定Vue3项目》已经搭建好了项目基础架构，脚手架已经帮我们集成了三大神器：
- Prettier：代码自动美化，告别手动格式化
- ESLint：代码规范检查，统一团队风格
- TypeScript：类型检查，减少低级错误
但是光有工具还不够，还得让你的开发工具"认识"这些神器才行！今天就用WebStorm来演示，教你如何让开发工具自动帮你干活。
让WebStorm认识Prettier
打开 Settings，搜索 Prettier，找到 Prettier 选项。
配置 Prettier package 为项目当中的 Prettier 包路径，点击右侧的 ... 选择项目当中的 node_modules/prettier 路径。
这里我还勾选了一个 Run on 'Reformat Code' action，意思是当我在 WebStorm 当中使用 Reformat Code 功能时，也会触发 Prettier 代码美化。
测试Prettier是否生效
好了这样 Prettier 就配置好了，接下来测试一下，随便找一个 Vue 文件，右键选择 Reformat with Prettier。
可以看到代码被 Prettier 美化了。
只要在执行 Prettier 代码美化的时候不报错，表示配置工程化成功。
如果发现格式化效果不好，也没有关系，之后可以使用另外一种格式化方式。
ESLint配置（可选）
为了开发效率更高，可以关闭 ESLint 的校验导致的编译错误，同样可以在开发工具中禁用 ESLint。
打开 Settings，搜索 ESLint，找到 ESLint 选项，选择 Disable ESLint。
如果要开启 ESLint 校验，选择 Automatic ESLint configuration，意思就是自动配置 ESLint。
还有就是修改 eslint.config.js、.prettierrc.json、tsconfig.json 文件可以改变 ESLint、Prettier、TypeScript 的校验规则。
如果不使用脚手架，就需要自己整合这些工具：
- 代码规划(eslint)：https://eslint.org/docs/latest/use/getting-started
- 代码美化(prettier)：https://prettier.io/docs/install.html
- 直接整合：https://github.com/prettier/eslint-plugin-prettier#recommended-configuration（包括了 https://github.com/prettier/eslint-config-prettier#installation）
对于前端新手来说, 直接使用脚手架即可，省时省力。不需要再深入了解这些工具的配置细节。
纯当工具使用即可，应该把更多的精力放在业务代码的开发上。