feat(format): Add Prettier to new Format script and linting process (#21

)

* perf(format): Update prettier and related format changes

* feat(format): Add sku format script

* feat(format): Add Prettier to linting process

* fix(format): Use Prettier path relative to require.resolve

* fix(format): Use package.json to resolve bin location

* docs(format): Update comment typo

* fix(format): remove overly verbose function calls

bin/sku.js

@@ -7,6 +7,7 @@ switch (script) {
   case 'test':
   case 'build':
   case 'lint':
+  case 'format':
   case 'start': {
     const scriptPath = require.resolve('../scripts/' + script);
     const scriptArgs = [scriptPath, ...args];

config/builds.js

@@ -6,7 +6,7 @@ const deasyncPromise = require('deasync-promise');
 const skuConfigPath = path.join(cwd, 'sku.config.js');
 const args = require('./args');
 
-const makeArray = x => Array.isArray(x) ? x : [x];
+const makeArray = x => (Array.isArray(x) ? x : [x]);
 const buildConfigs = fs.existsSync(skuConfigPath)
   ? makeArray(require(skuConfigPath))
   : [{}];
@@ -19,7 +19,8 @@ if (!buildName && args.script === 'start' && buildConfigs.length > 1) {
       {
         type: 'list',
         name: 'buildName',
-        message: 'You appear to be running a monorepo. Which project would you like to work on?',
+        message:
+          'You appear to be running a monorepo. Which project would you like to work on?',
         choices: buildConfigs.map(x => x.name).filter(Boolean)
       }
     ])

config/jest/jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   testPathIgnorePatterns: ['<rootDir>[/\\\\](dist|node_modules)[/\\\\]'],
   moduleNameMapper: {
-    '\(seek-style-guide\/react|\.(css|less)$)': require.resolve(
+    '(seek-style-guide/react|.(css|less)$)': require.resolve(
       'identity-obj-proxy'
     )
   },

config/prettier/prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  singleQuote: true
+};

config/webpack/webpack.config.js

@@ -16,10 +16,7 @@ const jsLoaders = [
 ];
 
 const makeCssLoaders = (options = {}) => {
-  const {
-    server = false,
-    styleGuide = false
-  } = options;
+  const { server = false, styleGuide = false } = options;
 
   const debugIdent = isProductionBuild
     ? ''
@@ -58,7 +55,7 @@ const makeCssLoaders = (options = {}) => {
       // Hacky fix for https://github.com/webpack-contrib/css-loader/issues/74
       loader: require.resolve('string-replace-loader'),
       options: {
-        search: '(url\\([\'"]?)(\.)',
+        search: '(url\\([\'"]?)(.)',
         replace: '$1\\$2',
         flags: 'g'
       }
@@ -67,9 +64,7 @@ const makeCssLoaders = (options = {}) => {
 };
 
 const makeImageLoaders = (options = {}) => {
-  const {
-    server = false
-  } = options;
+  const { server = false } = options;
 
   return [
     {

lib/runPrettier.js

@@ -0,0 +1,62 @@
+const { spawn } = require('child_process');
+const path = require('path');
+
+const cwd = process.cwd();
+
+const filePattern = 'src/**/*.js';
+
+/*
+ * Prettier must be ran from
+ * command line to make use of command line output.
+ * Use the bin file identified by Prettier's package.json
+ */
+const getPrettierBinLocation = () => {
+  const prettierPackageJson = require('prettier/package.json');
+  return require.resolve(
+    path.join('prettier', prettierPackageJson.bin.prettier)
+  );
+};
+
+const runPrettier = ({ write, listDifferent, config }) => {
+  const prettierConfig = config || {};
+
+  const prettierBinPath = getPrettierBinLocation();
+
+  const prettierArgs = [filePattern];
+
+  if (prettierConfig.singleQuote) {
+    prettierArgs.push('--single-quote');
+  }
+  if (write) {
+    prettierArgs.push('--write');
+  }
+  if (listDifferent) {
+    prettierArgs.push('--list-different');
+  }
+
+  /*
+   * Show Prettier output with stdio: inherit
+   * The child process will use the parent process's stdin/stdout/stderr
+   * See https://nodejs.org/api/child_process.html#child_process_options_stdio
+   */
+  const processOptions = {
+    stdio: 'inherit'
+  };
+
+  const prettierProcess = spawn(prettierBinPath, prettierArgs, processOptions);
+
+  return new Promise((resolve, reject) => {
+    prettierProcess.on('exit', exitCode => {
+      if (exitCode === 0) {
+        resolve(exitCode);
+        return;
+      }
+      reject(exitCode);
+    });
+  });
+};
+
+module.exports = {
+  check: config => runPrettier({ listDifferent: true, config }),
+  write: config => runPrettier({ write: true, config })
+};

package.json

@@ -70,6 +70,7 @@
     "opn": "^4.0.2",
     "pad-left": "^2.1.0",
     "postcss-loader": "^1.3.3",
+    "prettier": "^1.5.2",
     "raw-loader": "^0.5.1",
     "react": "^15.4.2",
     "react-autosuggest": "^8.0.0",
@@ -91,7 +92,6 @@
     "cz-conventional-changelog": "^2.0.0",
     "husky": "^0.13.3",
     "lint-staged": "^3.4.0",
-    "prettier": "^0.22.0",
     "semantic-release": "^6.3.2",
     "validate-commit-msg": "^2.12.1"
   }

scripts/format.js

@@ -0,0 +1,15 @@
+const chalk = require('chalk');
+
+const prettierWrite = require('../lib/runPrettier').write;
+const prettierConfig = require('../config/prettier/prettier.config.js');
+
+console.log(chalk.cyan('Formatting source code with Prettier'));
+
+prettierWrite(prettierConfig)
+  .then(() => {
+    console.log(chalk.cyan('Prettier format complete'));
+  })
+  .catch(exitCode => {
+    console.error('Error: Prettier exited with exit code', exitCode);
+    process.exit(1);
+  });

scripts/lint.js

@@ -2,6 +2,9 @@ const chalk = require('chalk');
 const baseConfig = require('eslint-config-sku');
 const EslintCLI = require('eslint').CLIEngine;
 
+const prettierCheck = require('../lib/runPrettier').check;
+const prettierConfig = require('../config/prettier/prettier.config.js');
+
 const cli = new EslintCLI({
   baseConfig,
   useEslintrc: false
@@ -16,3 +19,13 @@ console.log(formatter(report.results));
 if (report.errorCount > 0) {
   process.exit(1);
 }
+
+console.log(chalk.cyan('Checking Prettier format rules'));
+prettierCheck(prettierConfig)
+  .then(() => {
+    console.log(chalk.cyan('Prettier format rules passed'));
+  })
+  .catch(exitCode => {
+    console.error('Error: Prettier check exited with exit code', exitCode);
+    process.exit(1);
+  });