Update lint-related dependencies and configuration (#2761)

* Remove unnecessary babel deps
* arrow-functions and shorthand-properties are brought in by
  babel-preset-expo
* template-literals is only brought in by babel/preset-env, which
  babel-preset-expo doesn't use, but for now we do
* Configure expo default prettier
* Set up eslintignore
Should primarily use eslintignore, but prettierignore is useful if
running prettier w/o eslint
* Rework package.json commands
Eslint is running prettier now, so just pass that to "--fix". It's a
little weird that "lint" was running format, up for discussion about
what each should do.
* Update config files to match lint rules

Was ignored by linting before.

Ignoring files may be useful if they are part of a template, and we
never plan to customize the file; but if we do, linters may be useful
for catching bugs.
* Disable included array type rule

We weren't using it previously. Causes errors like this:

/Users/lizzi/dev/igniteTests/DepsFixing/app/utils/useSafeAreaInsetsStyle.ts
  21:17  warning  Array type using 'Array<ExtendedEdge>' is forbidden. Use 'ExtendedEdge[]' instead  @typescript-es
lint/array-type
  21:39  warning  Array type using 'Array<ExtendedEdge>' is forbidden. Use 'ExtendedEdge[]' instead  @typescript-es
lint/array-type
  35:17  warning  Array type using 'Array<ExtendedEdge>' is forbidden. Use 'ExtendedEdge[]' instead  @typescript-es
lint/array-type
* Format files according to prettier
These files were previously excluded, but I don't see why they should be
* Fix rules of hooks issues
* useRef for Animated.Value
useRef is more appropriate when we have an Animated.Value and don't want
components/hooks to react to state, and avoids exhaustive-deps issue
* exhaustive-deps fixes
* Importing React is no longer required for TSX/JSX
* Re-add previous lint config
One new addition: use quotes consistently in objects where at least one
key requires quotes.
* Format code after markup removal
* Fix inconsistent indentation in messages
* Add restricted imports rule to ensure consistent importing of React API
* Update cli prettier to match boilerplate
* Update typescript and typescript eslint tree... then leads to updating more eslint
* Match quoteProps configuration of boilerplate
* typescript-estree requires later version of node
update to LTS on CI
* Use consistent spacing on new command
* Re-add react-native linter, PR feedback

Author: lindboe

.circleci/config.yml

@@ -6,7 +6,7 @@
 defaults: &defaults
   docker:
     # Choose the version of Node you want here
-    - image: cimg/node:18.17.1
+    - image: cimg/node:20.17.0
   working_directory: /mnt/ramdisk/repo
 
 version: 2.1

boilerplate/.eslintignore

@@ -0,0 +1,8 @@
+node_modules
+ios
+android
+.expo
+.vscode
+ignite/ignite.json
+package.json
+.eslintignore

boilerplate/.eslintrc.js

@@ -0,0 +1,54 @@
+// https://docs.expo.dev/guides/using-eslint/
+module.exports = {
+  extends: [
+    "standard",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-native/all",
+    // `expo` must come after `standard` or its globals configuration will be overridden
+    "expo",
+    // `jsx-runtime` must come after `expo` or it will be overridden
+    "plugin:react/jsx-runtime",
+    "prettier",
+  ],
+  plugins: ["reactotron", "prettier"],
+  rules: {
+    "prettier/prettier": "error",
+    // typescript-eslint
+    "@typescript-eslint/array-type": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+      },
+    ],
+    "@typescript-eslint/no-var-requires": 0,
+    // eslint
+    "no-use-before-define": 0,
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: [
+          // Prefer named exports from 'react' instead of importing `React`
+          {
+            name: "react",
+            importNames: ["default"],
+            message: "Import named exports from 'react' instead.",
+          },
+        ],
+      },
+    ],
+    //react-native
+    "react-native/no-raw-text": 0,
+    // reactotron
+    "reactotron/no-tron-in-production": "error",
+    // eslint-config-standard overrides
+    "comma-dangle": 0,
+    "no-global-assign": 0,
+    "quotes": 0,
+    "space-before-function-paren": 0,
+  },
+}

boilerplate/.prettierignore

@@ -1,6 +1,8 @@
 node_modules
 ios
 android
+.expo
 .vscode
 ignite/ignite.json
 package.json
+.eslintignore

boilerplate/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "quoteProps": "consistent"
+}

boilerplate/App.tsx

@@ -1,5 +1,4 @@
 import "@expo/metro-runtime"
-import React from "react"
 import * as SplashScreen from "expo-splash-screen"
 import App from "./app/app"
 

boilerplate/app.config.ts

@@ -8,7 +8,7 @@ require("ts-node/register")
 
 /**
  * @param config ExpoConfig coming from the static config app.json if it exists
- * 
+ *
  * You can read more about Expo's Configuration Resolution Rules here:
  * https://docs.expo.dev/workflow/configuration/#configuration-resolution-rules
  */
@@ -17,9 +17,6 @@ module.exports = ({ config }: ConfigContext): Partial<ExpoConfig> => {
 
   return {
     ...config,
-    plugins: [
-      ...existingPlugins,
-      require("./plugins/withSplashScreen").withSplashScreen,
-    ],
+    plugins: [...existingPlugins, require("./plugins/withSplashScreen").withSplashScreen],
   }
 }

boilerplate/app/app.tsx

@@ -20,7 +20,6 @@ import "./utils/gestureHandler"
 import "./i18n"
 import "./utils/ignoreWarnings"
 import { useFonts } from "expo-font"
-import React from "react"
 import { initialWindowMetrics, SafeAreaProvider } from "react-native-safe-area-context"
 import * as Linking from "expo-linking"
 import { useInitialRootStore } from "./models" // @mst remove-current-line

boilerplate/app/components/AutoImage.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useState } from "react"
+import { useLayoutEffect, useState } from "react"
 import { Image, ImageProps, ImageURISource, Platform } from "react-native"
 
 export interface AutoImageProps extends ImageProps {

boilerplate/app/components/Button.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType } from "react"
+import { ComponentType } from "react"
 import {
   Pressable,
   PressableProps,