@6river/prettier-config 中文文档教程
@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 格式：
- Add ignored directories and files to
.prettierignore. Most of the time, this can be done withcp .gitignore .prettierignore. - 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}'
@6river/prettier-config
6 River Systems Prettier configuration.
Installation
npm install --save-dev @6river/prettier-config
The simplest way to use it is package.json:
"prettier": "@6river/prettier-config"
You can also use a standalone file like .prettierrc.json:
"@6river/prettier-config"
To extend the configuration, use .prettierrc.js:
module.exports = {
...require("@6river/prettier-config"),
semi: false,
};
For more information, see the Prettier documentation.
With ESLint
npm install --save-dev eslint-config-prettier
In your ESLint configuration, add "prettier" to extends. For example, with .eslintrc.json and the 6 River ESLint configuration:
{
"extends": ["6river", "prettier"]
}
If you are using Typescript and the ESLint plugin @typescript-eslint/eslint-plugin, add "prettier/@typescript-eslint" to extends as well. For example, with .eslintrc.json and the 6 River ESLint configuration:
{
"extends": ["6river/typescript", "prettier", "prettier/@typescript-eslint"]
}
For more information, see the eslint-config-prettier documentation.
Usage
Editor Plugins
The most common way to use Prettier is through an editor plugin that automatically formats files on every save. If you use VS Code, the most popular Prettier plugin is esbenp.prettier-vscode.
There are Prettier plugins for most editors. See the full list on prettier.io.
Commit Hooks
In projects that use Prettier, it can be useful to set up a commit hook to ensure that no new code is committed without being formatted. This can also be used for a gradual migration to Prettier.
To format staged files with Prettier before each commit, you can use pretty-quick with husky.
npm install --save-dev pretty-quick husky
Add the following to package.json:
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
}
Continuous Integration
To ensure that code is formatted as part of the continuous integration (CI) process, you can use pretty-quick. Since pretty-quick only looks at changed files, it will only fail CI when there are unformatted files in the current branch.
Add the following to your CI configuration:
npx pretty-quick --check
Optionally, use the --branch flag to set the base branch to something other than master.
Converting an Entire Project
To convert an entire project to Prettier format:
- Add ignored directories and files to
.prettierignore. Most of the time, this can be done withcp .gitignore .prettierignore. - 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}'
