Add ESLint and Prettier Configs #26 (#27)

1. ESLint added with the recommended settings, https://react.dev/learn/editor-setup#your-editor
2. Some basic VS Code settings, non-platform specific
3. Apply recommended changes from ESLint to `App.tsx`
4. README update on contributing code changes, PR checklist

.editorconfig

@@ -0,0 +1,10 @@
+# See https://editorconfig.org/ and https://prettier.io/docs/en/configuration#editorconfig
+
+root = true
+
+[*]
+charset = utf-8
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+max_line_length = 120

.github/workflows/deploy-static-main.yml

@@ -63,6 +63,10 @@ jobs:
           node-version: 20.x
       - name: Install Dependencies
         run: cd OwnTube.tv/ && npm install
+      - name: Check ESLint Code Style
+        run: cd OwnTube.tv/ && npx eslint .
+      - name: Check Prettier Formatting
+        run: cd OwnTube.tv/ && npx prettier --check ../
       - name: Inject Build Info
         run: |
           # Overwrite build-info.json in source root dir
@@ -82,7 +86,7 @@ jobs:
         uses: actions/upload-pages-artifact@v3
         with:
           # Upload Expo build output
-          path: './OwnTube.tv/dist/'
+          path: "./OwnTube.tv/dist/"
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode", "msjsdiag.vscode-react-native"]
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "terminal.integrated.cwd": "OwnTube.tv/",
+  "editor.renderWhitespace": "all",
+  "editor.formatOnSave": true,
+  "editor.trimAutoWhitespace": true,
+  "editor.tabSize": 2,
+  "editor.detectIndentation": false
+}

OwnTube.tv/.eslintrc.json

@@ -0,0 +1,26 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-native/all"
+  ],
+  "ignorePatterns": ["babel.config.js", "dist/"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "react", "react-native"],
+  "rules": {},
+  "settings": {
+    "react": {
+      "version": "18"
+    }
+  }
+}

OwnTube.tv/.prettierignore

@@ -0,0 +1,2 @@
+**/.expo/*
+**/dist/*

OwnTube.tv/App.tsx

@@ -1,24 +1,35 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, Text, View } from "react-native";
 
-import build_info from './build-info.json';
+import build_info from "./build-info.json";
 
 export default function App() {
   return (
     <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app, current deployed revision is <a href={build_info.COMMIT_URL} target="_blank">{build_info.GITHUB_SHA_SHORT}</a> built at {build_info.BUILD_TIMESTAMP}.</Text>
+      <Text>
+        Open up App.tsx to start working on your app, current deployed revision is{" "}
+        <a href={build_info.COMMIT_URL} target="_blank" rel="noreferrer">
+          {build_info.GITHUB_SHA_SHORT}
+        </a>{" "}
+        built at {build_info.BUILD_TIMESTAMP}.
+      </Text>
       <hr></hr>
-      <Text>(Your friendly <a href={"https://github.com/" + build_info.GITHUB_ACTOR} target="_blank"><code>{build_info.GITHUB_ACTOR}</code></a> 🙋‍♀️ was here!)</Text>
+      <Text>
+        (Your friendly{" "}
+        <a href={"https://github.com/" + build_info.GITHUB_ACTOR} target="_blank" rel="noreferrer">
+          <code>{build_info.GITHUB_ACTOR}</code>
+        </a>{" "}
+        🙋‍♀️ was here!)
+      </Text>
       <StatusBar style="auto" />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
+    alignItems: "center",
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: "center",
   },
 });

OwnTube.tv/app.json

@@ -11,9 +11,7 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "experiments": {
       "baseUrl": "/web-client"
     },

OwnTube.tv/babel.config.js

@@ -1,6 +1,6 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
   };
 };