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

9 files changed, 214 insertions, 14 deletions

diff --git a/.eslintrc b/.eslintrc
index a86f8a841c3..3f187db0c07 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -35,15 +35,22 @@
     "import/no-commonjs": "error",
     "no-multiple-empty-lines": ["error", { "max": 1 }],
     "promise/catch-or-return": "error",
-    "no-underscore-dangle": ["error", { "allow": ["__", "_links"]}],
-    "vue/html-self-closing": ["error", {
-      "html": {
-        "void": "always",
-        "normal": "never",
-        "component": "always"
-      },
-      "svg": "always",
-      "math": "always"
-    }]
+    "no-underscore-dangle": ["error", { "allow": ["__", "_links"] }],
+    "no-mixed-operators": 0,
+    "space-before-function-paren": 0,
+    "curly": 0,
+    "arrow-parens": 0,
+    "vue/html-self-closing": [
+      "error",
+      {
+        "html": {
+          "void": "always",
+          "normal": "never",
+          "component": "always"
+        },
+        "svg": "always",
+        "math": "always"
+      }
+    ]
   }
 }
diff --git a/.gitignore b/.gitignore
index 90c6bd99d30..447fb71bd64 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@
 eslint-report.html
 /.gitlab_shell_secret
 .idea
+/.vscode/*
 /.rbenv-version
 .rbx/
 /.ruby-gemset
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000000..a20502b7f06
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}
diff --git a/doc/development/new_fe_guide/style/index.md b/doc/development/new_fe_guide/style/index.md
index d2d576b3b46..ebee57bebbf 100644
--- a/doc/development/new_fe_guide/style/index.md
+++ b/doc/development/new_fe_guide/style/index.md
@@ -7,3 +7,9 @@
 ## [JavaScript style guide](javascript.md)
 
 ## [Vue style guide](vue.md)
+
+# Tooling
+
+## [Prettier](prettier.md)
+
+Our code is automatically formatted with [Prettier](https://prettier.io) to follow our guidelines.
diff --git a/doc/development/new_fe_guide/style/prettier.md b/doc/development/new_fe_guide/style/prettier.md
new file mode 100644
index 00000000000..eb18189282b
--- /dev/null
+++ b/doc/development/new_fe_guide/style/prettier.md
@@ -0,0 +1,45 @@
+# Formatting with Prettier
+
+Our code is automatically formatted with [Prettier](https://prettier.io) to follow our style guides. Prettier is taking care of formatting .js, .vue, and .scss files based on the standard prettier rules. You can find all settings for Prettier in `.prettierrc`.
+
+## Editor
+
+The easiest way to include prettier in your workflow is by setting up your preferred editor (all major editors are supported) accordingly. We suggest setting up prettier to run automatically when each file is saved. Find [here](https://prettier.io/docs/en/editors.html) the best way to set it up in your preferred editor. 
+
+Please take care that you only let Prettier format the same file types as the global Yarn script does (.js, .vue, and .scss). In VSCode by example you can easily exclude file formats in your settings file:
+
+```
+  "prettier.disableLanguages": [
+      "json",
+      "markdown"
+  ],
+```
+
+## Yarn Script
+
+The following yarn scripts are available to do global formatting:
+
+```
+yarn prettier-staged-save
+```
+
+Updates all currently staged files (based on `git diff`) with Prettier and saves the needed changes.
+
+```
+yarn prettier-staged
+```
+Checks all currently staged files (based on `git diff`) with Prettier and log which files would need manual updating to the console.
+
+```
+yarn prettier-all
+```
+
+Checks all files with Prettier and logs which files need manual updating to the console.
+
+```
+yarn prettier-all-save
+```
+
+Formats all files in the repository with Prettier. (This should only be used to test global rule updates otherwise you would end up with huge MR's).
+
+The source of these Yarn scripts can be found in `/scripts/frontend/prettier.js`.
diff --git a/package.json b/package.json
index 472bdbebda8..deee668ae3b 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,10 @@
     "karma": "karma start config/karma.config.js --single-run",
     "karma-coverage": "BABEL_ENV=coverage karma start config/karma.config.js --single-run",
     "karma-start": "karma start config/karma.config.js",
+    "prettier-staged": "node ./scripts/frontend/prettier.js",
+    "prettier-staged-save": "node ./scripts/frontend/prettier.js save",
+    "prettier-all": "node ./scripts/frontend/prettier.js check-all",
+    "prettier-all-save": "node ./scripts/frontend/prettier.js save-all",
     "webpack": "webpack --config config/webpack.config.js",
     "webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js"
   },
@@ -114,7 +118,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "2.0.7",
     "nodemon": "^1.15.1",
-    "prettier": "1.9.2",
+    "prettier": "1.11.1",
     "webpack-dev-server": "^2.11.2"
   }
 }
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);
+  });
diff --git a/yarn.lock b/yarn.lock
index adbb37bea72..3cc5445c402 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6685,9 +6685,9 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier@1.9.2:
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.9.2.tgz#96bc2132f7a32338e6078aeb29727178c6335827"
+prettier@1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.11.1.tgz#61e43fc4cd44e68f2b0dfc2c38cd4bb0fccdcc75"
 
 prettier@^1.7.0:
   version "1.8.2"