plop-prettier

3.0.0 verified Sat Apr 25 auth: no javascript

Plop action type that runs Prettier on files added via plop's add action. Version 3.0.0 requires plop 3.x and Prettier 1.17+. Released intermittently. Differentiator: integrates Prettier formatting directly into plop generators via 'pretty-add' action, reducing boilerplate.

Common errors

error Error: Cannot find module 'prettier' ↓

cause Missing peer dependency 'prettier'

fix

npm install prettier

error TypeError: plop.load is not a function ↓

cause Trying to run plop.load in a context where plop is not the plop API object

fix

Ensure plop.load is called inside the plopfile export function: module.exports = function(plop) { plop.load('plop-prettier'); }

error Unrecognized action type: prettier-add ↓

cause Using wrong action type string

fix

Use 'pretty-add' (with underscore, not hyphen).

Warnings

breaking plop-prettier 3.x requires plop 3.x; not compatible with plop 2.x. ↓

fix Upgrade plop to version 3 or higher.

breaking Style of pass options changed from nested to flat object in v3. ↓

fix Pass options directly: plop.load('plop-prettier', { tabWidth: 4 }) instead of plop.load('plop-prettier', { prettier: { tabWidth: 4 } })

gotcha Action type 'pretty-add' is not 'prettier-add' or 'prettyadd'. ↓

fix Use exactly 'pretty-add' as the action type.

gotcha The 'pretty-add' action only runs Prettier on the content; it does not auto-format existing files. ↓

fix Use a separate prettier script or hook to format existing files.

Install

npm install plop-prettier

yarn add plop-prettier

pnpm add plop-prettier

Imports

plop-prettier
wrong
```
require('plop-prettier')
```
correct
```
plop.load('plop-prettier')
```
Loaded via plop.load, not direct require; used in plopfile.js.
pretty-add action type
wrong
```
type: 'prettier' or type: 'plop-prettier'
```
correct
```
type: 'pretty-add'
```
The action type string is 'pretty-add', not the package name.
options object
wrong
```
plop.load('plop-prettier', { prettier: { tabWidth: 4 } })
```
correct
```
plop.load('plop-prettier', { tabWidth: 4 })
```
Options are passed as a single object directly to plop.load, not nested under a 'prettier' key.

Quickstart

Example plopfile loading plop-prettier and using 'pretty-add' action type to create a component file.

// plopfile.js
module.exports = function (plop) {
  plop.load('plop-prettier', { tabWidth: 4 });

  plop.setGenerator('component', {
    description: 'Create a new component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'Component name'
      }
    ],
    actions: [
      {
        type: 'pretty-add',
        path: 'src/{{pascalCase name}}/{{pascalCase name}}.js',
        template: `import React from 'react';

const {{pascalCase name}} = () => {
  return <div>{{pascalCase name}}</div>;
};

export default {{pascalCase name}};`
      }
    ]
  });
};