在 .prettierrc 中为 WordPress 配置 Prettier 格式工具答案

【问题标题】：Configuring Prettier format tool for WordPress in .prettierrc在 .prettierrc 中为 WordPress 配置 Prettier 格式工具
【发布时间】：2020-09-18 22:39:23
【问题描述】：

我正在尝试使用 Prettier 来格式化我的 WordPress 项目 JavaScript / CSS 文件。

我已经使用npm 安装了prettier，并且可以正确执行格式化程序。我还安装了 @wordpress/prettier-config npm 模块来获取 Prettier 的 WordPress 样式配置。

包首页https://developer.wordpress.org/block-editor/packages/packages-prettier-config/告诉我需要添加

extends @wordpress/prettier-config

到 .prettierrc 文件以启用 WordPress 规则。

这行给出错误：

[error] Invalid configuration file `test.js`: Cannot find module 'extends @wordpress/prettier-config'

如果我在 .prettierrc 中使用 JSON

{
    "extends": "@wordpress/prettier-config"
}

我明白了：

[warn] Ignored unknown option { extends: "@wordpress/prettier-config" }.

Prettier 只是使用默认样式。

我的问题是，如何配置 Prettier 以使用 Wordpress 样式配置？

【问题讨论】：

标签： wordpress prettier

【解决方案1】：

我遇到了同样的问题，我不确定文档为什么显示该语法，我不确定它是否被 prettier 支持。

改为将您的 .prettierrc 文件命名为 .prettierrc.js 并使用以下内容通过将其解构到更漂亮的文件中来扩展 WordPress 配置。

module.exports = {
    ...require('@wordpress/prettier-config'),
};

您还需要确保使用WordPress' own version of prettier，这样您将获得 WordPress 在其 eslint 中使用的括号间距自动格式化。

npm i --save-dev "prettier@npm:wp-prettier@latest"

【讨论】：

【解决方案2】：

如果您使用的是用 JSON 编写的 .prettierrc 文件或 .prettierrc.json，只需添加：

"@wordpress/prettier-config"

没有括号。

【讨论】：