@shopify/loom-plugin-prettier

This package provides a loom plugin that runs Prettier as part of the loom lint command.

This package does not make any assumptions about what version of Prettier or what ruleset you should use. You will need to install prettier as a peerDependency and you will need to configure Prettier yourself. We recommend using the preset provided by @shopify/prettier-config.

Installation

yarn add @shopify/loom-plugin-prettier prettier --dev

Usage

Add prettier to your loom workspace plugins.

import {createWorkspace} from '@shopify/loom';
import {prettier} from '@shopify/loom-plugin-prettier';

// `createWorkspace` may be `createPackage`, or `createWebApp` if your workspace
// consists of a single project
export default createWorkspace((workspace) => {
  workspace.use(prettier());
});

By default prettier runs over everything in the current folder. You can modify the files that are processed by passing in a files glob to the plugin's options. This is useful if you use eslint-plugin-prettier or stylelint-prettier to run prettier as part of eslint or stylelint as there is no point to running prettier over those files twice.

export default createWorkspace((workspace) => {
  // Run prettier on md, json, yaml and yml files
  workspace.use(prettier({files: '**/*.{md,json,yaml,yml}'}));
});

Running only Prettier when linting

To run only the Prettier linting step, you can use --isolate-step:

loom lint --isolate-step=Prettier

Hooks

This plugin adds the following hooks to LintWorkspaceConfigurationCustomHooks:

• prettierFlags: an object of options to convert into command line flags for the prettier command. These options are camelcase versions of their CLI counterparts.

  import {createWorkspacePlugin} from '@shopify/loom';
  
  function demoPlugin() {
    return createWorkspacePlugin('Demo', ({tasks: {lint}}) => {
      lint.hook(({hooks}) => {
        hooks.configure.hook((configure) => {
          // Trigger error when encountering unknown files matched by patterns
          configure.prettierFlags?.hook((flags) => ({
            ...flags,
            ignoreUnknown: false,
          }));
        });
      });
    });
  }