我们都希望有更高的代码质量。有了Prettier，你可以用最小的努力实现这个目标。

什么是Prettier？

Prettier是一个有主见的代码格式化器，支持各种语言。当应用于支持的文件类型时，Prettier将自动格式化该文件中的代码。

支持的语言

目前，Prettier自己支持一堆不同的语言/框架，同时也有其他语言的社区插件。

Prettier支持的语言

JavaScript
JSX
流程
脚本语言
脚本
脚本
Vue
Angular
CSS
少
SCSS
图形化QL
马克顿/MDX

支持的Prettier插件

爪哇
脚本
脚本
脚本
敏捷
TOML
脚本

保存格式的力量

你可以用几种不同的方式来使用Prettier。

使用命令行界面（CLI）来格式化单个或一组文件
设置你的代码编辑器/IDE来自动格式化文件（例如，当你保存一个文件时）。

我更喜欢在保存时自动格式化，因为它能立即给你反馈。它给你的最重要的反馈之一是，如果你有语法错误，它就不会格式化。这实际上是令人难以置信的强大。当你在编程的过程中，有不同类型的即时反馈，让你知道你什么时候犯了错误，以便你能迅速纠正方向，这是至关重要的。Prettier提供了一个最快速的反馈回路。

安装Prettier

好了，我对Prettier的伟大之处说得够多了，让我们开始在一个例子中使用它。

关于这个例子的快速注意事项

你可以在全局范围内安装Prettier，但建议在你的项目中以开发依赖的方式安装它。这样一来，所有的开发者都会有相同的版本。
这个例子假设你的项目依赖是由yarn 或npm 管理的。
这个例子假设你使用的是VS Code，这就是我们要配置的 "保存时格式化 "功能。其他开发环境可能也有类似的功能，你可能要去查一下

第1步：创建一个新的项目目录

让我们为我们的新项目创建一个项目目录。我在bash中运行这些命令，但你可以用你熟悉的任何方法创建新的文件和文件夹。

mkdir prettier-example

第2步：初始化yarn（或npm）

接下来，我们初始化一个新的项目。如果使用yarn，只需运行yarn 命令。

yarn

如果使用npm，运行以下命令，用默认配置进行初始化。

npm init -y

第3步：安装Prettier

现在我们安装Prettier。**请确保将Prettier钉在一个准确的补丁版本上!**Prettier可以在不同的补丁版本之间更新他们的格式化偏好，所以钉在一个特定的补丁版本上可以防止不同的开发者之间的格式化差异。

另外，确保将Prettier安装为一个开发依赖项，因为它是一个开发工具，而不是生产中使用的东西。

使用yarn。

yarn add -D prettier@2.0.5

或npm。

npm install --save-dev prettier@2.0.5

让我们也在我们的目录中创建一个空的prettier配置文件。创建.prettierrc.json ，并在其中放入一个空的对象即可。

.prettierrc.json

{}

安装VS Code的Prettier插件

请确保安装VS Code的Prettier插件。

第4步：创建一个格式不佳的文件

让我们创建一个格式不好的文件。在你的项目目录中制作index.js ，并将以下代码放入其中。

function greet() {
  const myVar = 'hello';
  console.log(myVar);
}

这段代码有各种奇怪的间距。

第5步：设置VS Code保存时的格式

在VS代码中进入设置。你可以在文件>首选项>设置下找到，或者你可以直接使用ctrl+逗号快捷键（Mac上是cmd+逗号）。找到 "编辑器"。保存时的格式"选项，并确保它被选中。

注意：其他编辑器应该也能在保存时格式化，如果你不使用VS Code，你只需要找到一些编辑器的具体说明。

第6步：保存你的index.js文件

保存你的index.js 文件。如果一切顺利的话，你的文件格式应该是正确的!

function greet() {
  const myVar = 'hello';
  console.log(myVar);
}

注意，我们的间距看起来是正确的。此外，Prettier添加了尾部分号，并将我们的单引号改为双引号。如果你不喜欢其中的一些变化，可以在我们的.prettierrc.json 文件中进行很多配置。

一个更令人印象深刻的例子

让我们改变我们的index.js 文件，使其具有一些真正可怕的代码。试着把它改成这样。

const navBarProps = {
  name: ['John Doe', null],
  displayMode: ['dark', 'light'],
  timezone: ['ET', 'CT', 'MT', 'PT'],
};

function allCombinations(obj) {
  let combos = [{}];
  for (const [key, values] of Object.entries(obj)) {
    combos = combos.flatMap((combo) =>
      values.map((value) => ({ ...combo, [key]: value }))
    );
  }
  return combos;
}

console.log(allCombinations(navBarProps));

这真的很难看。现在保存该文件。

const navBarProps = {
  name: ['John Doe', null],
  displayMode: ['dark', 'light'],
  timezone: ['ET', 'CT', 'MT', 'PT'],
};

function allCombinations(obj) {
  let combos = [{}];
  for (const [key, values] of Object.entries(obj)) {
    combos = combos.flatMap((combo) =>
      values.map((value) => ({ ...combo, [key]: value }))
    );
  }
  return combos;
}

console.log(allCombinations(navBarProps));

真漂亮!

为什么这一点如此重要

更漂亮的代码有助于你写出更一致的代码。当你的代码格式正确时，你能更好地看到模式。当你的代码在保存时没有格式化，你就会开始立即识别出你的代码有错误。

学习Prettier的基本知识