Always add a space after the function keyword

changelog_unreleased/javascript/pr-3903.md

@@ -0,0 +1,48 @@
+#### Always add a space after the `function` keyword ([#3903](https://github.com/prettier/prettier/pull/3903) by [@j-f1](https://github.com/j-f1), [@josephfrazier](https://github.com/josephfrazier), [@sosukesuzuki](https://github.com/sosukesuzuki), [@thorn0](https://github.com/thorn0))
+
+Previously, a space would be added after the `function` keyword in function declarations, but not in function expressions. Now, for consistency, a space is always added after the `function` keyword, including in generators. Also, a space is now added between `yield` and `*`, which can help with [catching bugs](https://github.com/prettier/prettier/issues/7028#user-content-bugs).
+
+<!-- prettier-ignore -->
+```js
+// Input
+const identity = function (value) {
+  return value;
+};
+function identity (value) {
+  return value;
+}
+function * getRawText() {
+  for (const token of tokens) {
+    yield* token.getRawText();
+  }
+}
+const f = function<T>(value: T) {}
+
+// Prettier stable
+const identity = function(value) {
+  return value;
+};
+function identity(value) {
+  return value;
+}
+function* getRawText() {
+  for (const token of tokens) {
+    yield* token.getRawText();
+  }
+}
+const f = function<T>(value: T) {};
+
+// Prettier master
+const identity = function (value) {
+  return value;
+};
+function identity(value) {
+  return value;
+}
+function *getRawText() {
+  for (const token of tokens) {
+    yield *token.getRawText();
+  }
+}
+const f = function <T>(value: T) {};
+```

src/language-js/printer-estree.js

@@ -917,11 +917,14 @@ function printPathNoParens(path, options, print, args) {
     case "YieldExpression":
       parts.push("yield");
 
+      if (n.delegate || n.argument) {
+        parts.push(" ");
+      }
       if (n.delegate) {
         parts.push("*");
       }
       if (n.argument) {
-        parts.push(" ", path.call(print, "argument"));
+        parts.push(path.call(print, "argument"));
       }
 
       return concat(parts);
@@ -4390,13 +4393,14 @@ function printFunctionDeclaration(path, print, options) {
     parts.push("async ");
   }
 
-  parts.push("function");
+  parts.push("function ");
 
   if (n.generator) {
     parts.push("*");
   }
+
   if (n.id) {
-    parts.push(" ", path.call(print, "id"));
+    parts.push(path.call(print, "id"));
   }
 
   parts.push(

tests/async/__snapshots__/jsfmt.spec.js.snap

@@ -18,13 +18,13 @@ class X {
 }
 
 =====================================output=====================================
-async function* a() {
-  yield* b();
+async function *a() {
+  yield *b();
 }
 
 class X {
   async *b() {
-    yield* a();
+    yield *a();
   }
 }
 
@@ -61,7 +61,7 @@ async function f1() {
 async function g() {
   invariant((await driver.navigator.getUrl()).substr(-7));
 }
-function* f2() {
+function *f2() {
   !(yield a);
 }
 async function f3() {
@@ -101,7 +101,7 @@ async function f() {
   const result = typeof fn === "function" ? await fn() : null;
 }
 
-(async function() {
+(async function () {
   console.log(await (true ? Promise.resolve("A") : Promise.resolve("B")));
 })();
 
@@ -148,7 +148,7 @@ async function *f(){ await (yield x); }
 async function f2(){ await (() => {}); }
 
 =====================================output=====================================
-async function* f() {
+async function *f() {
   await (yield x);
 }
 

tests/class_extends/__snapshots__/jsfmt.spec.js.snap

@@ -89,7 +89,7 @@ class a5 extends class {} {}
 class a6 extends (b ? c : d) {}
 
 // "FunctionExpression"
-class a7 extends function() {} {}
+class a7 extends function () {} {}
 
 // "LogicalExpression"
 class a8 extends (b || c) {}
@@ -116,7 +116,7 @@ class a14 extends (void b) {}
 class a15 extends (++b) {}
 
 // "YieldExpression"
-function* f2() {
+function *f2() {
   // Flow has a bug parsing it.
   // class a extends (yield 1) {}
 }

tests/comments/__snapshots__/jsfmt.spec.js.snap

@@ -2802,7 +2802,7 @@ f3 = (
   // TODO this is a very very very very long comment that makes it go > 80 columns
 ) => {};
 
-f4 = function(
+f4 = function (
   currentRequest: { a: number }
   // TODO this is a very very very very long comment that makes it go > 80 columns
 ) {};
@@ -2995,7 +2995,7 @@ f3 = (
   // TODO this is a very very very very long comment that makes it go > 80 columns
 ) => {}
 
-f4 = function(
+f4 = function (
   currentRequest: { a: number }
   // TODO this is a very very very very long comment that makes it go > 80 columns
 ) {}

tests/conditional/__snapshots__/jsfmt.spec.js.snap

@@ -48,22 +48,22 @@ const { configureStore } = process.env.NODE_ENV === "production"
 var inspect =
   4 === util.inspect.length
     ? // node <= 0.8.x
-      function(v, colors) {
+      function (v, colors) {
         return util.inspect(v, void 0, void 0, colors);
       }
     : // node > 0.8.x
-      function(v, colors) {
+      function (v, colors) {
         return util.inspect(v, { colors: colors });
       };
 
 var inspect =
   4 === util.inspect.length
     ? // node <= 0.8.x
-      function(v, colors) {
+      function (v, colors) {
         return util.inspect(v, void 0, void 0, colors);
       }
     : // node > 0.8.x
-      function(v, colors) {
+      function (v, colors) {
         return util.inspect(v, { colors: colors });
       };
 

tests/cursor/__snapshots__/jsfmt.spec.js.snap

@@ -86,7 +86,7 @@ printWidth: 80
 (function() {return        <|> 15})()
 
 =====================================output=====================================
-(function() {
+(function () {
   return <|>15;
 })();
 
@@ -102,7 +102,7 @@ printWidth: 80
 (function(){return        <|>15})()
 
 =====================================output=====================================
-(function() {
+(function () {
   return <|>15;
 })();
 

tests/destructuring/__snapshots__/jsfmt.spec.js.snap

@@ -70,7 +70,7 @@ const {
 
 function f({ data: { name } }) {}
 
-const UserComponent = function({
+const UserComponent = function ({
   name: { first, last },
   organisation: {
     address: { street: orgStreetAddress, postcode: orgPostcode },

tests/empty_paren_comment/__snapshots__/jsfmt.spec.js.snap

@@ -62,13 +62,13 @@ let f4 = () => doThing(a, /* ... */ b);
 
 =====================================output=====================================
 let f1 = (/* ... */) => {};
-(function(/* ... */) {})(/* ... */);
+(function (/* ... */) {})(/* ... */);
 function f2(/* ... */) {}
 
 const obj = {
   f(/* ... */) {},
   f: (/* ... */) => {},
-  f: function(/* ... */) {},
+  f: function (/* ... */) {},
   f: function f(/* ... */) {},
 };
 
@@ -78,7 +78,7 @@ class Foo {
   f = (/* ... */) => {};
   static f(/* ... */) {}
   static f = (/* ... */) => {};
-  static f = function(/* ... */) {};
+  static f = function (/* ... */) {};
   static f = function f(/* ... */) {};
 }
 

tests/es6modules/__snapshots__/jsfmt.spec.js.snap

@@ -65,7 +65,7 @@ printWidth: 80
 export default function() {}
 
 =====================================output=====================================
-export default function() {}
+export default function () {}
 
 ================================================================================
 `;
@@ -107,7 +107,7 @@ printWidth: 80
 export default (function() {});
 
 =====================================output=====================================
-export default (function() {});
+export default (function () {});
 
 ================================================================================
 `;

tests/export_default/__snapshots__/jsfmt.spec.js.snap

@@ -9,7 +9,7 @@ printWidth: 80
 export default (function() {} + foo)\`\`;
 
 =====================================output=====================================
-export default (function() {} + foo)\`\`;
+export default (function () {} + foo)\`\`;
 
 ================================================================================
 `;
@@ -65,7 +65,7 @@ printWidth: 80
 export default (function() {}).toString();
 
 =====================================output=====================================
-export default (function() {}.toString());
+export default (function () {}.toString());
 
 ================================================================================
 `;

tests/first_argument_expansion/__snapshots__/jsfmt.spec.js.snap

@@ -121,19 +121,19 @@ func((args) => {
 }, result => result && console.log("success"))
 
 =====================================output=====================================
-setTimeout(function() {
+setTimeout(function () {
   thing();
 }, 500);
 
-["a", "b", "c"].reduce(function(item, thing) {
+["a", "b", "c"].reduce(function (item, thing) {
   return thing + " " + item;
 }, "letters:");
 
 func(() => {
   thing();
 }, identifier);
 
-func(function() {
+func(function () {
   thing();
 }, this.props.timeout * 1000);
 
@@ -165,7 +165,7 @@ func(
 );
 
 func(
-  function() {
+  function () {
     return thing();
   },
   1 ? 2 : 3
@@ -208,11 +208,11 @@ compose(
   b => b * b
 );
 
-somthing.reduce(function(item, thing) {
+somthing.reduce(function (item, thing) {
   return (thing.blah = item);
 }, {});
 
-somthing.reduce(function(item, thing) {
+somthing.reduce(function (item, thing) {
   return thing.push(item);
 }, []);
 
@@ -226,7 +226,7 @@ reallyLongLongLongLongLongLongLongLongLongLongLongLongLongLongMethod(
 // Don't do the rest of these
 
 func(
-  function() {
+  function () {
     thing();
   },
   true,
@@ -263,14 +263,14 @@ renderThing(
 
 setTimeout(
   // Something
-  function() {
+  function () {
     thing();
   },
   500
 );
 
 setTimeout(
-  /* blip */ function() {
+  /* blip */ function () {
     thing();
   },
   500

tests/flow/annot/__snapshots__/jsfmt.spec.js.snap

@@ -73,7 +73,7 @@ function foo(str: string, i: number): string {
 }
 var bar: (str: number, i: number) => string = foo;
 
-var qux = function(str: string, i: number): number {
+var qux = function (str: string, i: number): number {
   return foo(str, i);
 };
 
@@ -334,7 +334,7 @@ function insertMany<K, V>(
 
 class Foo<A> {
   bar<B>() {
-    return function<C>(a: A, b: B, c: C): void {
+    return function <C>(a: A, b: B, c: C): void {
       ([a, b, c]: [A, B, C]);
     };
   }