Add ESLint / Prettier configs and make linting part of CI on Git commits

samvera-labs · Oct 5, 2023 · 43da0ee · 43da0ee
1 parent 904ce99
commit 43da0ee
Show file tree

Hide file tree

Showing 96 changed files with 3,629 additions and 1,454 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,15 @@
+# dev
+.build
+.next
+dist
+node_modules
+out
+public/script.js
+public/script.js.map
+public/index.html
+coverage/
+html/
+**/*.d.ts
+
+# OS
+.DS_Store
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": "warn",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "warn"
+  }
+}
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm exec lint-staged
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,16 @@
+# dev
+.build
+.next
+build
+pnpm-lock.yaml
+dist
+node_modules
+out
+public/script.js
+public/script.js.map
+public/index.html
+coverage/
+html/
+
+# OS
+.DS_Store
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+  "semi": true
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
diff --git a/README.md b/README.md
@@ -36,6 +36,24 @@ npm run test
 npm run coverage
 ````
 
+### Code Quality
+
+Clover IIIF utilizes [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) for code quality. Files will be automatically formatted and "fixed" to Prettier and ESLint's configurations when making a `commit` as part of `lint-staged` config. The following commands are also directly available:
+
+```shell
+# Run ESLint
+npm run lint
+
+# Run Prettier check
+npm run prettier
+
+# Run Prettier fix
+npm run prettier:fix
+
+# Run TypeScript checks
+npm run typecheck
+```
+
 ## Releases
 
 The Clover Suite recently released `v2`. The biggest change from v1.x.x to v2. is that Clover is now more than just a Viewer component. You can still use the Viewer component as you may have previously by following the [Installation and Usage instructions](https://samvera-labs.github.io/clover-iiif/docs/viewer).

diff --git a/decs.d.ts b/decs.d.ts
@@ -2,3 +2,5 @@
 
 // Example:
 // declare module "@iiif/parser/upgrader";
+
+declare module "node-webvtt";
diff --git a/docs/components/Logo.tsx b/docs/components/Logo.tsx
@@ -64,7 +64,9 @@ const Logo = () => (
       }
       span:hover {
         mask-position: 100%;
-        transition: mask-position 1s ease, -webkit-mask-position 1s ease;
+        transition:
+          mask-position 1s ease,
+          -webkit-mask-position 1s ease;
       }
     `}</style>
   </span>

diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -0,0 +1,15 @@
+// lint-staged.config.js
+module.exports = {
+  // Type check TypeScript files
+  "**/*.(ts|tsx)": () => "pnpm tsc --noEmit",
+
+  // Lint then format TypeScript and JavaScript files
+  "**/*.(ts|tsx|js|jsx)": (filenames) => [
+    `pnpm eslint --fix ${filenames.join(" ")}`,
+    `pnpm prettier --write ${filenames.join(" ")}`,
+  ],
+
+  // Format MarkDown and JSON
+  "**/*.(md|json)": (filenames) =>
+    `pnpm prettier --write ${filenames.join(" ")}`,
+};
diff --git a/package.json b/package.json
@@ -37,10 +37,14 @@
     "coverage": "vitest --ui --coverage",
     "dev": "next dev",
     "dev:vite": "vite",
+    "lint": "prettier . --check && next lint",
     "prepublishOnly": "npm run build",
+    "prettier": "prettier . --check",
+    "prettier:fix": "prettier --write .",
     "start": "next start",
     "test": "vitest",
-    "ts-lint": "tsc --incremental --watch"
+    "typecheck": "tsc --incremental --noEmit",
+    "prepare": "husky install"
   },
   "repository": {
     "type": "git",
@@ -59,48 +63,55 @@
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-form": "^0.0.3",
-    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@stitches/react": "^1.2.8",
-    "hls.js": "^1.4.10",
+    "hls.js": "^1.4.12",
     "node-webvtt": "^1.9.4",
-    "openseadragon": "^2.4.2 || ^3.10",
+    "openseadragon": "^2.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.11",
     "sanitize-html": "^2.11.0",
-    "swiper": "9.4.1",
-    "uuid": "^9.0.0"
+    "swiper": "^9.4.1",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@iiif/presentation-3": "^1.1.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
-    "@types/node": "20.5.3",
-    "@types/openseadragon": "^3.0.6",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
+    "@types/node": "20.7.2",
+    "@types/openseadragon": "^3.0.7",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
+    "@types/sanitize-html": "^2.9.1",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@vitejs/plugin-react": "^4.0.4",
-    "@vitest/coverage-v8": "^0.34.2",
-    "@vitest/ui": "^0.34.2",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@vitejs/plugin-react": "^4.1.0",
+    "@vitest/coverage-v8": "^0.34.6",
+    "@vitest/ui": "^0.34.6",
     "cross-fetch": "^4.0.0",
     "dts-bundle-generator": "^8.0.1",
+    "eslint-config-next": "13.5.3",
+    "eslint-config-prettier": "^9.0.0",
     "execa": "^7.2.0",
+    "husky": "^8.0.3",
     "jsdom": "^22.1.0",
-    "next": "^13.4.19",
-    "nextra": "^2.11.1",
-    "nextra-theme-docs": "^2.11.1",
-    "preact": "^10.17.1",
-    "rimraf": "^5.0.1",
-    "terser": "^5.19.2",
-    "typescript": "^5.1.6",
+    "lint-staged": "^14.0.1",
+    "next": "^13.5.3",
+    "nextra": "^2.13.1",
+    "nextra-theme-docs": "^2.13.1",
+    "preact": "^10.18.0",
+    "prettier": "^3.0.3",
+    "rimraf": "^5.0.5",
+    "terser": "^5.20.0",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9",
-    "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.34.2"
+    "vite-tsconfig-paths": "^4.2.1",
+    "vitest": "^0.34.6"
   },
   "peerDependencies": {
     "swiper": "^9.0.0"

diff --git a/pages/docs/viewer.mdx b/pages/docs/viewer.mdx
@@ -127,7 +127,7 @@ const Viewer = dynamic(
   () => import("@samvera/clover-iiif").then((Clover) => Clover.Viewer),
   {
     ssr: false,
-  }
+  },
 );
 
 const MyCustomViewer = () => {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,5 @@

		// Example:
		// declare module "@iiif/parser/upgrader";

		declare module "node-webvtt";
-Original file line number
+Diff line change
@@ Expand Up / @@ -127,7 +127,7 @@ const Viewer = dynamic( @@
       () => import("@samvera/clover-iiif").then((Clover) => Clover.Viewer),
       {
         ssr: false,
-      }
+      },
     );
     const MyCustomViewer = () => {
@@ Expand Down @@