使用 Prettier 美化你的代码
大家好,我是前端西瓜哥。今天带大家来学习 Prettier。
为什么要用 Prettier?
Prettier 是一款流行的代码格式化工具。它支持的语言相当多。
它很纯粹,就一个代码格式化工具,并不会做代码质量的检查(比如声明了一个未被使用的变量)。
Prettier 会强制使用统一的代码风格,原理就是解析语言生成 AST 抽象语法树,然后用自己的一套风格写回到文件。
Prettier 的优点:
- 开箱即用。它本身就自带了一套代码风格,风格还很好看。我们不需要特意找一个基础风格包,然后再加上一长串的自定义规则;
- 支持多种语言。除了 JS,还支持 TS、CSS、JSON、Less 等各种语言。不用一个个找每个语言对应的格式化工具。
但 Prettier 坚持自己的品味,它更希望用户使用它精心挑选出来的代码风格,只提供较少的自定义配置规则。
比如有个 printWidth
的配置(默认值为 80),当一行代码超过特定字符数时会对其做拆分换行。这个配置无法关闭,你必须得设置一个值。
上手 Prettier
下面我们就来上手 Prettier。
先是安装:
yarn add --dev --exact prettier
# 或者是
npm install --save-dev --save-exact prettier
这里我们用了 exact 配置项来锁定版本号,这是因为不同版本 prettier 的代码风格可能有细微的不同。prettier 并不保证主版本相同的版本下风格是一致的。
使用命令对项目下所有文件进行格式:
npx prettier --write .
你也可以指定目录,比如 /src
;或是用通配符指定特定的文件,比如 app 目录下的所有 .test.js
结尾的文件可以用 app/**/*.test.js
。
另外,你可以创建 .prettierignore
文件来指定不需要格式化的文件。如:
# Ignore artifacts:
build
coverage
# Ignore all HTML files:
*.html
保存时自动格式化
如果你想要在保存时格式化,一般都是要用到编辑器的插件。对于 VSCode 来说,你需要安装一个名为 Prettier 的插件,然后再加上 VSCode 配置(项目下加一个 .vscode/setting.json
文件):
{
"editor.defaultFormatter": "esbenp.prettier-vscode", // 默认格式器改为 prettier
"editor.formatOnSave": true // 开启 “保存自动格式化”
}
或者你不开启保存自动格式化,可以在觉得需要的时候右键选择 “Format Document“,或者用快捷键。
Prettier 和 ESLint 比较
ESLint 是一种 Linter,能够分析代码并准确定位错误。它支持 代码质量 以及 代码风格 的检查。
代码质量,比如启用 "no-unused-vars",变量如果声明却未被使用会被认为不正确。
代码风格的能力类似 Prettier,比如 "semi": "error"
表示必须用分号结尾,对应 Prettier 的 "semi": true
。
Prettier 不会标识哪些地方出问题,在编辑器中用波浪线标出来。我用 ESLint 写新的功能时,因为代码是半成品,总能看到一堆的错误提示,体验确实不好。
总的来说,Prettier 只做代码格式化;ESLint 既能做代码质量检查,也能做代码风格检查和修正。
一般来说,项目最好加上 ESLint,这对我们改善代码质量很有帮助。对于代码格式化,我们可以用 ESLint 或是 Prettier。
如果想用 Prettier 格式化 JS,你需要在 ESLint 配置文件中使用 eslint-config-prettier
,将 eslint 中和 prettier 冲突的规则关闭。否则你会看到代码被格式化了两次,总是会不符合其中一方的规则。
另外,ESLint 不支持格式化 CSS,还是有必要装上 Prettier 或 stylelint 的。
TypeScript 团队在实现 typescript-eslint 时,认为 ESLint 不应该做代码格式化,而应该是一个真正的只检查错误的 Linter(可能他们被格式化的实现弄烦了),而像是 Prettier 这类的 Formatter 才应该做代码格式化工作。具体可以看下面这篇文章:
https://typescript-eslint.io/docs/linting/troubleshooting/formatting/
结尾
Prettier 是一款代码格式化工具,开箱即用,默认支持语言众多,风格优美,可以让我们轻装上阵。如果你自己做一些小项目,用方便的 Prettier 是不错的选择。
我是前端西瓜哥,欢迎关注我,学习更多前端知识。
相关文章
- 缓存:第一章:缓存优化
- tp6+webhook 实现自动部署
- 电脑知识txt-装机必备!这些高效软件,让你的 Windows 好用一倍
- c语言程序设计实例-经典C语言程序设计100例
- 中国信通院“汽车云专场沙龙暨汽车行业软件研发效能成熟度模型标准发布会”成功召开!
- 嘉为蓝鲸入选信通院汽车云工作首批成员单位,助力“汽车云”高质量发展
- “云-网-边-端”融合,汽车新势力的DevOps建设
- 如何进行CMDB数据运营?
- 作业区域人数超员预警系统
- 个推TechDay治数训练营第四期| 企业级标签体系建设实践
- 个推TechDay直播回顾 | 详解数据指标体系设计与开发全流程(附视频及课件下载)
- 电视剧里的代码真能运行吗?
- 网站都变成灰色了,它是怎么实现的?
- 河道采砂船监测识别系统
- 一种基于交叉选择的柯西反向鲸鱼优化算法QOWOA附matlab代码
- 辐射4 书籍代码-辐射4建筑代码及用法技巧(辐射4建筑代码怎么用)
- 笔记本键盘错误-电脑键盘失灵怎么办 三步教你解决问题
- 仪表盘读数识别系统
- 扫雷c语言程序设计-C语言实现简易版扫雷小游戏
- 有哪些好用的头像生成器?这5个你一定喜欢