【前端必会】Prettier,有了ESlint,还要Prettier

介绍

已经安装了ESLint为什么还要Prettier,主要是让ESLint专注于语法相关的验证,检查潜在问题。而代码格式化则有Prettier来接管
对比参考:
https://baijiahao.baidu.com/s?id=1718226261291810346&wfr=spider&for=pc

安装

npm install --save-dev --save-exact prettier
--save-exact 参考:https://blog.csdn.net/aaqingying/article/details/121209404

格式化

格式化前

执行.\node_modules\.bin\prettier ./scripts/index.js -w

的确有些变化,第3行没用的括号,多余的分号都被去掉了

VSCode格式化工具配置

安装vscode插件prettier-vscode

有好多,装星星多的。
装好后执行alt+shift+f

点击配置为Prettier

确定后代码也被格式化了

在格式化就不会弹配置默认的格式化工具了
默认规则参考
https://www.prettier.cn/docs/configuration.html
http://json.schemastore.org/prettierrc

疑问

  1. ESLint那节我故意设置了字符串使用单引号的规则,这里默认使用Prettier进行格式化时,会自动变成双引号。也就是说格式化工具与ESlint有冲突。
    这是该怎么办呢?

  2. 比如在代码提交到git前,执行ESLint的时候,如果有几个文件不符合Prettier的格式,这个时候又要怎么办呢?

总结

  1. 此时Prettier和Eslint还不能友好的玩耍。
  2. Prettier命令不常用,直接整合开发工具即可
posted @ 2022-09-20 22:51  李同学的教室  阅读(350)  评论(0)    收藏  举报