Introduce automated formatting with prettier and optional enforcement through pre-commit

.devcontainer/README.md

@@ -2,9 +2,9 @@
 
 ## What is a Development Container?
 
-* Learn more about [using a Docker container as a development environment in VS Code](https://code.visualstudio.com/docs/remote/containers).
-* Learn more about [using a Docker container as a development environment with GitHub Codespaces](https://docs.github.com/en/codespaces/developing-in-codespaces/creating-a-codespace).
+- Learn more about [using a Docker container as a development environment in VS Code](https://code.visualstudio.com/docs/remote/containers).
+- Learn more about [using a Docker container as a development environment with GitHub Codespaces](https://docs.github.com/en/codespaces/developing-in-codespaces/creating-a-codespace).
 
 ## Contents
 
-Based on the [node dev container template](https://github.com/microsoft/vscode-remote-try-node) from the `vscode-dev-containers` GitHub repository.
+Based on the [node dev container template](https://github.com/microsoft/vscode-remote-try-node) from the `vscode-dev-containers` GitHub repository.

.devcontainer/devcontainer.json

@@ -1,49 +1,56 @@
-
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
-// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
-	"name": "Node.js",
-	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	"image": "mcr.microsoft.com/devcontainers/javascript-node:0-18-bullseye",
-
-	// Features to add to the dev container. More info: https://containers.dev/features.
-	// "features": {},
-
-	// Configure tool-specific properties.
-	"customizations": {
-		// Configure properties specific to VS Code.
-		"vscode": {
-			"settings": {},
-			"extensions": [
-				"streetsidesoftware.code-spell-checker"
-			]
-		}
-	},
-
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// "forwardPorts": [3000],
-
-	// Use 'portsAttributes' to set default properties for specific forwarded ports. 
-	// More info: https://containers.dev/implementors/json_reference/#port-attributes
-	"portsAttributes": {
-		"9000": {
-			"label": "Hello Remote World",
-			"onAutoForward": "notify"
-		}
-	},
-
-	// Use 'postCreateCommand' to run commands after the container is created.
-	"postCreateCommand": "yarn install;yarn build",
-
-	"postStartCommand": "yarn dev",
-
-	"portsAttributes": {
-		"3000": {
-			"label": "OpenClarity Website",
-			"onAutoForward": "openBrowser"
-		}
-	},
-
-	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	// "remoteUser": "root"
-}
+  "name": "OpenClarity",
+  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:0-18-bullseye",
+
+  // Features to add to the dev container. More info: https://containers.dev/features.
+  // "features": {},
+
+  // Configure tool-specific properties.
+  "customizations": {
+    // Configure properties specific to VS Code.
+    "vscode": {
+      "settings": {
+        "editor.formatOnSave": true,
+        "editor.codeActionsOnSave": {
+          "source.organizeImports": true
+        }
+      },
+      "extensions": [
+        "dbaeumer.vscode-eslint",
+        "editorconfig.editorconfig",
+        "esbenp.prettier-vscode",
+        "streetsidesoftware.code-spell-checker"
+      ]
+    }
+  },
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // "forwardPorts": [3000],
+
+  // Use 'portsAttributes' to set default properties for specific forwarded ports.
+  // More info: https://containers.dev/implementors/json_reference/#port-attributes
+  "portsAttributes": {
+    "9000": {
+      "label": "Hello Remote World",
+      "onAutoForward": "notify"
+    }
+  },
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "yarn install;yarn build",
+
+  "postStartCommand": "yarn dev",
+
+  "portsAttributes": {
+    "3000": {
+      "label": "OpenClarity Website",
+      "onAutoForward": "openBrowser"
+    }
+  }
+
+  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+  // "remoteUser": "root"
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -40,4 +40,4 @@ yarn-error.log*
 .vscode
 
 #npm
-.npmrc
+.npmrc

.pre-commit-config.yaml

@@ -0,0 +1,25 @@
+# See https://pre-commit.com for more information
+# See https://pre-commit.com/hooks.html for more hooks
+---
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.4.0
+    hooks:
+      - id: check-added-large-files
+      - id: check-yaml
+      - id: check-json
+        exclude: ".devcontainer"
+      - id: check-merge-conflict
+      - id: end-of-file-fixer
+      - id: mixed-line-ending
+      - id: trailing-whitespace
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: "v3.0.0-alpha.9-for-vscode" # ignored, see https://github.com/pre-commit/mirrors-prettier/issues/29
+    hooks:
+      - id: prettier
+        additional_dependencies:
+          - [email protected] # This is the real version used
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: "v8.39.0"
+    hooks:
+      - id: eslint

README.md

@@ -41,7 +41,7 @@ yarn start
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to access the project in production mode.
 
-*Note: Next/Image is not currently working when using next export, so we are using standard HTML img tags for now. In the future, we will either stop using export or the issue will be fixed and we will update accordingly.*
+_Note: Next/Image is not currently working when using next export, so we are using standard HTML img tags for now. In the future, we will either stop using export or the issue will be fixed and we will update accordingly._
 
 ### Technologies Used