安装和配置 Prettier

Prettier 是一个前端代码格式化工具，它可以格式化 JavaScript、CSS、Markdown 和 JSON 等代码，让代码风格统一，易于阅读和维护。

安装

全局安装

你可以通过 npm 全局安装 prettier：

npm install -g prettier

本地安装

你也可以在你的项目中安装 prettier：

npm install --save-dev prettier

这将把 prettier 安装为本地项目的开发依赖项，并添加到 package.json 的 devDependencies 中。

配置

在开始使用 Prettier 之前，你需要配置一些选项。

你可以在 .prettierrc 文件中声明选项，如下所示：

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

配置选项

以下是一些常用的配置选项：

• printWidth：一行的字符宽度，默认值是 80。
• tabWidth：一个 tab 缩进的宽度，默认值是 2。
• singleQuote：使用单引号而不是双引号，默认值为 false。
• trailingComma：多行时在对象和数组字面量的最后一个元素后面加一个逗号，可用选项有 "none" 或 "es5"（仅在 ES5 中有效）或 "all"。
• semi：是否在语句末尾加上分号，默认值为 true。

你可以在 官方文档 中查看更多选项。

使用

在安装和配置完 Prettier 之后，你可以通过以下方式使用它：

使用 CLI

你可以使用 prettier 命令行工具对文件或文件夹进行格式化：

# 格式化单个文件
prettier --write file.js

# 格式化目录下所有文件
prettier --write dir/

# 检查文件格式是否符合规范
prettier --check file.js

更多用法请参阅 CLI 文档。

使用编辑器插件

Prettier 支持多种编辑器插件，包括 Visual Studio Code、Sublime Text、Atom 和 WebStorm 等。插件会根据你的配置自动格式化你的代码，不需要手动输入命令。

你可以在 官方文档 中查看相关插件的安装和配置教程。

在项目中使用

在你的项目中，你可以使用 prettier npm 包的 API 来格式化 JavaScript 代码：

const prettier = require('prettier');

const code = "const foo = 'bar';";
const formattedCode = prettier.format(code, {
  parser: 'babel',
  singleQuote: true
});

console.log(formattedCode); // 输出 "const foo = 'bar';"

更多用法请参阅 API 文档。

结论

Prettier 是一个非常强大的前端代码格式化工具，使你的代码风格更加统一，易于阅读和维护。在熟悉了它的安装、配置和使用后，你会发现它可以大大提高你的开发效率和代码质量。