background大部分同学在前端代码格式化的时候都用过prettier。比如在vscode中安装prettier插件可以格式化任意文件，或者只格式化文件中选定的部分。prettier的作用是按照统一的风格美化代码。在工程量比较大的项目中，需要加入eslint检查代码质量，保证在代码提交前发现一些低级错误，或者在代码中标记不符合规范的代码红色，以便及时纠正注意力。eslint的作用是按照一定的规则检测代码质量。Prettier和eslint本身是两个目的不同的工具。如果先使用prettier格式化代码，会发现编辑器中的eslint会提示错误信息，然后需要执行eslint--fix或者手动修改。根本原因是两个工具不能关联。1Prettier简介Prettier是一个保证代码一致性和美化效果的代码格式化工具1.1Prettier支持的文件格式javascript,jsx,ts,tsxflowjsoncss,less,scssgraphqlmarkdownyaml以上文件格式基本涵盖了前端工作范围，prettier与它密切相关与我们的工作有关。1.2parserprettier之所以能够支持多种文件格式，是因为针对每一种格式文件都开发了相应的编译工具。例如，用于编译graphql的解析器是graphql/language。目前js的编译器有babylon（默认）和flow两种。由于babylon的bug更少，对编译工作的支持更好，所以官方默认选择了babylon。1.3IDE有人的地方就有江湖，有编辑的地方就有prettier。目前流行的IDE都支持prettiervscodewebstormatomvisualstudiosublime1.4prettiereslint--fix的必要性本身可以修复一些代码格式缺陷，但是以下几种情况，eslint是无能为力的functionpretty({greeting="hello",greeted='"World"',silent=false,onMouseOver,...}){...}constpretty=[{greeting="hello",greeted='"World"',silent=false,onMouseOver},...]痛点：代码超过一定长度，eslint会标记错误信息，但不能自动修复要格式化上面的代码，只需要使用vscode安装的prettier插件或者执行命令npxprettier--writesrc/*.js将代码格式化为functionHelloWorld({greeting="hello",greeted='"World"',silent=false,onMouseOver...}){...}constpretty=[{greeting="hello",greeted='"World"',silent=false,onMouseOver},...]也可以回车一步步美化代码。这样做的缺点是，第一，会浪费很多时间。第二，每个人的风格不同会导致代码冲突。优点：使用prettier统一格式化风格，减少合并代码冲突的概率。1.5问题我们使用prettier格式化代码后，需要执行eslintfix来修复prettier带来的不兼容问题。有没有什么好的方法可以把上面的步骤合二为一2.工程2.1eslintonsaveeslint--fix命令在上面多次提到。执行会浪费很多时间。以vscode为例，在项目根目录添加如下配置，保存时会自动执行fix.vscode/settings.json"eslint.autoFixOnSave":true2.2eslintvalidatereact代码有四种格式的文件后缀，js,jsx,ts,tsx。默认情况下，vscode的eslint插件只能将js和jsx文件中的错误标记为红色，而ts和tsx文件没有，会自动提示错误信息，但是即使肉眼看不到这些错误信息，代码通过husky等工具校验后，代码还是会提交失败，如果要提示错误信息对于ts??和tsx文件，需要添加如下配置。vscode/settings.json"eslint.validate":["javascript","javascriptreact",{"language":"typescript","autoFix":true},{"language":"typescriptreact","autoFix":true}]3prettier和eslint的整合需要解决eslint和prettier不能关联的问题，解决方法是在eslint的config中添加prettier的规则，可以在vscode中给出错误信息提示，并根据eslint3.1eslint-config-prettier执行eslintfix关闭可能与prettier3.2冲突的eslint规则eslint-plugin-prettier执行eslint--fix时自动格式化代码按照prettier3.3eslint的配置规则安装上面两个这个工具只需要下面一行配置{"extends":["plugin:prettier/recommended"]}这个配置有3个功能继承prettier的configrule开启规则"prettier/prettier":"error"eslintfix同时执行更漂亮的格式化
