ESLint formatter experiments

.buildkite/eslint-formatter-buildkite.js

@@ -0,0 +1,108 @@
+const spawnSync = require('child_process').spawnSync;
+const relative = require('path').relative;
+
+module.exports = function(results) {
+  const { warning, error } = results.reduce(
+      function(acc, file) {
+        if (file.errorCount > 0) {
+          acc.error.push(file);
+        }
+
+        if (file.warningCount > 0) {
+          acc.warning.push(file);
+        }
+
+        return acc;
+      },
+      {
+        warning: [],
+        error: []
+      }
+    );
+
+  if (error.length > 0) {
+    let errorOutput = `
+#### ESLint Errors
+
+${
+  error.map(function(file) {
+    return `
+<details><summary>${relative('.', file.filePath)}</summary>
+
+${
+  file.messages.map(function(message) {
+    if (message.severity !== 2) {
+      return '';
+    }
+
+    return `${message.line}:${message.column}: ${message.message} (${message.ruleId})`;
+  }).join('\n\n')
+}
+
+</details>`;
+
+      // return JSON.stringify(file, null, 2);
+  }).join('\n\n')
+}`;
+
+    if (process.env["BUILDKITE"]) {
+      const result = spawnSync(
+        'buildkite-agent', [ 'annotate', '--context', 'eslint-errors', '--style', 'error', ],
+        { encoding: 'utf8', input: errorOutput }
+      );
+
+      console.log(result.output.join('\n'));
+      console.log('Exit code: ' + result.status);
+
+      if (result.error) {
+        throw result.error;
+      }
+    } else {
+      console.log(errorOutput);
+    }
+  }
+
+  if (warning.length > 0) {
+    let warningOutput = `
+#### ESLint Warnings
+
+${
+  warning.map(function(file) {
+    return `
+<details><summary>${relative('.', file.filePath)}</summary>
+
+${
+  file.messages.map(function(message) {
+    if (message.severity > 1) {
+      return '';
+    }
+
+    return `${message.line}:${message.column}: ${message.message} (${message.ruleId})`;
+  }).join('\n\n')
+}
+
+</details>`;
+
+      // return JSON.stringify(file, null, 2);
+  }).join('\n\n')
+}`;
+
+    if (process.env["BUILDKITE"]) {
+      const result = spawnSync(
+        'buildkite-agent', [ 'annotate', '--context', 'eslint-warnings', '--style', 'warning' ],
+        { encoding: 'utf8', input: warningOutput }
+      );
+
+      console.log(result.output.join('\n'));
+      console.log('Exit code: ' + result.status);
+
+      if (result.error) {
+        throw result.error;
+      }
+    } else {
+      console.log(warningOutput);
+    }
+  }
+
+  return '';
+};

.buildkite/eslint-formatter-multi.js

@@ -0,0 +1,32 @@
+// Pull in ESLint's own "getFormatter" method (https://git.io/fpAqw), which
+// normalises both ESLint's friendly names, npm package names, and files
+// on-disk, and then returns the result of requiring them.
+let getFormatter = require('eslint/lib/cli-engine').prototype.getFormatter.bind({});
+
+module.exports = function(results) {
+  // Since ESLint doesn't give us access to any context or config,
+  // we have to resort to pulling Environment Variables
+  let formatters = (
+    process.env['ESLINT_MULTI_FORMATTERS'].split(';')
+    || [ false ]
+  );
+
+  // Map over each formatter, calling it with the result array we got given,
+  // then return the combination of all the outputs.
+  return formatters
+    .map(function (formatterName) {
+      let formatter = getFormatter(formatterName);
+
+      // TODO: When would this happen, and not just be a thrown error?
+      if (!formatter) {
+        console.debug('Weird! "' + formatterName + '" isn\'t a real formatter...');
+        return;
+      }
+
+      return formatter(results);
+    })
+    .filter(function(output) {
+      return output && output.trim().length > 0;
+    })
+    .join('\n\n');
+};

Dockerfile

@@ -4,6 +4,16 @@ EXPOSE 4890
 
 ENV EMOJI_HOST=http://buildkite.localhost/_frontend/vendor/emojis
 
+ADD --chown=root:root https://apt.buildkite.com/keys/6452D198.asc /etc/apt/trusted.gpg.d/buildkite.asc
+
+RUN echo "--- :package: Installing system deps" \
+    # Buildkite apt sources
+    && chmod 644 /etc/apt/trusted.gpg.d/buildkite.asc \
+    && echo "deb http://apt.buildkite.com/buildkite-agent unstable main" > /etc/apt/sources.list.d/buildkite.list \
+    # Install buildkite-agent
+    && apt-get update \
+    && DEBIAN_FRONTEND=noninteractive apt-get install --assume-yes --no-install-recommends buildkite-agent
+
 WORKDIR /frontend
 
 # Install yarn dependencies

app/components/layout/Navigation/index.js

@@ -82,7 +82,7 @@ class Navigation extends React.PureComponent<Props, State> {
     ) {
       this.setState({
         lastDefaultTeam: UserSessionStore.get(`organization-default-team:${nextProps.organization.id}`)
-      });
+      })
     }
   }
 

docker-compose.yml

@@ -9,8 +9,11 @@ services:
       - BUILDKITE_COMMIT
       - BUILDKITE_ORGANIZATION_SLUG
       - BUILDKITE_PIPELINE_SLUG
+      - BUILDKITE_BUILD_URL
+      - BUILDKITE_JOB_ID
+      - BUILDKITE_AGENT_ACCESS_TOKEN
       - CI
     volumes:
       - "./bundle-analysis:/frontend/bundle-analysis"
       - "./coverage:/frontend/coverage"
-      - "./dist:/host/dist"
+      - "./dist:/host/dist"

package.json

@@ -13,8 +13,8 @@
     "test": "NODE_ENV=test jest --colors",
     "test-with-coverage": "yarn test --coverage",
     "flow": "flow",
-    "lint": "eslint . --color",
-    "lint-and-fix": "eslint --fix --color .",
+    "lint": "ESLINT_MULTI_FORMATTERS=\"stylish;./.buildkite/eslint-formatter-buildkite.js\" eslint . -f='./.buildkite/eslint-formatter-multi.js' --color",
+    "lint-and-fix": "ESLINT_MULTI_FORMATTERS=\"stylish;./.buildkite/eslint-formatter-buildkite.js\" eslint --fix -f='./.buildkite/eslint-formatter-multi.js' --color .",
     "relay-compile": "relay-compiler --schema app/graph/schema.json --src app",
     "prebuild": "yarn run relay-compile",
     "build": "NODE_ENV=development webpack --config webpack/config.js --progress --bail --cache",