如何在VSCode中使用Prettier与ESLint和TypeScript

尼耳多
185 阅读8分钟

了解Prettier

Prettier是一个有意见的（但完全可配置的）代码格式化器。ESLint也可以对代码进行格式化，但它主要是为了发现我们没有遵循规定的编码惯例。

Prettier可以被配置为在你保存文件后或手动告诉它格式化你的代码（使它看起来更漂亮😉），而且默认情况下，它配置了一套通用的代码清洁规则。

当我们把Prettier和ESLint结合起来的时候，我们会得到最大的好处。

使用Prettier与ESLint

将ESLint和Prettier结合起来，其责任划分是这样的。

  • ESLint定义了代码规范
  • Prettier根据ESLint的规则执行自动格式化。

现在，这是一个炸弹组合。

本博文的目标

在这篇文章的最后，你应该能够。

  • 为一个TypeScript或JavaScript项目设置Prettier
  • 决定最适合你风格的格式化配置
  • 配置Prettier以与ESLint一起工作

前提条件

安装Prettier

首先，我们将安装Prettier作为一个开发依赖项。

npm install --save-dev prettier

配置Prettier

根据文档，我们可以公开一个名为.prettierrc 的JSON文件来放置我们的配置。

touch .prettierrc

一个基本的.prettierrc 设置是这样的。

.prettierrc

{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 80
}

这些设置指定了以下规则。

  • semi 设置为 ，意味着Prettier会在必要时添加分号。true
  • trailingComma 设置为 ，意味着Prettier将删除对象末尾的任何尾部逗号。none
  • singleQuote 设置为 ，意味着Prettier将true 倾向于使用单引号而不是双引号**，除非**双引号的数量超过了单引号的数量。在这里阅读更多信息。
  • printWidth 设置为 ，指定打印机将包装任何超过80个字符的行。80

你可以在这里查看其余的选项，并随心所欲地改变它们!这只是我的个人偏好。

使用Prettier CLI测试Prettier

到目前为止，我们已经在本地配置了Prettier，并且我们已经可以测试格式化一些代码了。

由于我们使用的是simple-typescript-starter的代码，我们唯一的文件是src/index.ts ，它看起来像这样。

console.log('Hello')

当我们添加一个脚本来格式化文件夹中的所有代码并执行它时，我们应该注意到的唯一变化是增加了一个分号。

将以下脚本添加到你的package.json 。

package.json

{
  "scripts": {
    ...
    "prettier-format": "prettier --config .prettierrc 'src/**/*.ts' --write"  }
}

然后运行它。

npm run prettier-format

控制台输出显示，有一个文件被改变了，而且执行时间为186ms。

npm run format

> typescript-starter@1.0.0 format /simple-typescript-starter
> prettier --config .prettierrc 'src/**/*.ts' --write

src/index.ts 186ms

看一下src/index.ts ，你会注意到console.log ，事实上，它被附加了一个分号。

console.log('Hello world!');

这是一个使用Prettier的巧妙方法，但在我看来，这不是最好的方法。我更喜欢这种方式。

使用Prettier

人们使用Prettier的最常见的方式之一是安装VS Code扩展，将其添加到你的编辑器。

它使你能够在保存时，格式化你的代码。这很好，因为反馈回路非常短，而且它把格式化变成了你不需要占用任何大脑周期去思考的东西。

在保存时使用VSCode进行格式化（建议）。

在这里安装Prettier VS Code扩展。

要设置默认值，按CMD + SHIFT + P （在MacOS）或CTRL + Shift + P （在Windows），然后输入preferences open settings 。

你要选择JSON选项，这样我们就可以通过JSON文件手动编辑偏好设置。

输入 "首选项打开设置 "的选项。你要选择JSON选项。

在JSON文件中，如果还没有添加，在对象的根部添加以下几行。

// Default (format when you paste)
"editor.formatOnPaste": true,
// Default (format when you save)
"editor.formatOnSave": true,

这些设置将在你粘贴新代码和保存代码时，为Prettier理解的任何文件扩展格式化你的代码。如果该文件所在的项目根部有一个.prettierrc ，它将使用该文件中的设置来格式化你的代码。

