Enable colors to syntax highlight code in errors

Reviewed By: mjesun

Differential Revision: D7110895

fbshipit-source-id: 1ec1a2147258de44fe65453e1df25afb72c2c6a4

packages/metro/src/JSTransformer/index.js

@@ -10,8 +10,9 @@
 
 'use strict';
 
-const {Logger} = require('metro-core');
+const chalk = require('chalk');
 
+const {Logger} = require('metro-core');
 const debug = require('debug')('Metro:JStransformer');
 const Worker = require('jest-worker').default;
 
@@ -150,11 +151,16 @@ module.exports = class Transformer {
         /^--heap[_-]growing[_-]percent=[0-9]+$/.test(arg) ||
         /^--max[_-]old[_-]space[_-]size=[0-9]+$/.test(arg),
     );
+    const env = {
+      ...process.env,
+      // Force color to print syntax highlighted code frames.
+      FORCE_COLOR: chalk.supportsColor ? 1 : 0,
+    };
 
     return new Worker(workerPath, {
       computeWorkerKey,
       exposedMethods,
-      forkOptions: {execArgv},
+      forkOptions: {env, execArgv},
       numWorkers,
     });
   }

packages/metro/src/defaultTransform.js

@@ -26,7 +26,12 @@ module.exports.transform = ({filename, options, plugins, src}: Params) => {
   process.env.BABEL_ENV = options.dev ? 'development' : 'production';
 
   try {
-    const {ast} = transformSync(src, {filename, code: false, plugins});
+    const {ast} = transformSync(src, {
+      filename,
+      code: false,
+      highlightCode: true,
+      plugins,
+    });
 
     return {ast};
   } finally {

packages/metro/src/lib/__tests__/__snapshots__/getTransformCacheKeyFn-test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`getTransformCacheKeyFn Should return always the same key for the same params 1`] = `"ebb4289551298854bc262e46bbb58c038dc97c91"`;
+exports[`getTransformCacheKeyFn Should return always the same key for the same params 1`] = `"e65336d380f8bf43e00f5cd94b8bf541b1b08f5c"`;

packages/metro/src/transformer.js

@@ -89,6 +89,7 @@ function buildBabelConfig(filename, options, plugins?: BabelPlugins = []) {
         : true,
     code: false,
     filename,
+    highlightCode: true,
   };
 
   let config = Object.assign({}, babelRC, extraConfig);