feat(web-scripts): add format script; use implicit prettier config

Author: Paul Marbach

packages/web-scripts/config/lint-staged.config.js

@@ -1,12 +1,12 @@
-const { PRETTIER_CONFIG } = require('../cjs/Paths');
 const { getEslintConfig } = require('../cjs/Tasks/LintTask');
+const { getPrettierConfig } = require('../cjs/Tasks/FormatTask');
 const { getJestConfig } = require('../cjs/Tasks/TestTask');
 
 const fix = process.env.WEB_SCRIPTS_SHOULD_FIX === 'true';
 const tests = process.env.WEB_SCRIPTS_RUN_TESTS === 'true';
 const jestConfig = process.env.WEB_SCRIPTS_JEST_CONFIG || getJestConfig();
 const prettierConfig =
-  process.env.WEB_SCRIPTS_PRETTIER_CONFIG || PRETTIER_CONFIG;
+  process.env.WEB_SCRIPTS_PRETTIER_CONFIG || getPrettierConfig();
 const eslintConfig = process.env.WEB_SCRIPTS_ESLINT_CONFIG || getEslintConfig();
 
 const testRelatedChanges = `jest ${
@@ -22,9 +22,9 @@ const lintRelatedChanges = `eslint ${fix ? '--fix' : ''} ${
 // https://github.com/okonet/lint-staged/issues/174#issuecomment-461423707
 const typecheckRelatedChanges = `bash -c \"tsc --noEmit\"`;
 
-const formatRelatedChanges = `prettier ${
-  fix ? '--write' : '--check'
-} --config ${prettierConfig}`;
+const formatRelatedChanges = `prettier ${fix ? '--write' : '--check'} ${
+  prettierConfig ? `--config ${prettierConfig}` : ''
+}`.trim();
 
 const gitAdd = 'git add';
 

packages/web-scripts/src/SharedTypes.ts

@@ -3,6 +3,7 @@ export type TaskName =
   | 'build'
   | 'test'
   | 'lint'
+  | 'format'
   | 'commit'
   | 'commitmsg'
   | 'precommit'
@@ -31,6 +32,11 @@ export type LintTaskDesc = {
   typecheck: boolean;
 } & TaskDesc;
 
+export type FormatTaskDesc = {
+  name: 'format';
+  config?: string;
+} & TaskDesc;
+
 export type CommitTaskDesc = {
   name: 'commit';
   path: string;

packages/web-scripts/src/Tasks/FormatTask.ts

@@ -0,0 +1,37 @@
+import { default as Debug } from 'debug';
+import { default as spawn } from 'cross-spawn';
+import { SpawnSyncReturns } from 'child_process';
+
+import { FormatTaskDesc } from '../SharedTypes';
+import { PRETTIER_CONFIG } from '../Paths';
+import { hasConfig } from '../hasConfig';
+
+const dbg = Debug('web-scripts:format'); // eslint-disable-line new-cap
+
+export function getPrettierConfig(): string | null {
+  if (
+    !hasConfig([
+      { type: 'file', pattern: '.prettierrc' },
+      { type: 'file', pattern: 'prettier.config.js' },
+      { type: 'package.json', property: 'prettierrc' },
+    ])
+  ) {
+    return PRETTIER_CONFIG;
+  }
+
+  return null;
+}
+
+export function formatTask(task: FormatTaskDesc): SpawnSyncReturns<Buffer> {
+  const cmd = 'npx';
+  const config = task.config || getPrettierConfig();
+
+  const args = [
+    '--no-install',
+    'prettier',
+    ...(config ? ['--config', config] : []),
+    ...task.restOptions,
+  ];
+  dbg('npx args %o', args);
+  return spawn.sync(cmd, args, { stdio: 'inherit' });
+}

packages/web-scripts/src/index.ts

@@ -5,15 +5,17 @@ import {
   TestTaskDesc,
   BuildTaskDesc,
   LintTaskDesc,
+  FormatTaskDesc,
   CommitTaskDesc,
   CommitMsgTaskDesc,
   ReleaseTaskDesc,
   PrecommitTaskDesc,
 } from './SharedTypes';
-import { COMMITLINT_CONIFG, PRETTIER_CONFIG } from './Paths';
+import { COMMITLINT_CONIFG } from './Paths';
 import { testTask } from './Tasks/TestTask';
 import { buildTask } from './Tasks/BuildTask';
 import { lintTask } from './Tasks/LintTask';
+import { formatTask } from './Tasks/FormatTask';
 import {
   commitTask,
   commitMsgTask,
@@ -35,14 +37,16 @@ program
   .option('--no-esm', 'do not build esm target')
   .option('--no-cjs', 'do not build cjs target')
   .option('--no-types', 'do not build types target')
-  .action((cmd: Command) => {
-    const { esm, types, cjs } = cmd.opts();
+  .action((...args) => {
+    const cmd = getCommand(args);
+    const rest = getPositionalArgs(args);
+    const { esm, types, cjs } = getOpts(cmd);
     const t: BuildTaskDesc = {
       name: 'build',
       esm,
       types,
       cjs,
-      restOptions: parseRestOptions(cmd),
+      restOptions: [...parseRestOptions(cmd), ...rest],
     };
 
     handlePromiseResult(buildTask(t));
@@ -53,12 +57,14 @@ program
   .allowUnknownOption()
   .description('Run tests via jest')
   .option('--config [path]', 'path to jest config')
-  .action((cmd: Command) => {
-    const { config } = cmd.opts();
+  .action((...args) => {
+    const cmd = getCommand(args);
+    const rest = getPositionalArgs(args);
+    const { config } = getOpts(cmd);
     const t: TestTaskDesc = {
       name: 'test',
       config,
-      restOptions: parseRestOptions(cmd),
+      restOptions: [...parseRestOptions(cmd), ...rest],
     };
 
     const result = testTask(t);
@@ -71,47 +77,65 @@ program
   .description('Run ESLint and TypeScript to statically analyze your code')
   .option('--config [path]', 'path to ESLint config')
   .option('--typecheck', 'run a TypeScript type check')
-  .action((cmd: Command) => {
-    const { typecheck, config } = cmd.opts();
+  .action((...args) => {
+    const cmd = getCommand(args);
+    const rest = getPositionalArgs(args);
+    const { typecheck, config } = getOpts(cmd);
     const t: LintTaskDesc = {
       name: 'lint',
       config,
       typecheck,
-      restOptions: parseRestOptions(cmd),
+      restOptions: [...parseRestOptions(cmd), ...rest],
     };
 
     handlePromiseResult(lintTask(t));
   });
 
+program
+  .command('format')
+  .allowUnknownOption()
+  .description('Run Prettier to format your code')
+  .option('--config [path]', 'path to Prettier config')
+  .action((...args) => {
+    const cmd = getCommand(args);
+    const rest = getPositionalArgs(args);
+    const { config } = getOpts(cmd);
+    const t: FormatTaskDesc = {
+      name: 'format',
+      config,
+      restOptions: [...parseRestOptions(cmd), ...rest],
+    };
+
+    handleSpawnResult(formatTask(t));
+  });
+
 program
   .command('precommit')
   .allowUnknownOption()
   .description('Locally validate the repo before committing')
   .option('--jest-config [path]', 'path to jest config')
-  .option(
-    '--prettier-config [path]',
-    'path to prettier config',
-    PRETTIER_CONFIG,
-  )
+  .option('--prettier-config [path]', 'path to prettier config')
   .option('--eslint-config [path]', 'path to eslint config')
   .option('--no-fix', 'Do not auto-fix any static analysis errors')
   .option('--no-tests', 'Do not run Jest tests')
-  .action((cmd: Command) => {
+  .action((...args) => {
+    const cmd = getCommand(args);
+    const rest = getPositionalArgs(args);
     const {
       fix,
       tests,
       'jest-config': jestConfig,
       'eslint-config': eslintConfig,
       'prettier-config': prettierConfig,
-    } = cmd.opts();
+    } = getOpts(cmd);
     const t: PrecommitTaskDesc = {
       name: 'precommit',
       fix,
       tests,
       jestConfig,
       eslintConfig,
       prettierConfig,
-      restOptions: parseRestOptions(cmd),
+      restOptions: [...parseRestOptions(cmd), ...rest],
     };
 
     handleSpawnResult(precommitTask(t));
@@ -126,12 +150,14 @@ program
     'path for commitizen adapter to use',
     'cz-conventional-changelog',
   )
-  .action((cmd: Command) => {
-    const { path } = cmd.opts();
+  .action((...args) => {
+    const cmd = getCommand(args);
+    const rest = getPositionalArgs(args);
+    const { path } = getOpts(cmd);
     const t: CommitTaskDesc = {
       name: 'commit',
       path,
-      restOptions: parseRestOptions(cmd),
+      restOptions: [...parseRestOptions(cmd), ...rest],
     };
 
     try {
@@ -150,12 +176,14 @@ program
     'path to the commitlint config.',
     COMMITLINT_CONIFG,
   )
-  .action((cmd: Command) => {
-    const { config } = cmd.opts();
+  .action((...args) => {
+    const cmd = getCommand(args);
+    const rest = getPositionalArgs(args);
+    const { config } = getOpts(cmd);
     const t: CommitMsgTaskDesc = {
       name: 'commitmsg',
       config,
-      restOptions: parseRestOptions(cmd),
+      restOptions: [...parseRestOptions(cmd), ...rest],
     };
 
     handleSpawnResult(commitMsgTask(t));
@@ -165,10 +193,12 @@ program
   .command('release')
   .allowUnknownOption()
   .description('Run semantic-release')
-  .action((cmd: Command) => {
+  .action((...args) => {
+    const cmd = getCommand(args);
+    const rest = getPositionalArgs(args);
     const t: ReleaseTaskDesc = {
       name: 'release',
-      restOptions: parseRestOptions(cmd),
+      restOptions: [...parseRestOptions(cmd), ...rest],
     };
 
     handleSpawnResult(releaseTask(t));
@@ -178,11 +208,14 @@ function handlePromiseResult(result: Promise<any>) {
   result.catch(handleError);
 }
 
-function handleError(error: Error) {
+function handleError(error: Error & { exitStatus?: number }) {
   /* eslint-disable no-console */
-  console.error(error);
+  // only log if the error is useful (e.g. not the default message from non-zero status is in cross-spawn)
+  if (error.message && error.message.indexOf('Error: Exited with status') < 0) {
+    console.error(error);
+  }
   /* eslint-enable no-console */
-  process.exit(1);
+  process.exit(error.exitStatus || 1);
 }
 
 function handleSpawnResult(result: SpawnSyncReturns<Buffer>) {
@@ -195,8 +228,19 @@ function handleSpawnResult(result: SpawnSyncReturns<Buffer>) {
   }
 }
 
-function parseRestOptions(cmd: Command) {
-  // parse the rest of the options
+function getCommand(args: any[]): Command {
+  return args[args.length - 1] as Command;
+}
+
+function getPositionalArgs(args: any[]): string[] {
+  return args.slice(0, args.length - 1) as string[];
+}
+
+function getOpts(cmd: Command): { [key: string]: any } {
+  return cmd.opts();
+}
+
+function parseRestOptions(cmd: Command): string[] {
   return cmd.parseOptions(process.argv).unknown;
 }