比方说，你正在用多种语言工作，自动格式化另一种语言的代码对你来说是不可能的。你也可以通过指定语言来覆盖默认设置，如下图所示。

"[typescript]": {
  "editor.formatOnPaste": false,  "editor.formatOnSave": false,},
"editor.formatOnPaste": true,
"editor.formatOnSave": true,

使用上述配置，Prettier不会在粘贴或保存时格式化TypeScript代码，但它会在粘贴或保存时格式化它所理解的任何其他语言的代码。

在提交前进行格式化（建议）。

当与其他开发者作为一个团队工作时，不断保持代码的格式化是具有挑战性的。不是每个人都想使用Prettier VS Code扩展。不是每个人都愿意使用VS Code！我们如何确保任何代码都能被理解？

我们如何确保任何被提交和推送到源码控制的代码首先是正确的格式化？

请阅读下一篇文章，"用Husky Pre-commit Hooks强制执行编码规范"。

使用文件系统观察器进行格式化

如果你真的不喜欢VS Code，或者你的团队中有太多人不使用它，那么还有一个选择，可以在你写代码时收紧格式化的反馈回路。

Prettier docsc建议使用一个叫做onchange 的包，以便观察文件系统对你的源代码所做的改变，然后针对任何改变的文件运行Prettier CLI工具。

下面是如何操作的。

安装onchange 。

npm install --save-dev onchange

然后，把这个脚本添加到你的package.json ，如果你把你的源代码保存在一个与src 文件夹不同的位置，请确保改变被监视的目录。

package.json

"scripts": {
  "prettier-watch": "onchange 'src/**/*.ts' -- prettier --write {{changed}}"  }

打开一个新的控制台，运行prettier-watch ，并在src 文件夹中编辑代码，这将给我们带来与我们是否用VS Code设置Prettier相同的可观察结果。

手动格式化单个文件

在MacOS上，如果我已经安装了VS Code扩展，我可以通过输入SHIFT + OPTION + F ，来格式化当前文件。

这对你来说可能是不同的。你可以通过键入COMMAND + SHIFT + P ，然后输入 "format "来查看该命令是什么。

这里显示的是我在VS Code中格式化当前文件的命令。

配置Prettier以与ESLint一起工作

这里是真正的魔术发生的地方。

作为提醒，你要先完成前面的ESLint教程。

在已经安装了ESLint和Prettier之后，再安装这两个软件包。

npm install --save-dev eslint-config-prettier eslint-plugin-prettier
  • eslint-config-prettier:关闭所有有可能干扰Prettier规则的ESLint规则。
  • eslint-plugin-prettier:将Prettier规则变成ESLint规则。

最后，我们需要对.eslintrc.

.eslintrc

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
    "prettier"  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"  ],
  "rules": {
    "no-console": 1,       // Means warning
    "prettier/prettier": 2 // Means error  }
}

如果你对使用推荐的插件不感兴趣，启用了Prettier的最基本的.eslintrc ，看起来像这样。

.eslintrc

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": 2 // Means error
  }
}

运行npm run lint （来自前面的文章），对文件进行排队，并告诉我们所有未格式化的行，此外还有我们通过ESLint规则保护的任何违反代码惯例的行为。

typescript-starter@1.0.0 lint /simple-typescript-starter
> eslint . --ext .ts

simple-typescript-starter/src/index.ts
  1:1  error    Replace `⏎console.log('Hello·world!')⏎` with `console.log('Hello·world!');`  prettier/prettier  2:1  warning  Unexpected console statement                                                 no-console

✖ 2 problems (1 error, 1 warning)
  1 error and 0 warnings potentially fixable with the `--fix` option.

这就是了!运行npm run prettier-format 来格式化一切。

总结

你可以在这里找到这篇文章的代码。

我们很幸运，工具已经发展到了强制执行编码规范和格式化代码的地步，我们不再需要亲自关心这个问题。

即使你没有使用VS Code，你也应该能够使用这篇文章中的步骤为你的代码添加一些基本的格式化。

之后，下一步就是通过使用像Husky这样的工具在你的团队中强制执行你的惯例和格式化。

请阅读本系列的最后一篇文章，题目是"用Husky预提交钩子强制执行编码规范"。

avatar
文章
阅读
粉丝