使用 Prettier 美化你的代码,你学会了吗?

开发 开发工具
Prettier 是一款流行的代码格式化工具。它支持的语言相当多。它很纯粹,就一个代码格式化工具,并不会做代码质量的检查(比如声明了一个未被使用的变量)。

大家好,我是前端西瓜哥。今天带大家来学习 Prettier。

为什么要用 Prettier?

Prettier 是一款流行的代码格式化工具。它支持的语言相当多。

它很纯粹,就一个代码格式化工具,并不会做代码质量的检查(比如声明了一个未被使用的变量)。

Prettier 会强制使用统一的代码风格,原理就是解析语言生成 AST 抽象语法树,然后用自己的一套风格写回到文件。

Prettier 的优点:

  1. 开箱即用。它本身就自带了一套代码风格,风格还很好看。我们不需要特意找一个基础风格包,然后再加上一长串的自定义规则;
  2. 支持多种语言。除了 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 是不错的选择。

责任编辑:姜华 来源: 前端西瓜哥
相关推荐

2024-02-02 11:03:11

React数据Ref

2023-10-30 07:05:31

2023-12-27 07:31:45

json产品场景

2024-02-04 00:00:00

Effect数据组件

2024-01-19 08:25:38

死锁Java通信

2023-07-26 13:11:21

ChatGPT平台工具

2023-01-10 08:43:15

定义DDD架构

2022-07-08 09:27:48

CSSIFC模型

2022-01-17 07:50:37

Go代码规范

2024-05-22 08:03:15

2023-08-01 12:51:18

WebGPT机器学习模型

2024-01-02 12:05:26

Java并发编程

2023-12-12 08:02:10

2023-10-10 11:04:11

Rust难点内存

2024-05-06 00:00:00

InnoDBView隔离

2023-01-30 09:01:54

图表指南图形化

2022-12-14 08:31:43

#error编译命令

2022-03-05 23:29:18

LibuvwatchdogNode.js

2023-06-15 08:00:23

2022-11-21 16:57:20

点赞
收藏

51CTO技术栈公众号