CODEWITHSUNDEEP
wordpressprettier
Tero Kilkanen
Tero Kilkanen

Reputation: 328

Configuring Prettier format tool for WordPress in .prettierrc

I am trying to use Prettier to format my WordPress project JavaScript / CSS files.

I have installed prettier using npm and I can execute the formatter correctly. I have also installed @wordpress/prettier-config npm module to get WordPress style configuration for Prettier.

Package home page at https://developer.wordpress.org/block-editor/packages/packages-prettier-config/ tells that I need to add

extends @wordpress/prettier-config

to .prettierrc file to enable use of WordPress rules.

This line gives error:

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

If I use JSON in .prettierrc

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

I get:

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

and Prettier simply uses default style.

My question is, how do I configure Prettier to use Wordpress style configuration?

Upvotes: 1

Views: 2491

Answers (2)

Demartini
Demartini

Reputation: 111

If you are using .prettierrc file written in JSON or .prettierrc.json just add:

"@wordpress/prettier-config"

without brackets.

Upvotes: 0

Andrewmumblebee
Andrewmumblebee

Reputation: 63

I was having the same issue, i'm not sure why the documentation shows that syntax, i'm not sure it's supported by prettier.

Instead name your .prettierrc file .prettierrc.js and use the below to extend the WordPress config by destructuring theirs into the prettier file.

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

Also you'll want to make sure you use WordPress' own version of prettier, so you'll get the parenthesis spacing auto-formatting that WordPress use in their eslint.

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

Upvotes: 3

Related Questions