[Not for merge] Dogfood Prettier

Created by: gaearon

I'd like to eventually start recommending it by default, but we need to dogfood it first. It's currently not stable yet, and has numerous known issues, but I'd like to use this as an opportunity to report any issues we find ourselves on our codebase.

If you see something weird (not just stylistically debatable, but wrong) in this PR, leave a comment. We can then cross-reference the list with open Prettier issues, and maybe file some new ones.

packages/babel-preset-react-app/index.js

@@ -16,21 +16,30 @@ const plugins = [
   // The following two plugins use Object.assign directly, instead of Babel's
   // extends helper. Note that this assumes `Object.assign` is available.
   // { ...todo, completed: true }
-  [require.resolve('babel-plugin-transform-object-rest-spread'), {
-    useBuiltIns: true
-  }],
+  [
+    require.resolve('babel-plugin-transform-object-rest-spread'),
+    {
+      useBuiltIns: true
+    }
+  ],
   // Transforms JSX
-  [require.resolve('babel-plugin-transform-react-jsx'), {
-    useBuiltIns: true
-  }],
+  [
+    require.resolve('babel-plugin-transform-react-jsx'),
+    {
+      useBuiltIns: true
+    }
+  ],
   // Polyfills the runtime needed for async/await and generators
-  [require.resolve('babel-plugin-transform-runtime'), {
-    helpers: false,
-    polyfill: false,
-    regenerator: true,
-    // Resolve the Babel runtime relative to the config.
-    moduleName: path.dirname(require.resolve('babel-runtime/package'))
-  }]
+  [
+    require.resolve('babel-plugin-transform-runtime'),
+    {
+      helpers: false,
+      polyfill: false,
+      regenerator: true,
+      // Resolve the Babel runtime relative to the config.
+      moduleName: path.dirname(require.resolve('babel-runtime/package'))
+    }
+  ]
 ];
 
 // This is similar to how `env` works in Babel:
