稳定版

编辑

共享配置

如果您有多个不同的项目，使用 **共享配置** 会很有帮助，这样就可以在所有项目中使用它，而无需复制粘贴每个项目的相同配置。

此页面介绍如何创建、发布和使用可共享的配置。

创建可共享的配置

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

在开始之前，请确保您拥有：

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

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

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

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 配置，使用相同的语法和相同的选项。

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

export default config;

一个可共享配置的示例存储库可在此处获得 查看。

发布可共享的配置

准备就绪后，您可以 将您的包发布到 npm。

npm publish

使用可共享的配置

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

npm install --save-dev @username/prettier-config
yarn add --dev @username/prettier-config
pnpm add --save-dev @username/prettier-config
bun add --dev @username/prettier-config

然后，您可以在 package.json 中引用它。

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

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

"@company/prettier-config"

扩展可共享的配置

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

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

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

export default config;

其他示例

在共享配置中使用类型注解

您可以通过使用 jsdoc 类型注解在共享配置中获得类型安全和自动完成功能。

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

export default config;

为了使此方法生效，您必须为该项目 安装 prettier。

之后，您的 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"
  },
+ "devDependencies": {
+   "prettier": "^3.3.3"
+ }
}

在可共享配置中包含插件

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

// 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"
  }
}

示例存储库可在此处找到 查看。

注意：您可以使用 peerDependencies 而不是 dependencies。要了解它们之间的区别，您可以阅读 Domenic Denicola 关于对等依赖项的这篇博文。

← 配置文件编辑器集成 →