Skip to main content

共享配置

如果你有许多不同的项目，那么拥有一个可以在所有项目中使用的共享配置会很有帮助，而不是为每个项目复制粘贴相同的配置。

¥In case you have many different projects, it can be helpful to have a shared configuration which can be used in all of them, instead of copy-pasting the same config for every project.

本页说明如何创建、发布和使用可共享配置。

¥This page explains how to create, publish and consume a shareable config.

创建可共享配置​

¥Creating a Shareable Config

可共享配置只是导出单个 prettier 配置文件 的 npm 包。

¥Sharable configs are just npm packages that export a single prettier config file.

在开始之前，请确保你已：

¥Before we start, make sure you have:

首先，创建一个新包。我们建议创建一个名为 @username/prettier-config 的 范围包。

¥First, create a new package. We recommend creating a scoped package with the name @username/prettier-config.

最小包应至少包含两个文件。package.json 用于包配置和保存共享 prettier 配置对象的 index.js：

¥A minimal package should have at least two files. A package.json for the package configuration and an index.js which holds the shared prettier configuration object:

prettier-config/
├── index.js
└── package.json

示例 package.json：

¥Example package.json:

{
  "name": "@username/prettier-config",
  "version": "1.0.0",
  "description": "My personal Prettier config",
  "type": "module",
  "exports": "./index.js",
  "license": "MIT",
  "publishConfig": {
    "access": "public"
  },
  "peerDependencies": {
    "prettier": ">=3.0.0"
  }
}

index.js 是你放置共享配置的地方。此文件仅导出具有相同语法和相同选项的 常规 prettier 配置：

¥index.js is where you put the shared configuration. This file just exports a regular prettier configuration with the same syntax and same options:

const config = {
  trailingComma: "es5",
  tabWidth: 4,
  singleQuote: true,
};

export default config;

可以在 此处 找到示例共享配置存储库。

¥An example shared configuration repository is available here.

发布可共享配置​

¥Publishing a Shareable Config

准备好后，你可以 将你的包发布到 npm：

¥Once you are ready, you can publish your package to npm:

npm publish

使用可共享配置​

¥Using a Shareable Config

你首先需要安装已发布的配置，例如：

¥You first need to install your published configuration, for example:

npm install --save-dev @username/prettier-config

然后，你可以在 package.json 中引用它：

¥Then, you can reference it in your package.json:

{
  "name": "my-cool-library",
  "version": "1.0.0",
  "prettier": "@username/prettier-config"
}

如果你不想使用 package.json，你可以使用任何支持的扩展来导出字符串，例如 .prettierrc：

¥If you don’t want to use package.json, you can use any of the supported extensions to export a string, e.g. .prettierrc:

"@company/prettier-config"

扩展可共享配置​

¥Extending a Sharable Config

要扩展配置以覆盖共享配置中的某些属性，请将文件导入 .prettierrc.mjs 文件中并导出修改，例如：

¥To extend the configuration to overwrite some properties from the shared configuration, import the file in a .prettierrc.mjs file and export the modifications, e.g:

import usernamePrettierConfig from "@username/prettier-config";

/**

 * @type {import("prettier").Config}
 */
const config = {
  ...usernamePrettierConfig,
  semi: false,
};

export default config;

其他示例​

¥Other examples

在共享配置中使用类型注释​

¥Using Type Annotation in the Shared Config

你可以使用 jsdoc 类型注释在共享配置中获得类型安全和自动补齐支持：

¥You can get type safety and autocomplete support in your shared configuration by using a jsdoc type annotation:

/**

 * @type {import("prettier").Config}
 */
const config = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

export default config;

为了使其工作，你必须为项目 安装 prettier。

¥In order to make this work, you have to install prettier for the project.

之后，你的 package.json 文件应如下所示：

¥After that, your package.json file should look like this:

{
  "name": "@username/prettier-config",
  "version": "1.0.0",
  "description": "My personal Prettier config",
  "type": "module",
  "exports": "./index.js",
  "license": "MIT",
  "publishConfig": {
    "access": "public"
  },
  "peerDependencies": {
    "prettier": ">=3.0.0"
  },
+ "devDependencies": {
+   "prettier": "^3.3.3"
+ }
}

在可共享配置中包含插件​

¥Include Plugins in Shareable Configurations

如果你想在共享配置中使用 插件，你需要在配置文件的 plugin 数组中声明这些插件，并在 package.json 中声明为 dependencies：

¥In case you want to use plugins in your shared configuration, you need to declare those plugins in the config file's plugin array and as dependencies in package.json:

// index.js
const config = {
  singleQuote: true,
  plugins: ["prettier-plugin-xml"],
};

export default config;
// package.json
{
  "name": "@username/prettier-config",
  "version": "1.0.0",
  "description": "My personal Prettier config",
  "type": "module",
  "exports": "./index.js",
  "license": "MIT",
  "publishConfig": {
    "access": "public"
  },
+  "dependencies": {
+    "prettier-plugin-xml": "3.4.1"
+  },
  "peerDependencies": {
    "prettier": ">=3.0.0"
  }
}

可以在 此处 找到示例存储库

¥An example repository can be found here

注意：你可以使用 peerDependencies 代替 dependencies。要了解它们的区别，你可以阅读 Domenic Denicola 的这篇关于对等依赖的博客文章

¥Note: You can use peerDependencies instead of dependencies. To learn about their differences, you can read this blog post from Domenic Denicola about peer dependencies