Prettier Phase 1: Prettier Configuration, Prettifying of files and documentation

2 files changed, 133 insertions, 0 deletions

diff --git a/scripts/frontend/frontend_script_utils.js b/scripts/frontend/frontend_script_utils.js
new file mode 100644
index 00000000000..2c06747255c
--- /dev/null
+++ b/scripts/frontend/frontend_script_utils.js
@@ -0,0 +1,30 @@
+/* eslint import/no-commonjs: "off" */
+const execFileSync = require('child_process').execFileSync;
+
+const exec = (command, args) => {
+  const options = {
+    cwd: process.cwd(),
+    env: process.env,
+    encoding: 'utf-8',
+  };
+  return execFileSync(command, args, options);
+};
+
+const execGitCmd = args =>
+  exec('git', args)
+    .trim()
+    .toString()
+    .split('\n');
+
+module.exports = {
+  getStagedFiles: fileExtensionFilter => {
+    const gitOptions = [
+      'diff',
+      '--name-only',
+      '--cached',
+      '--diff-filter=ACMRTUB',
+    ];
+    if (fileExtensionFilter) gitOptions.push(...fileExtensionFilter);
+    return execGitCmd(gitOptions);
+  },
+};
diff --git a/scripts/frontend/prettier.js b/scripts/frontend/prettier.js
new file mode 100644
index 00000000000..863572bf64d
--- /dev/null
+++ b/scripts/frontend/prettier.js
@@ -0,0 +1,103 @@
+/* eslint import/no-commonjs: "off", import/no-extraneous-dependencies: "off", no-console: "off" */
+const glob = require('glob');
+const prettier = require('prettier');
+const fs = require('fs');
+
+const getStagedFiles = require('./frontend_script_utils').getStagedFiles;
+
+const mode = process.argv[2] || 'check';
+const shouldSave = mode === 'save' || mode === 'save-all';
+const allFiles = mode === 'check-all' || mode === 'save-all';
+
+const config = {
+  patterns: ['**/*.js', '**/*.vue', '**/*.scss'],
+  ignore: ['**/node_modules/**', '**/vendor/**', '**/public/**'],
+  parsers: {
+    js: 'babylon',
+    vue: 'vue',
+    scss: 'css',
+  },
+};
+const availableExtensions = Object.keys(config.parsers);
+
+console.log(`Loading ${allFiles ? 'All' : 'Staged'} Files ...`);
+
+const stagedFiles = allFiles
+  ? null
+  : getStagedFiles(availableExtensions.map(ext => `*.${ext}`));
+
+if (stagedFiles) {
+  if (!stagedFiles.length || (stagedFiles.length === 1 && !stagedFiles[0])) {
+    console.log('No matching staged files.');
+    return;
+  }
+  console.log(`Matching staged Files : ${stagedFiles.length}`);
+}
+
+let didWarn = false;
+let didError = false;
+
+let files;
+if (allFiles) {
+  const ignore = config.ignore;
+  const patterns = config.patterns;
+  const globPattern =
+    patterns.length > 1 ? `{${patterns.join(',')}}` : `${patterns.join(',')}`;
+  files = glob
+    .sync(globPattern, { ignore })
+    .filter(f => allFiles || stagedFiles.includes(f));
+} else {
+  files = stagedFiles.filter(f =>
+    availableExtensions.includes(f.split('.').pop()),
+  );
+}
+
+if (!files.length) {
+  console.log('No Files found to process with Prettier');
+  return;
+}
+
+console.log(`${shouldSave ? 'Updating' : 'Checking'} ${files.length} file(s)`);
+
+prettier
+  .resolveConfig('.')
+  .then(options => {
+    console.log('Found options : ', options);
+    files.forEach(file => {
+      try {
+        const fileExtension = file.split('.').pop();
+        Object.assign(options, {
+          parser: config.parsers[fileExtension],
+        });
+
+        const input = fs.readFileSync(file, 'utf8');
+
+        if (shouldSave) {
+          const output = prettier.format(input, options);
+          if (output !== input) {
+            fs.writeFileSync(file, output, 'utf8');
+            console.log(`Prettified : ${file}`);
+          }
+        } else if (!prettier.check(input, options)) {
+          if (!didWarn) {
+            console.log(
+              '\n===============================\nGitLab uses Prettier to format all JavaScript code.\nPlease format each file listed below or run "yarn prettier-staged-save"\n===============================\n',
+            );
+            didWarn = true;
+          }
+          console.log(`Prettify Manually : ${file}`);
+        }
+      } catch (error) {
+        didError = true;
+        console.log(`\n\nError with ${file}: ${error.message}`);
+      }
+    });
+
+    if (didWarn || didError) {
+      process.exit(1);
+    }
+  })
+  .catch(e => {
+    console.log(`Error on loading the Config File: ${e.message}`);
+    process.exit(1);
+  });