List conflicting files when initializing app (#2785)

* change error wording and list conflicting files when initializing app

* update code

* Update createReactApp.js

Author: OwenFlood

packages/create-react-app/createReactApp.js

@@ -143,11 +143,7 @@ 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('Try using a new directory name.');
+  if (!isSafeToCreateProjectIn(root, name)) {
     process.exit(1);
   }
 
@@ -571,7 +567,7 @@ function setCaretRangeForRuntimeDeps(packageName) {
 // If project only contains files generated by GH, it’s safe.
 // We also special case IJ-based products .idea because it integrates with CRA:
 // https://github.com/facebookincubator/create-react-app/pull/368#issuecomment-243446094
-function isSafeToCreateProjectIn(root) {
+function isSafeToCreateProjectIn(root, name) {
   const validFiles = [
     '.DS_Store',
     'Thumbs.db',
@@ -585,7 +581,28 @@ function isSafeToCreateProjectIn(root) {
     '.hgignore',
     '.hgcheck',
   ];
-  return fs.readdirSync(root).every(file => validFiles.indexOf(file) >= 0);
+  console.log();
+
+  const conflicts = fs
+    .readdirSync(root)
+    .filter(file => !validFiles.includes(file));
+  if (conflicts.length < 1) {
+    return true;
+  }
+
+  console.log(
+    `The directory ${chalk.green(name)} contains files that could conflict:`
+  );
+  console.log();
+  for (const file of conflicts) {
+    console.log(`  ${file}`);
+  }
+  console.log();
+  console.log(
+    'Either try using a new directory name, or remove the files listed above.'
+  );
+
+  return false;
 }
 
 function checkIfOnline(useYarn) {