@6river/prettier-config 中文文档教程

Question

@6river/prettier-config

6 River Systems 更漂亮的配置。

Installation

npm install --save-dev @6river/prettier-config

最简单的使用方法是 package.json：

"prettier": "@6river/prettier-config"

您也可以使用像 这样的独立文件。 prettierrc.json：

"@6river/prettier-config"

要扩展配置，请使用 .prettierrc.js：

module.exports = {
    ...require("@6river/prettier-config"),
    semi: false,
};

有关详细信息，请参阅 Prettier 文档。

With ESLint

npm install --save-dev eslint-config-prettier

在您的 ESLint 配置中，将 “prettier” 添加到 extends。 例如，使用 .eslintrc.json 和 6 River ESLint 配置：

{
    "extends": ["6river", "prettier"]
}

如果你正在使用 Typescript 和 ESLint 插件 @typescript-eslint/eslint-plugin，添加 "prettier/@typescript-eslint" 也扩展。 例如，使用 .eslintrc.json 和 6 River ESLint 配置：

{
    "extends": ["6river/typescript", "prettier", "prettier/@typescript-eslint"]
}

更多有关信息，请参阅 eslint-config-prettier 文档。

Usage

Editor Plugins

使用 Prettier 最常见的方法是通过一个编辑器插件，它会在每次保存时自动格式化文件。 如果你使用 VS Code，最流行的 Prettier 插件是 esbenp.prettier-vscode 。

大多数编辑器都有 Prettier 插件。 在 prettier.io 上查看完整列表。

Commit Hooks

在使用 Prettier 的项目中，设置提交挂钩以确保不会在未格式化的情况下提交新代码是很有用的。 这也可以用于逐步迁移到 Prettier。

要在每次提交前使用 Prettier 格式化暂存文件，您可以使用 pretty-quick 和 husky。

npm install --save-dev pretty-quick husky

将以下内容添加到 package.json：

"husky": {
    "hooks": {
        "pre-commit": "pretty-quick --staged"
    }
}

Continuous Integration

为确保代码被格式化为持续集成 (CI) 过程的一部分，你可以使用 pretty-quick。 由于 pretty-quick 仅查看更改的文件，因此只有当当前分支中存在未格式化的文件时，它才会使 CI 失败。

将以下内容添加到您的 CI 配置中：

npx pretty-quick --check

可以选择使用 --branch 标志 将基本分支设置为 master 以外的分支。

Converting an Entire Project

要将整个项目转换为 Prettier 格式：

1. Add ignored directories and files to .prettierignore. Most of the time, this can be done with cp .gitignore .prettierignore.
2. Run the following command, adding or removing file extensions from the list to meet your needs:

npx prettier --write '**/*.{js,ts,md,json,yml,yaml,css,scss,less,graphql,mdx,jsx,tsx}'