Add stylelint

packages/create-react-app/createReactApp.js

@@ -85,19 +85,13 @@ const program = new commander.Command(packageJson.name)
     );
     console.log(`      - a specific npm version: ${chalk.green('0.8.2')}`);
     console.log(
-      `      - a custom fork published on npm: ${chalk.green(
-        'my-react-scripts'
-      )}`
+      `      - 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'
-      )}`
+      `      - a .tgz archive: ${chalk.green('https://mysite.com/my-react-scripts-0.8.2.tgz')}`
     );
     console.log(
-      `      - a .tar.gz archive: ${chalk.green(
-        'https://mysite.com/my-react-scripts-0.8.2.tar.gz'
-      )}`
+      `      - a .tar.gz archive: ${chalk.green('https://mysite.com/my-react-scripts-0.8.2.tar.gz')}`
     );
     console.log(
       `    It is not needed unless you specifically want to use a fork.`
@@ -107,9 +101,7 @@ const program = new commander.Command(packageJson.name)
       `    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'
-      )}`
+      `      ${chalk.cyan('https://github.com/facebookincubator/create-react-app/issues/new')}`
     );
     console.log();
   })
@@ -297,19 +289,15 @@ function run(
 
   console.log('Installing packages. This might take a couple of minutes.');
   getPackageName(packageToInstall)
-    .then(packageName =>
-      checkIfOnline(useYarn).then(isOnline => ({
-        isOnline: isOnline,
-        packageName: packageName,
-      }))
-    )
+    .then(packageName => checkIfOnline(useYarn).then(isOnline => ({
+      isOnline: isOnline,
+      packageName: packageName,
+    })))
     .then(info => {
       const isOnline = info.isOnline;
       const packageName = info.packageName;
       console.log(
-        `Installing ${chalk.cyan('react')}, ${chalk.cyan(
-          'react-dom'
-        )}, and ${chalk.cyan(packageName)}...`
+        `Installing ${chalk.cyan('react')}, ${chalk.cyan('react-dom')}, and ${chalk.cyan(packageName)}...`
       );
       console.log();
 
@@ -367,9 +355,7 @@ function run(
       if (!remainingFiles.length) {
         // Delete target folder if empty
         console.log(
-          `Deleting ${chalk.cyan(`${appName}/`)} from ${chalk.cyan(
-            path.resolve(root, '..')
-          )}`
+          `Deleting ${chalk.cyan(`${appName}/`)} from ${chalk.cyan(path.resolve(root, '..'))}`
         );
         process.chdir(path.resolve(root, '..'));
         fs.removeSync(path.join(root));
@@ -385,10 +371,7 @@ function getInstallPackage(version, originalDirectory) {
   if (validSemver) {
     packageToInstall += `@${validSemver}`;
   } else if (version && version.match(/^file:/)) {
-    packageToInstall = `file:${path.resolve(
-      originalDirectory,
-      version.match(/^file:(.*)?$/)[1]
-    )}`;
+    packageToInstall = `file:${path.resolve(originalDirectory, version.match(/^file:(.*)?$/)[1])}`;
   } else if (version) {
     // for tar.gz or alternative paths
     packageToInstall = version;
@@ -462,9 +445,7 @@ function getPackageName(installPackage) {
           /^.+\/(.+?)(?:-\d+.+)?\.(tgz|tar\.gz)$/
         )[1];
         console.log(
-          `Based on the filename, assuming it is "${chalk.cyan(
-            assumedProjectName
-          )}"`
+          `Based on the filename, assuming it is "${chalk.cyan(assumedProjectName)}"`
         );
         return Promise.resolve(assumedProjectName);
       });
@@ -493,9 +474,7 @@ function checkNpmVersion() {
   let hasMinNpm = false;
   let npmVersion = null;
   try {
-    npmVersion = execSync('npm --version')
-      .toString()
-      .trim();
+    npmVersion = execSync('npm --version').toString().trim();
     hasMinNpm = semver.gte(npmVersion, '3.0.0');
   } catch (err) {
     // ignore
@@ -536,9 +515,7 @@ function checkAppName(appName) {
   const validationResult = validateProjectName(appName);
   if (!validationResult.validForNewPackages) {
     console.error(
-      `Could not create a project called ${chalk.red(
-        `"${appName}"`
-      )} because of npm naming restrictions:`
+      `Could not create a project called ${chalk.red(`"${appName}"`)} because of npm naming restrictions:`
     );
     printValidationResults(validationResult.errors);
     printValidationResults(validationResult.warnings);
@@ -550,9 +527,7 @@ function checkAppName(appName) {
   if (dependencies.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` +
+        `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(dependencies.map(depName => `  ${depName}`).join('\n')) +
@@ -574,9 +549,7 @@ function makeCaretRange(dependencies, name) {
 
   if (!semver.validRange(patchedVersion)) {
     console.error(
-      `Unable to patch ${name} dependency version because version ${chalk.red(
-        version
-      )} will become invalid ${chalk.red(patchedVersion)}`
+      `Unable to patch ${name} dependency version because version ${chalk.red(version)} will become invalid ${chalk.red(patchedVersion)}`
     );
     patchedVersion = version;
   }
@@ -675,9 +648,7 @@ function getProxy() {
   } else {
     try {
       // Trying to read https-proxy from .npmrc
-      let httpsProxy = execSync('npm config get https-proxy')
-        .toString()
-        .trim();
+      let httpsProxy = execSync('npm config get https-proxy').toString().trim();
       return httpsProxy !== 'null' ? httpsProxy : undefined;
     } catch (e) {
       return;
@@ -721,21 +692,15 @@ function checkThatNpmCanReadCwd() {
     chalk.red(
       `Could not start an npm process in the right directory.\n\n` +
         `The current directory is: ${chalk.bold(cwd)}\n` +
-        `However, a newly started npm process runs in: ${chalk.bold(
-          npmCWD
-        )}\n\n` +
+        `However, a newly started npm process runs in: ${chalk.bold(npmCWD)}\n\n` +
         `This is probably caused by a misconfigured system terminal shell.`
     )
   );
   if (process.platform === 'win32') {
     console.error(
       chalk.red(`On Windows, this can usually be fixed by running:\n\n`) +
-        `  ${chalk.cyan(
-          'reg'
-        )} delete "HKCU\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n` +
-        `  ${chalk.cyan(
-          'reg'
-        )} delete "HKLM\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n\n` +
+        `  ${chalk.cyan('reg')} delete "HKCU\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n` +
+        `  ${chalk.cyan('reg')} delete "HKLM\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n\n` +
         chalk.red(`Try to run the above two lines in the terminal.\n`) +
         chalk.red(
           `To learn more about this problem, read: https://blogs.msdn.microsoft.com/oldnewthing/20071121-00/?p=24433/`

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

@@ -168,14 +168,12 @@ module.exports = {
       {
         object: 'require',
         property: 'ensure',
-        message:
-          'Please use import() instead. More info: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting',
+        message: 'Please use import() instead. More info: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting',
       },
       {
         object: 'System',
         property: 'import',
-        message:
-          'Please use import() instead. More info: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting',
+        message: 'Please use import() instead. More info: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting',
       },
     ],
     'getter-return': 'warn',

packages/react-dev-utils/FileSizeReporter.js

@@ -42,11 +42,10 @@ function printFileSizesAfterBuild(
             ),
             name: path.basename(asset.name),
             size: size,
-            sizeLabel:
-              filesize(size) + (difference ? ' (' + difference + ')' : '')
+            sizeLabel: filesize(size) +
+              (difference ? ' (' + difference + ')' : ''),
           };
-        })
-    )
+        }))
     .reduce((single, all) => all.concat(single), []);
   assets.sort((a, b) => b.size - a.size);
   var longestSizeLabelLength = Math.max.apply(
@@ -128,12 +127,15 @@ function measureFileSizesBeforeBuild(buildFolder) {
       if (!err && fileNames) {
         sizes = fileNames
           .filter(fileName => /\.(js|css)$/.test(fileName))
-          .reduce((memo, fileName) => {
-            var contents = fs.readFileSync(fileName);
-            var key = removeFileNameHash(buildFolder, fileName);
-            memo[key] = gzipSize(contents);
-            return memo;
-          }, {});
+          .reduce(
+            (memo, fileName) => {
+              var contents = fs.readFileSync(fileName);
+              var key = removeFileNameHash(buildFolder, fileName);
+              memo[key] = gzipSize(contents);
+              return memo;
+            },
+            {}
+          );
       }
       resolve({
         root: buildFolder,

packages/react-dev-utils/ModuleScopePlugin.js

@@ -50,24 +50,13 @@ class ModuleScopePlugin {
       // Error if in a parent directory of src/
       const requestRelative = path.relative(appSrc, requestFullPath);
       if (
-        requestRelative.startsWith('../') ||
-        requestRelative.startsWith('..\\')
+        requestRelative.startsWith('../') || requestRelative.startsWith('..\\')
       ) {
         callback(
           new Error(
-            `You attempted to import ${chalk.cyan(
-              request.__innerRequest_request
-            )} which falls outside of the project ${chalk.cyan(
-              'src/'
-            )} directory. ` +
-              `Relative imports outside of ${chalk.cyan(
-                'src/'
-              )} are not supported. ` +
-              `You can either move it inside ${chalk.cyan(
-                'src/'
-              )}, or add a symlink to it from project's ${chalk.cyan(
-                'node_modules/'
-              )}.`
+            `You attempted to import ${chalk.cyan(request.__innerRequest_request)} which falls outside of the project ${chalk.cyan('src/')} directory. ` +
+              `Relative imports outside of ${chalk.cyan('src/')} are not supported. ` +
+              `You can either move it inside ${chalk.cyan('src/')}, or add a symlink to it from project's ${chalk.cyan('node_modules/')}.`
           ),
           request
         );

packages/react-dev-utils/WebpackDevServerUtils.js

@@ -35,20 +35,18 @@ if (isSmokeTest) {
 }
 
 function prepareUrls(protocol, host, port) {
-  const formatUrl = hostname =>
-    url.format({
-      protocol,
-      hostname,
-      port,
-      pathname: '/',
-    });
-  const prettyPrintUrl = hostname =>
-    url.format({
-      protocol,
-      hostname,
-      port: chalk.bold(port),
-      pathname: '/',
-    });
+  const formatUrl = hostname => url.format({
+    protocol,
+    hostname,
+    port,
+    pathname: '/',
+  });
+  const prettyPrintUrl = hostname => url.format({
+    protocol,
+    hostname,
+    port: chalk.bold(port),
+    pathname: '/',
+  });
 
   const isUnspecifiedHost = host === '0.0.0.0' || host === '::';
   let prettyHost, lanUrlForConfig, lanUrlForTerminal;
@@ -325,12 +323,10 @@ function prepareProxy(proxy, appPublicFolder) {
         // However API calls like `fetch()` won’t generally accept text/html.
         // If this heuristic doesn’t work well for you, use a custom `proxy` object.
         context: function(pathname, req) {
-          return (
-            req.method !== 'GET' ||
+          return req.method !== 'GET' ||
             (mayProxy(pathname) &&
               req.headers.accept &&
-              req.headers.accept.indexOf('text/html') === -1)
-          );
+              req.headers.accept.indexOf('text/html') === -1);
         },
         onProxyReq: proxyReq => {
           // Browers may send Origin headers even with same-origin
@@ -386,40 +382,39 @@ function prepareProxy(proxy, appPublicFolder) {
 
 function choosePort(host, defaultPort) {
   return detect(defaultPort, host).then(
-    port =>
-      new Promise(resolve => {
-        if (port === defaultPort) {
-          return resolve(port);
-        }
-        const message =
-          process.platform !== 'win32' && defaultPort < 1024 && !isRoot()
-            ? `Admin permissions are required to run a server on a port below 1024.`
-            : `Something is already running on port ${defaultPort}.`;
-        if (isInteractive) {
-          clearConsole();
-          const existingProcess = getProcessForPort(defaultPort);
-          const question = {
-            type: 'confirm',
-            name: 'shouldChangePort',
-            message:
-              chalk.yellow(
-                message +
-                  `${existingProcess ? ` Probably:\n  ${existingProcess}` : ''}`
-              ) + '\n\nWould you like to run the app on another port instead?',
-            default: true,
-          };
-          inquirer.prompt(question).then(answer => {
-            if (answer.shouldChangePort) {
-              resolve(port);
-            } else {
-              resolve(null);
-            }
-          });
-        } else {
-          console.log(chalk.red(message));
-          resolve(null);
-        }
-      }),
+    port => new Promise(resolve => {
+      if (port === defaultPort) {
+        return resolve(port);
+      }
+      const message = process.platform !== 'win32' &&
+        defaultPort < 1024 &&
+        !isRoot()
+        ? `Admin permissions are required to run a server on a port below 1024.`
+        : `Something is already running on port ${defaultPort}.`;
+      if (isInteractive) {
+        clearConsole();
+        const existingProcess = getProcessForPort(defaultPort);
+        const question = {
+          type: 'confirm',
+          name: 'shouldChangePort',
+          message: chalk.yellow(
+            message +
+              `${existingProcess ? ` Probably:\n  ${existingProcess}` : ''}`
+          ) + '\n\nWould you like to run the app on another port instead?',
+          default: true,
+        };
+        inquirer.prompt(question).then(answer => {
+          if (answer.shouldChangePort) {
+            resolve(port);
+          } else {
+            resolve(null);
+          }
+        });
+      } else {
+        console.log(chalk.red(message));
+        resolve(null);
+      }
+    }),
     err => {
       throw new Error(
         chalk.red(`Could not find an open port at ${chalk.bold(host)}.`) +