Unify Prettier config and enforce Prettier in GitHub CI

.github/workflows/ci.yml

@@ -61,6 +61,8 @@ jobs:
         run: yarn run test-dependencies
       - name: Lint
         run: yarn run lint
+      - name: Prettier
+        run: yarn run prettier-check
 
   typecheck:
     name: Flow Typecheck

flow-typed/react.js

@@ -122,7 +122,7 @@ declare module react {
 
   declare export function useState<S>(
     initialState: (() => S) | S,
-  ): [S, (((S) => S) | S) => void];
+  ): [S, ((S => S) | S) => void];
 
   declare type Dispatch<A> = (A) => void;
 

gulpfile.js

@@ -215,7 +215,7 @@ const builds = [
 
 const modules = gulp.parallel(
   ...builds.map(
-    (build) =>
+    build =>
       function modulesTask() {
         return gulp
           .src(INCLUDE_GLOBS, {
@@ -229,7 +229,7 @@ const modules = gulp.parallel(
 
 const flowDefs = gulp.parallel(
   ...builds.map(
-    (build) =>
+    build =>
       function modulesTask() {
         return gulp
           .src(['**/*.js', '!**/__tests__/**/*.js', '!**/__mocks__/**/*.js'], {
@@ -242,7 +242,7 @@ const flowDefs = gulp.parallel(
 );
 
 const copyFilesTasks = [];
-builds.forEach((build) => {
+builds.forEach(build => {
   copyFilesTasks.push(
     function copyLicense() {
       return gulp
@@ -280,9 +280,9 @@ const exportsFiles = gulp.series(
   modules,
   gulp.parallel(
     ...builds.map(
-      (build) =>
+      build =>
         function exportsFilesTask(done) {
-          Object.keys(build.exports).map((exportName) =>
+          Object.keys(build.exports).map(exportName =>
             fs.writeFileSync(
               path.join(DIST, build.package, exportName + '.js'),
               PRODUCTION_HEADER +
@@ -296,8 +296,8 @@ const exportsFiles = gulp.series(
 );
 
 const bundlesTasks = [];
-builds.forEach((build) => {
-  build.bundles.forEach((bundle) => {
+builds.forEach(build => {
+  build.bundles.forEach(bundle => {
     bundlesTasks.push(function bundleTask() {
       return gulp
         .src(path.join(DIST, build.package, 'lib', bundle.entry))
@@ -312,8 +312,8 @@ builds.forEach((build) => {
 const bundles = gulp.series(bundlesTasks);
 
 const bundlesMinTasks = [];
-builds.forEach((build) => {
-  build.bundles.forEach((bundle) => {
+builds.forEach(build => {
+  build.bundles.forEach(bundle => {
     bundlesMinTasks.push(function bundlesMinTask() {
       return gulp
         .src(path.join(DIST, build.package, 'lib', bundle.entry))
@@ -377,9 +377,9 @@ const setMainVersion = async () => {
   if (!RELEASE_COMMIT_SHA) {
     throw new Error('Expected the RELEASE_COMMIT_SHA env variable to be set.');
   }
-  const packages = builds.map((build) => build.package);
+  const packages = builds.map(build => build.package);
   packages.push('relay-compiler');
-  packages.forEach((pkg) => {
+  packages.forEach(pkg => {
     const pkgJsonPath = path.join('.', 'dist', pkg, 'package.json');
     const packageJson = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf8'));
     packageJson.version = VERSION;

package.json

@@ -15,6 +15,7 @@
     "postinstall": "npm run build",
     "prepublishOnly": "npm run build:clean",
     "prettier": "find . -name node_modules -prune -or -name dist -prune -or -name '*.js' -print | xargs prettier --write",
+    "prettier-check": "find . -name node_modules -prune -or -name dist -prune -or -name '*.js' -print | xargs prettier --check",
     "test": "f() { EXIT=0; npm run typecheck || EXIT=$?; npm run test-dependencies || EXIT=$?; npm run jest \"$@\" || EXIT=$?; exit $EXIT; }; f",
     "test-dependencies": "node ./scripts/testDependencies.js",
     "typecheck": "flow check"
@@ -76,12 +77,13 @@
     "npm": ">=2.x"
   },
   "prettier": {
+    "arrowParens": "avoid",
     "bracketSameLine": true,
     "bracketSpacing": false,
-    "parser": "flow",
     "requirePragma": true,
     "singleQuote": true,
-    "trailingComma": "all"
+    "trailingComma": "all",
+    "parser": "flow"
   },
   "jest": {
     "testRegex": "/__tests__/.*-test\\.js$",

scripts/testDependencies.js

@@ -20,12 +20,12 @@ if (module.parent) {
   const packagesRoot = path.join(topLevelPackagePath, 'packages');
   const packagePaths = fs
     .readdirSync(packagesRoot)
-    .map((filepath) => path.join(packagesRoot, filepath))
-    .filter((filepath) => fs.statSync(filepath).isDirectory());
+    .map(filepath => path.join(packagesRoot, filepath))
+    .filter(filepath => fs.statSync(filepath).isDirectory());
 
   const errors = testDependencies(topLevelPackagePath, packagePaths);
   if (errors.length !== 0) {
-    errors.forEach((error) => console.error(error));
+    errors.forEach(error => console.error(error));
     process.exit(1);
   }
 }

vscode-extension/package.json

@@ -134,10 +134,13 @@
     }
   },
   "prettier": {
+    "arrowParens": "avoid",
     "bracketSameLine": true,
-    "bracketSpacing": true,
+    "bracketSpacing": false,
+    "requirePragma": true,
     "singleQuote": true,
-    "trailingComma": "all"
+    "trailingComma": "all",
+    "parser": "flow"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

website/docusaurus.config.js

@@ -224,8 +224,7 @@ module.exports = {
             external: [
               'current',
               ...versions.filter(
-                (version) =>
-                  version !== 'experimental' && version !== 'classic',
+                version => version !== 'experimental' && version !== 'classic',
               ),
             ],
           }),

website/package.json

@@ -40,5 +40,14 @@
     "highlight.js": "^10.4.1",
     "shelljs": "^0.8.5",
     "ansi-html": "0.0.8"
+  },
+  "prettier": {
+    "arrowParens": "avoid",
+    "bracketSameLine": true,
+    "bracketSpacing": false,
+    "requirePragma": true,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "parser": "flow"
   }
 }

website/src/compiler-explorer/Editor.js

@@ -69,7 +69,7 @@ export default function Editor({text, onDidChange, diagnostics, style}) {
       return;
     }
 
-    const markers = (diagnostics ?? []).map((diagnostic) => {
+    const markers = (diagnostics ?? []).map(diagnostic => {
       return {
         severity: 8, // Error
         message: diagnostic.message,

website/src/compiler-explorer/ExplorerState.js

@@ -30,14 +30,14 @@ export function useExplorerState() {
 
   const actionHandlers = useMemo(() => {
     return {
-      setSchemaText: (schemaText) =>
+      setSchemaText: schemaText =>
         dispatch({type: 'UPDATE_SCHEMA', schemaText}),
-      setDocumentText: (documentText) =>
+      setDocumentText: documentText =>
         dispatch({type: 'UPDATE_DOCUMENT', documentText}),
       setFeatureFlag: (flag, value) =>
         dispatch({type: 'SET_FEATURE_FLAG', flag, value}),
-      setLanguage: (language) => dispatch({type: 'SET_LANGUAGE', language}),
-      setOutputType: (outputType) =>
+      setLanguage: language => dispatch({type: 'SET_LANGUAGE', language}),
+      setOutputType: outputType =>
         dispatch({type: 'SET_OUTPUT_TYPE', outputType}),
     };
   }, []);

website/src/compiler-explorer/ExplorerStateConstants.js

@@ -79,8 +79,6 @@ export const DEFAULT_STATE = {
   schemaText: DEFAULT_SCHEMA,
   documentText: DEFAULT_DOCUMENT,
   outputType: 'operation',
-  featureFlags: Object.fromEntries(
-    FEATURE_FLAGS.map((f) => [f.key, f.default]),
-  ),
+  featureFlags: Object.fromEntries(FEATURE_FLAGS.map(f => [f.key, f.default])),
   language: 'typescript',
 };

website/src/core/Container.js

@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import * as React from 'react';
 /* eslint-enable lint/no-value-import */
 
-const Container = (props) => {
+const Container = props => {
   const containerClasses = classNames('container', props.className, {
     darkBackground: props.background === 'dark',
     highlightBackground: props.background === 'highlight',

website/src/core/DocsRating/index.js

@@ -51,7 +51,7 @@ function Wrapper({children}) {
 
 const FeedbackButtons = () => {
   const [hasProvidedFeedback, setHasProvidedFeedback] = React.useState(false);
-  const provideFeedback = (value) => {
+  const provideFeedback = value => {
     setHasProvidedFeedback(true);
     provideFeedbackToGoogleAnalytics(value);
   };

website/src/pages/compiler-explorer.js

@@ -97,7 +97,7 @@ function CompilerExplorer() {
               {value: 'types', label: 'Types'},
             ]}
             selectedValue={state.outputType}
-            setSelectedValue={(selected) => setOutputType(selected)}
+            setSelectedValue={selected => setOutputType(selected)}
           />
         </div>
       </div>
@@ -148,7 +148,7 @@ function Config({featureFlags, setFeatureFlag}) {
             <input
               type="checkbox"
               checked={featureFlags[key]}
-              onChange={(e) => setFeatureFlag(key, e.target.checked)}
+              onChange={e => setFeatureFlag(key, e.target.checked)}
             />
             {label}
           </label>
@@ -163,7 +163,7 @@ function TypegenConfig({setLanguage, language}) {
     <div>
       <label>
         Type Generation Language:
-        <select onChange={(e) => setLanguage(e.target.value)} value={language}>
+        <select onChange={e => setLanguage(e.target.value)} value={language}>
           <option value="flow">Flow</option>
           <option value="typescript">TypeScript</option>
         </select>

website/src/pages/help.js

@@ -76,7 +76,7 @@ class Help extends React.Component {
   }
 }
 
-export default (props) => (
+export default props => (
   <Layout>
     <Help {...props} />
   </Layout>

website/src/pages/index.js

@@ -102,7 +102,7 @@ const Index = () => {
   const {isDarkTheme} = useThemeContext();
 
   const showcase = siteConfig.customFields.users
-    .filter((user) => {
+    .filter(user => {
       return user.pinned;
     })
     .map((user, i) => {
@@ -633,7 +633,7 @@ export default function ArtistCard(props) {
   );
 };
 
-export default (props) => (
+export default props => (
   <Layout>
     <Index {...props} />
   </Layout>

website/src/pages/users.js

@@ -16,7 +16,7 @@ import * as React from 'react';
 
 const Users = () => {
   const {siteConfig} = useDocusaurusContext();
-  const showcase = siteConfig.customFields.users.map((user) => {
+  const showcase = siteConfig.customFields.users.map(user => {
     return (
       <a href={user.infoLink} key={user.caption}>
         <img src={user.image} title={user.caption} />
@@ -43,7 +43,7 @@ const Users = () => {
   );
 };
 
-export default (props) => (
+export default props => (
   <Layout>
     <Users {...props} />
   </Layout>

website/src/pages/versions.js

@@ -19,9 +19,9 @@ function Version() {
   const {siteConfig} = useDocusaurusContext();
   const versions = useVersions();
   const latestVersion = useLatestVersion();
-  const currentVersion = versions.find((version) => version.name === 'current');
+  const currentVersion = versions.find(version => version.name === 'current');
   const pastVersions = versions.filter(
-    (version) =>
+    version =>
       version !== latestVersion.name && version !== currentVersion.name,
   );
   const repoUrl = `https://github.com/${siteConfig.organizationName}/${siteConfig.projectName}`;
@@ -85,7 +85,7 @@ function Version() {
             </p>
             <table>
               <tbody>
-                {pastVersions.map((version) => (
+                {pastVersions.map(version => (
                   <tr key={version.name}>
                     <th>{version.label}</th>
                     <td>