Lint/Format all the snack examples (#3422)

* Lint/Format all the examples

This adds a script which can run ESLint on each Snack example in Markdown. This is wired to the default RN ESLint configuration, and a Prettier configuration to limit to 70 lines to prevent wrapping. Apart from snforcing consistency, it means copy/pasting examples into a new RN project will not create formatting errors.

Not all examples are clean of lint errors/warnings so this is not enforced yet. The script is also currently very slow. But it's a good start, and we can later apply something similar to `tsc`.

* Remove package-local gitignore

* Remove deps

* Fix for Windows

* let lint:examples lint the example code

.gitignore

@@ -8,3 +8,5 @@ website/build/
 
 sync-api-docs/generatedComponentApiDocs.js
 sync-api-docs/extracted.json
+
+scripts/lint-examples/out/

docs/accessibilityinfo.md

@@ -13,37 +13,33 @@ Sometimes it's useful to know whether or not the device has a screen reader that
 <TabItem value="functional">
 
 ```SnackPlayer name=AccessibilityInfo%20Function%20Component%20Example&supportedPlatforms=android,ios
-import React, { useState, useEffect } from "react";
-import { AccessibilityInfo, View, Text, StyleSheet } from "react-native";
+import React, {useState, useEffect} from 'react';
+import {AccessibilityInfo, View, Text, StyleSheet} from 'react-native';
 
 const App = () => {
   const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
   const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
 
   useEffect(() => {
     const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
-      "reduceMotionChanged",
+      'reduceMotionChanged',
       reduceMotionEnabled => {
         setReduceMotionEnabled(reduceMotionEnabled);
-      }
+      },
     );
     const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
-      "screenReaderChanged",
+      'screenReaderChanged',
       screenReaderEnabled => {
         setScreenReaderEnabled(screenReaderEnabled);
-      }
+      },
     );
 
-    AccessibilityInfo.isReduceMotionEnabled().then(
-      reduceMotionEnabled => {
-        setReduceMotionEnabled(reduceMotionEnabled);
-      }
-    );
-    AccessibilityInfo.isScreenReaderEnabled().then(
-      screenReaderEnabled => {
-        setScreenReaderEnabled(screenReaderEnabled);
-      }
-    );
+    AccessibilityInfo.isReduceMotionEnabled().then(reduceMotionEnabled => {
+      setReduceMotionEnabled(reduceMotionEnabled);
+    });
+    AccessibilityInfo.isScreenReaderEnabled().then(screenReaderEnabled => {
+      setScreenReaderEnabled(screenReaderEnabled);
+    });
 
     return () => {
       reduceMotionChangedSubscription.remove();
@@ -54,24 +50,24 @@ const App = () => {
   return (
     <View style={styles.container}>
       <Text style={styles.status}>
-        The reduce motion is {reduceMotionEnabled ? "enabled" : "disabled"}.
+        The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
       </Text>
       <Text style={styles.status}>
-        The screen reader is {screenReaderEnabled ? "enabled" : "disabled"}.
+        The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
       </Text>
     </View>
   );
-}
+};
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: "center",
-    justifyContent: "center"
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   status: {
-    margin: 30
-  }
+    margin: 30,
+  },
 });
 
 export default App;
@@ -81,8 +77,8 @@ export default App;
 <TabItem value="classical">
 
 ```SnackPlayer name=AccessibilityInfo%20Class%20Component%20Example&supportedPlatforms=android,ios
-import React, { Component } from 'react';
-import { AccessibilityInfo, View, Text, StyleSheet } from 'react-native';
+import React, {Component} from 'react';
+import {AccessibilityInfo, View, Text, StyleSheet} from 'react-native';
 
 class AccessibilityStatusExample extends Component {
   state = {
@@ -94,21 +90,21 @@ class AccessibilityStatusExample extends Component {
     this.reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
       'reduceMotionChanged',
       reduceMotionEnabled => {
-        this.setState({ reduceMotionEnabled });
-      }
+        this.setState({reduceMotionEnabled});
+      },
     );
     this.screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
       'screenReaderChanged',
       screenReaderEnabled => {
-        this.setState({ screenReaderEnabled });
-      }
+        this.setState({screenReaderEnabled});
+      },
     );
 
     AccessibilityInfo.isReduceMotionEnabled().then(reduceMotionEnabled => {
-      this.setState({ reduceMotionEnabled });
+      this.setState({reduceMotionEnabled});
     });
     AccessibilityInfo.isScreenReaderEnabled().then(screenReaderEnabled => {
-      this.setState({ screenReaderEnabled });
+      this.setState({screenReaderEnabled});
     });
   }
 

docs/actionsheetios.md

@@ -8,29 +8,29 @@ Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-i
 ## Example
 
 ```SnackPlayer name=ActionSheetIOS&supportedPlatforms=ios
-import React, { useState } from "react";
-import { ActionSheetIOS, Button, StyleSheet, Text, View } from "react-native";
+import React, {useState} from 'react';
+import {ActionSheetIOS, Button, StyleSheet, Text, View} from 'react-native';
 
 const App = () => {
-  const [result, setResult] = useState("🔮");
+  const [result, setResult] = useState('🔮');
 
   const onPress = () =>
     ActionSheetIOS.showActionSheetWithOptions(
       {
-        options: ["Cancel", "Generate number", "Reset"],
+        options: ['Cancel', 'Generate number', 'Reset'],
         destructiveButtonIndex: 2,
         cancelButtonIndex: 0,
-        userInterfaceStyle: 'dark'
+        userInterfaceStyle: 'dark',
       },
       buttonIndex => {
         if (buttonIndex === 0) {
           // cancel action
         } else if (buttonIndex === 1) {
           setResult(Math.floor(Math.random() * 100) + 1);
         } else if (buttonIndex === 2) {
-          setResult("🔮");
+          setResult('🔮');
         }
-      }
+      },
     );
 
   return (
@@ -44,12 +44,12 @@ const App = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: "center"
+    justifyContent: 'center',
   },
   result: {
     fontSize: 64,
-    textAlign: "center"
-  }
+    textAlign: 'center',
+  },
 });
 
 export default App;

docs/activityindicator.md

@@ -13,8 +13,8 @@ Displays a circular loading indicator.
 <TabItem value="functional">
 
 ```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example
-import React from "react";
-import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+import React from 'react';
+import {ActivityIndicator, StyleSheet, Text, View} from 'react-native';
 
 const App = () => (
   <View style={[styles.container, styles.horizontal]}>
@@ -28,13 +28,13 @@ const App = () => (
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: "center"
+    justifyContent: 'center',
   },
   horizontal: {
-    flexDirection: "row",
-    justifyContent: "space-around",
-    padding: 10
-  }
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    padding: 10,
+  },
 });
 
 export default App;
@@ -44,8 +44,8 @@ export default App;
 <TabItem value="classical">
 
 ```SnackPlayer name=ActivityIndicator%20Class%20Component%20Example
-import React, { Component } from "react";
-import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+import React, {Component} from 'react';
+import {ActivityIndicator, StyleSheet, Text, View} from 'react-native';
 
 class App extends Component {
   render() {
@@ -63,13 +63,13 @@ class App extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: "center"
+    justifyContent: 'center',
   },
   horizontal: {
-    flexDirection: "row",
-    justifyContent: "space-around",
-    padding: 10
-  }
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    padding: 10,
+  },
 });
 
 export default App;