Set up tooling: prettier, knip, eslint, GitHub Actions (#22)

* install knip

* set up knip

* prepare for prettier

* more prettier config

* format with prettier

* format on save

* set up / pass eslint

* try to enable recommendedTypeChecked

* lint tsx files, too

* eslint strictTypeCheck

* enable some stylistic rules

* workflow

.prettierignore

@@ -0,0 +1,16 @@
+# Ignore artifacts:
+build
+coverage
+bundle
+static
+id4-to-location
+by-location
+dist
+data.json
+rotated-assets
+*.html
+popular.json
+styles/octicons
+timestamps.json
+# this one is generated
+src/popular-photos.js

.vscode/settings.json

@@ -1,3 +1,9 @@
 {
-    "typescript.tsdk": "node_modules/typescript/lib"
-}
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[typescript]": {
+    "editor.formatOnSave": true
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": true
+  }
+}

eslint.config.mjs

@@ -0,0 +1,42 @@
+// @ts-check
+
+import tsPlugin from '@typescript-eslint/eslint-plugin';
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  eslint.configs.recommended,
+
+  // See https://stackoverflow.com/a/64488474/388951
+  ...tseslint.configs.recommendedTypeChecked.map((config) => ({
+    ...config,
+    files: ['src/**/*.{ts,tsx}'], // We use TS config only for TS files
+  })),
+  ...tseslint.configs.stylisticTypeChecked.map((config) => ({
+    ...config,
+    files: ['src/**/*.{ts,tsx}'], // We use TS config only for TS files
+  })),
+  {
+    files: ['src/**/*.{ts,tsx}'],
+
+    // This is required, see the docs
+    languageOptions: {
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: import.meta.dirname
+      },
+    },
+
+    // This is needed in order to specify the desired behavior for its rules
+    plugins: {
+      '@typescript-eslint': tsPlugin,
+    },
+
+    // After defining the plugin, you can use the rules like this
+    rules: {
+      // Sometimes it's convenient to give the index a name.
+      '@typescript-eslint/consistent-indexed-object-style': 'off',
+      '@typescript-eslint/array-type': 'off', // ['error', {default: "array-simple"}],
+    }
+  }
+);

knip.jsonc

@@ -0,0 +1,14 @@
+{
+  "entry": ["src/main.tsx", "src/ocr-tool.ts"],
+  "project": ["src/**/*.{ts,tsx}"],
+  "ignoreExportsUsedInFile": true,
+  "ignoreDependencies": [
+    // My build script throws off knip
+    "dist",
+    // @types dependencies that define ambient types
+    "@types/google.analytics",
+    "@types/google.maps",
+    "@types/jquery",
+    "@types/twitter-for-web"
+  ]
+}

package.json

@@ -5,39 +5,48 @@
   "main": "js/viewer.js",
   "scripts": {
     "test": "npm run lint",
-    "lint": "eslint js/*.js",
+    "format": "yarn prettier . --write",
+    "format:check": "yarn prettier . --check",
+    "lint": "eslint src",
     "serve": "webpack serve",
-    "build": "webpack --mode production --no-devtool && rm -rf bundle && cp -r dist/* ."
+    "build": "webpack --mode production --no-devtool && rm -rf bundle && cp -r dist/* .",
+    "knip": "knip",
+    "typecheck": "tsc --noEmit"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/oldnyc/oldnyc.github.io.git"
   },
+  "prettier": {
+    "singleQuote": true
+  },
   "author": "Dan Vanderkam",
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/oldnyc/oldnyc.github.io/issues"
   },
   "homepage": "https://github.com/oldnyc/oldnyc.github.io#readme",
   "devDependencies": {
-    "@types/facebook-js-sdk": "^3.3.7",
+    "@eslint/js": "^9.9.0",
+    "@types/eslint__js": "^8.42.3",
     "@types/google.analytics": "^0.0.43",
     "@types/google.maps": "^3.54.2",
     "@types/jquery": "^1.10.41",
-    "@types/jquery-mousewheel": "^3.1.10",
-    "@types/jqueryui": "1.12",
+    "@types/node": "^22.4.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "5",
     "@types/react-transition-group": "^4.4.11",
     "@types/twitter-for-web": "^0.0.3",
-    "@types/zeroclipboard": "^2.0.35",
-    "eslint": "^2.10.2",
+    "eslint": "^9.9.0",
     "eslint-plugin-import": "^1.8.0",
     "html-webpack-plugin": "^5.6.0",
+    "knip": "^5.27.2",
+    "prettier": "3.3.3",
     "ts-loader": "^9.4.4",
     "typescript": "^5.5.4",
+    "typescript-eslint": "^8.2.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
@@ -50,7 +59,9 @@
     "react-facebook": "^9.0.12",
     "react-helmet": "^6.1.0",
     "react-router-dom": "5",
-    "react-transition-group": "^4.4.5",
-    "underscore": "^1.8.3"
+    "react-transition-group": "^4.4.5"
+  },
+  "resolutions": {
+    "strip-ansi": "6.0.1"
   }
 }

src/About.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import { useHistory } from "react-router-dom";
+import React from 'react';
+import { useHistory } from 'react-router-dom';
 
 export function About() {
   const history = useHistory();
   const exit = () => {
-    history.push("/");
+    history.push('/');
   };
 
   return (

src/Header.tsx

@@ -1,12 +1,18 @@
-import React from "react";
-import { Like } from "react-facebook";
-import { Link } from "react-router-dom";
+import React from 'react';
+import { Like } from 'react-facebook';
+import { Link } from 'react-router-dom';
 
 export function Header() {
   return (
     <div className="social-about">
       <div id="facebook">
-        <Like href="http://www.oldnyc.org" layout="button_count" action="like" showFaces={false} share />
+        <Like
+          href="http://www.oldnyc.org"
+          layout="button_count"
+          action="like"
+          showFaces={false}
+          share
+        />
       </div>
       <div id="twitter">
         <a
@@ -26,7 +32,7 @@ export function Header() {
       <div id="mailing-list">
         <a target="_blank" href="http://eepurl.com/bouyCz">
           Subscribe
-        </a>{" "}
+        </a>{' '}
         to OldNYC updates
       </div>
     </div>