@@ -42,9 +51,11 @@ const plugins = [
 var env = process.env.BABEL_ENV || process.env.NODE_ENV;
 if (env !== 'development' && env !== 'test' && env !== 'production') {
   throw new Error(
-    'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or '+
-    '`BABEL_ENV` environment variables. Valid values are "development", ' +
-    '"test", and "production". Instead, received: ' + JSON.stringify(env) + '.'
+    'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' +
+      '`BABEL_ENV` environment variables. Valid values are "development", ' +
+      '"test", and "production". Instead, received: ' +
+      JSON.stringify(env) +
+      '.'
   );
 }
 
@@ -74,11 +85,14 @@ if (env === 'test') {
   module.exports = {
     presets: [
       // ES features necessary for user's Node version
-      [require('babel-preset-env').default, {
-        targets: {
-          node: 'current',
-        },
-      }],
+      [
+        require('babel-preset-env').default,
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
       // JSX, Flow
       require.resolve('babel-preset-react')
     ],
@@ -94,10 +108,13 @@ if (env === 'test') {
     ],
     plugins: plugins.concat([
       // function* () { yield 42; yield 43; }
-      [require.resolve('babel-plugin-transform-regenerator'), {
-        // Async functions are converted to generators by babel-preset-latest
-        async: false
-      }],
+      [
+        require.resolve('babel-plugin-transform-regenerator'),
+        {
+          // Async functions are converted to generators by babel-preset-latest
+          async: false
+        }
+      ]
     ])
   };
 

packages/create-react-app/index.js

@@ -40,13 +40,15 @@
 
 var chalk = require('chalk');
 
-var currentNodeVersion = process.versions.node
+var currentNodeVersion = process.versions.node;
 if (currentNodeVersion.split('.')[0] < 4) {
   console.error(
     chalk.red(
-      'You are running Node ' + currentNodeVersion + '.\n' +
-      'Create React App requires Node 4 or higher. \n' +
-      'Please update your version of Node.'
+      'You are running Node ' +
+        currentNodeVersion +
+        '.\n' +
+        'Create React App requires Node 4 or higher. \n' +
+        'Please update your version of Node.'
     )
   );
   process.exit(1);
@@ -65,44 +67,78 @@ var program = commander
   .version(require('./package.json').version)
   .arguments('<project-directory>')
   .usage(chalk.green('<project-directory>') + ' [options]')
-  .action(function (name) {
+  .action(function(name) {
     projectName = name;
   })
   .option('--verbose', 'print additional logs')
-  .option('--scripts-version <alternative-package>', 'use a non-standard version of react-scripts')
+  .option(
+    '--scripts-version <alternative-package>',
+    'use a non-standard version of react-scripts'
+  )
   .allowUnknownOption()
-  .on('--help', function () {
-    console.log('    Only ' + chalk.green('<project-directory>') + ' is required.');
+  .on('--help', function() {
+    console.log(
+      '    Only ' + chalk.green('<project-directory>') + ' is required.'
+    );
     console.log();
-    console.log('    A custom ' + chalk.cyan('--scripts-version') + ' can be one of:');
+    console.log(
+      '    A custom ' + chalk.cyan('--scripts-version') + ' can be one of:'
+    );
     console.log('      - a specific npm version: ' + chalk.green('0.8.2'));
-    console.log('      - a custom fork published on npm: ' + chalk.green('my-react-scripts'));
-    console.log('      - a .tgz archive: ' + chalk.green('https://mysite.com/my-react-scripts-0.8.2.tgz'));
-    console.log('    It is not needed unless you specifically want to use a fork.');
+    console.log(
+      '      - a custom fork published on npm: ' +
+        chalk.green('my-react-scripts')
+    );
+    console.log(
+      '      - a .tgz archive: ' +
+        chalk.green('https://mysite.com/my-react-scripts-0.8.2.tgz')
+    );
+    console.log(
+      '    It is not needed unless you specifically want to use a fork.'
+    );
     console.log();
-    console.log('    If you have any problems, do not hesitate to file an issue:');
-    console.log('      ' + chalk.cyan('https://github.com/facebookincubator/create-react-app/issues/new'));
+    console.log(
+      '    If you have any problems, do not hesitate to file an issue:'
+    );
+    console.log(
+      '      ' +
+        chalk.cyan(
+          'https://github.com/facebookincubator/create-react-app/issues/new'
+        )
+    );
     console.log();
   })
   .parse(process.argv);
 
 if (typeof projectName === 'undefined') {
   console.error('Please specify the project directory:');
-  console.log('  ' + chalk.cyan(program.name()) + chalk.green(' <project-directory>'));
+  console.log(
+    '  ' + chalk.cyan(program.name()) + chalk.green(' <project-directory>')
+  );
   console.log();
   console.log('For example:');
   console.log('  ' + chalk.cyan(program.name()) + chalk.green(' my-react-app'));
   console.log();
-  console.log('Run ' + chalk.cyan(program.name() + ' --help') + ' to see all options.');
+  console.log(
+    'Run ' + chalk.cyan(program.name() + ' --help') + ' to see all options.'
+  );
   process.exit(1);
 }
 
 var hiddenProgram = new commander.Command()
-  .option('--internal-testing-template <path-to-template>', '(internal usage only, DO NOT RELY ON THIS) ' +
-    'use a non-standard application template')
-  .parse(process.argv)
+  .option(
+    '--internal-testing-template <path-to-template>',
+    '(internal usage only, DO NOT RELY ON THIS) ' +
+      'use a non-standard application template'
+  )
+  .parse(process.argv);
 
-createApp(projectName, program.verbose, program.scriptsVersion, hiddenProgram.internalTestingTemplate);
+createApp(
+  projectName,
+  program.verbose,
+  program.scriptsVersion,
+  hiddenProgram.internalTestingTemplate
+);
 
 function createApp(name, verbose, version, template) {
   var root = path.resolve(name);
@@ -111,20 +147,22 @@ function createApp(name, verbose, version, template) {
   checkAppName(appName);
   fs.ensureDirSync(name);
   if (!isSafeToCreateProjectIn(root)) {
-    console.log('The directory ' + chalk.green(name) + ' contains files that could conflict.');
+    console.log(
+      'The directory ' +
+        chalk.green(name) +
+        ' contains files that could conflict.'
+    );
     console.log('Try using a new directory name.');
     process.exit(1);
   }
 
-  console.log(
-    'Creating a new React app in ' + chalk.green(root) + '.'
-  );
+  console.log('Creating a new React app in ' + chalk.green(root) + '.');
   console.log();
 
   var packageJson = {
     name: appName,
     version: '0.1.0',
-    private: true,
+    private: true
   };
   fs.writeFileSync(
     path.join(root, 'package.json'),
@@ -142,7 +180,7 @@ function createApp(name, verbose, version, template) {
 
 function shouldUseYarn() {
   try {
-    execSync('yarnpkg --version', {stdio: 'ignore'});
+    execSync('yarnpkg --version', { stdio: 'ignore' });
     return true;
   } catch (e) {
     return false;
@@ -154,7 +192,7 @@ function install(packageToInstall, verbose, callback) {
   var args;
   if (shouldUseYarn()) {
     command = 'yarnpkg';
-    args = [ 'add', '--dev', '--exact', packageToInstall];
+    args = ['add', '--dev', '--exact', packageToInstall];
   } else {
     command = 'npm';
     args = ['install', '--save-dev', '--save-exact', packageToInstall];
@@ -164,7 +202,7 @@ function install(packageToInstall, verbose, callback) {
     args.push('--verbose');
   }
 
-  var child = spawn(command, args, {stdio: 'inherit'});
+  var child = spawn(command, args, { stdio: 'inherit' });
   child.on('close', function(code) {
     callback(code, command, args);
   });
@@ -235,8 +273,8 @@ function checkNodeVersion(packageName) {
     console.error(
       chalk.red(
         'You are running Node %s.\n' +
-        'Create React App requires Node %s or higher. \n' +
-        'Please update your version of Node.'
+          'Create React App requires Node %s or higher. \n' +
+          'Please update your version of Node.'
       ),
       process.version,
       packageJson.engines.node
@@ -254,15 +292,19 @@ function checkAppName(appName) {
   if (allDependencies.indexOf(appName) >= 0) {
     console.error(
       chalk.red(
-        'We cannot create a project called ' + chalk.green(appName) + ' because a dependency with the same name exists.\n' +
-        'Due to the way npm works, the following names are not allowed:\n\n'
+        'We cannot create a project called ' +
+          chalk.green(appName) +
+          ' because a dependency with the same name exists.\n' +
+          'Due to the way npm works, the following names are not allowed:\n\n'
       ) +
-      chalk.cyan(
-        allDependencies.map(function(depName) {
-          return '  ' + depName;
-        }).join('\n')
-      ) +
-      chalk.red('\n\nPlease choose a different project name.')
+        chalk.cyan(
+          allDependencies
+            .map(function(depName) {
+              return '  ' + depName;
+            })
+            .join('\n')
+        ) +
+        chalk.red('\n\nPlease choose a different project name.')
     );
     process.exit(1);
   }
@@ -273,10 +315,15 @@ function checkAppName(appName) {
 // https://github.com/facebookincubator/create-react-app/pull/368#issuecomment-243446094
 function isSafeToCreateProjectIn(root) {
   var validFiles = [
-    '.DS_Store', 'Thumbs.db', '.git', '.gitignore', '.idea', 'README.md', 'LICENSE'
+    '.DS_Store',
+    'Thumbs.db',
+    '.git',
+    '.gitignore',
+    '.idea',
+    'README.md',
+    'LICENSE'
   ];
-  return fs.readdirSync(root)
-    .every(function(file) {
-      return validFiles.indexOf(file) >= 0;
-    });
+  return fs.readdirSync(root).every(function(file) {
+    return validFiles.indexOf(file) >= 0;
+  });
 }

packages/eslint-config-react-app/index.js

@@ -18,11 +18,8 @@
 
 module.exports = {
   root: true,
-
   parser: 'babel-eslint',
-
   plugins: ['import', 'flowtype', 'jsx-a11y', 'react'],
-
   env: {
     browser: true,
     commonjs: true,
@@ -30,7 +27,6 @@ module.exports = {
     jest: true,
     node: true
   },
-
   parserOptions: {
     ecmaVersion: 6,
     sourceType: 'module',
@@ -40,11 +36,8 @@ module.exports = {
       experimentalObjectRestSpread: true
     }
   },
-
   settings: {
-    'import/ignore': [
-      'node_modules'
-    ],
+    'import/ignore': ['node_modules'],
     'import/extensions': ['.js'],
     'import/resolver': {
       node: {
@@ -52,7 +45,6 @@ module.exports = {
       }
     }
   },
-
   rules: {
     // http://eslint.org/docs/rules/
     'array-callback-return': 'warn',
@@ -87,15 +79,18 @@ module.exports = {
     'no-labels': ['warn', { allowLoop: false, allowSwitch: false }],
     'no-lone-blocks': 'warn',
     'no-loop-func': 'warn',
-    'no-mixed-operators': ['warn', {
-      groups: [
-        ['&', '|', '^', '~', '<<', '>>', '>>>'],
-        ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
-        ['&&', '||'],
-        ['in', 'instanceof']
-      ],
-      allowSamePrecedence: false
-    }],
+    'no-mixed-operators': [
+      'warn',
+      {
+        groups: [
+          ['&', '|', '^', '~', '<<', '>>', '>>>'],
+          ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
+          ['&&', '||'],
+          ['in', 'instanceof']
+        ],
+        allowSamePrecedence: false
+      }
+    ],
     'no-multi-str': 'warn',
     'no-native-reassign': 'warn',
     'no-negated-in-lhs': 'warn',
@@ -108,11 +103,7 @@ module.exports = {
     'no-octal-escape': 'warn',
     'no-redeclare': 'warn',
     'no-regex-spaces': 'warn',
-    'no-restricted-syntax': [
-      'warn',
-      'LabeledStatement',
-      'WithStatement',
-    ],
+    'no-restricted-syntax': ['warn', 'LabeledStatement', 'WithStatement'],
     'no-script-url': 'warn',
     'no-self-assign': 'warn',
     'no-self-compare': 'warn',
@@ -125,26 +116,35 @@ module.exports = {
     'no-undef': 'error',
     'no-unexpected-multiline': 'warn',
     'no-unreachable': 'warn',
-    'no-unused-expressions': ['warn', {
-      'allowShortCircuit': true,
-      'allowTernary': true
-    }],
+    'no-unused-expressions': [
+      'warn',
+      {
+        allowShortCircuit: true,
+        allowTernary: true
+      }
+    ],
     'no-unused-labels': 'warn',
-    'no-unused-vars': ['warn', {
-      vars: 'local',
-      varsIgnorePattern: '^_',
-      args: 'none'
-    }],
+    'no-unused-vars': [
+      'warn',
+      {
+        vars: 'local',
+        varsIgnorePattern: '^_',
+        args: 'none'
+      }
+    ],
     'no-use-before-define': ['warn', 'nofunc'],
     'no-useless-computed-key': 'warn',
     'no-useless-concat': 'warn',
     'no-useless-constructor': 'warn',
     'no-useless-escape': 'warn',
-    'no-useless-rename': ['warn', {
-      ignoreDestructuring: false,
-      ignoreImport: false,
-      ignoreExport: false,
-    }],
+    'no-useless-rename': [
+      'warn',
+      {
+        ignoreDestructuring: false,
+        ignoreImport: false,
+        ignoreExport: false
+      }
+    ],
     'no-with': 'warn',
     'no-whitespace-before-property': 'warn',
     'operator-assignment': ['warn', 'always'],
@@ -155,7 +155,6 @@ module.exports = {
     'unicode-bom': ['warn', 'never'],
     'use-isnan': 'warn',
     'valid-typeof': 'warn',
-
     // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/
 
     // TODO: import rules are temporarily disabled because they don't play well
@@ -185,15 +184,17 @@ module.exports = {
     // We don't support configuring Webpack using import source strings, so this
     // is always an error.
     'import/no-webpack-loader-syntax': 'error',
-
     // https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules
     'react/jsx-equals-spacing': ['warn', 'never'],
     'react/jsx-no-duplicate-props': ['warn', { ignoreCase: true }],
     'react/jsx-no-undef': 'error',
-    'react/jsx-pascal-case': ['warn', {
-      allowAllCaps: true,
-      ignore: [],
-    }],
+    'react/jsx-pascal-case': [
+      'warn',
+      {
+        allowAllCaps: true,
+        ignore: []
+      }
+    ],
     'react/jsx-uses-react': 'warn',
     'react/jsx-uses-vars': 'warn',
     'react/no-danger-with-children': 'warn',
@@ -203,13 +204,11 @@ module.exports = {
     'react/react-in-jsx-scope': 'error',
     'react/require-render-return': 'warn',
     'react/style-prop-object': 'warn',
-
     // https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules
     'jsx-a11y/aria-role': 'warn',
     'jsx-a11y/img-has-alt': 'warn',
     'jsx-a11y/img-redundant-alt': 'warn',
     'jsx-a11y/no-access-key': 'warn',
-
     // https://github.com/gajus/eslint-plugin-flowtype
     'flowtype/define-flow-type': 'warn',
     'flowtype/require-valid-file-annotation': 'warn',

packages/react-dev-utils/InterpolateHtmlPlugin.js

@@ -25,19 +25,20 @@ class InterpolateHtmlPlugin {
 
   apply(compiler) {
     compiler.plugin('compilation', compilation => {
-      compilation.plugin('html-webpack-plugin-before-html-processing',
-        (data, callback) => {
-          // Run HTML through a series of user-specified string replacements.
-          Object.keys(this.replacements).forEach(key => {
-            const value = this.replacements[key];
-            data.html = data.html.replace(
-              new RegExp('%' + escapeStringRegexp(key) + '%', 'g'),
-              value
-            );
-          });
-          callback(null, data);
-        }
-      );
+      compilation.plugin('html-webpack-plugin-before-html-processing', (
+        data,
+        callback
+      ) => {
+        // Run HTML through a series of user-specified string replacements.
+        Object.keys(this.replacements).forEach(key => {
+          const value = this.replacements[key];
+          data.html = data.html.replace(
+            new RegExp('%' + escapeStringRegexp(key) + '%', 'g'),
+            value
+          );
+        });
+        callback(null, data);
+      });
     });
   }
 }

packages/react-dev-utils/clearConsole.js

@@ -8,7 +8,9 @@
  */
 
 function clearConsole() {
-  process.stdout.write(process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H');
+  process.stdout.write(
+    process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H'
+  );
 }
 
 module.exports = clearConsole;