Improve web infrastructure

Upgrade npm packages that were locked to old versions due to now-resolved problems
Remove unused/unnecessary dependencies and their configurations
Fix VS Code format on save
Fix VS Code removing EOF newline in JSON files in conflict with npm
Remove JSON files from ESLint because it doesn't properly support JSON
Add detailed comments to web-related configuration files

Author: Keavon

.vscode/launch.json

@@ -12,18 +12,18 @@
 				"args": [
 					"build",
 					"--bin=graphite",
-					"--package=graphite"
+					"--package=graphite",
 				],
 				"filter": {
 					"name": "graphite",
-					"kind": "bin"
-				}
+					"kind": "bin",
+				},
 			},
 			"args": [],
 			"cwd": "${workspaceFolder}",
 			"env": {
-				"RUST_LOG": "error"
-			}
+				"RUST_LOG": "error",
+			},
 		},
 		{
 			"type": "lldb",
@@ -34,15 +34,15 @@
 					"test",
 					"--no-run",
 					"--bin=graphite",
-					"--package=graphite"
+					"--package=graphite",
 				],
 				"filter": {
 					"name": "graphite",
-					"kind": "bin"
-				}
+					"kind": "bin",
+				},
 			},
 			"args": [],
-			"cwd": "${workspaceFolder}"
-		}
-	]
-}
+			"cwd": "${workspaceFolder}",
+		},
+	],
+}

.vscode/settings.json

@@ -1,27 +1,48 @@
 {
+	// Rust: save on format
 	"[rust]": {
 		"editor.formatOnSave": true,
 		"editor.formatOnPaste": true,
 		"editor.defaultFormatter": "matklad.rust-analyzer",
 	},
-	"[typescript, javascript, json, vue]": {
+	// Web: save on format (consolidate these when https://github.com/microsoft/vscode/issues/51935 is implemented)
+	"[typescript]": {
 		"editor.codeActionsOnSave": {
-			"source.fixAll.eslint": true
+			"source.fixAll.eslint": true,
 		},
 		"editor.formatOnSave": true,
 		"editor.defaultFormatter": "dbaeumer.vscode-eslint",
 	},
+	"[javascript]": {
+		"editor.codeActionsOnSave": {
+			"source.fixAll.eslint": true,
+		},
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "dbaeumer.vscode-eslint",
+	},
+	"[vue]": {
+		"editor.codeActionsOnSave": {
+			"source.fixAll.eslint": true,
+		},
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "dbaeumer.vscode-eslint",
+	},
+	// Rust Analyzer config
 	"rust-analyzer.experimental.procAttrMacros": true,
 	"rust-analyzer.cargo.target": "wasm32-unknown-unknown",
-	"files.eol": "\n",
-	"html.format.wrapLineLength": 200,
+	// ESLint config
 	"eslint.format.enable": true,
 	"eslint.workingDirectories": [
-		"./frontend"
+		"./frontend",
 	],
 	"eslint.validate": [
 		"javascript",
 		"typescript",
 	],
+	// Vue config
 	"vetur.format.enable": false,
-}
+	// VS Code config
+	"html.format.wrapLineLength": 200,
+	"files.eol": "\n",
+	"files.insertFinalNewline": true,
+}

frontend/.eslintrc.js

@@ -1,42 +1,77 @@
+const webpackConfigPath = require.resolve("@vue/cli-service/webpack.config.js");
+
 module.exports = {
 	root: true,
 	env: {
 		browser: true,
 		node: true,
 		es2020: true,
 	},
-	extends: ["plugin:vue/vue3-essential", "@vue/airbnb", "@vue/typescript/recommended", "plugin:prettier-vue/recommended", "prettier"],
 	parserOptions: {
 		ecmaVersion: 2020,
 	},
+	extends: [
+		// Vue-specific defaults
+		"plugin:vue/vue3-essential",
+		// Vue-compatible JS defaults
+		"@vue/airbnb",
+		// Vue-compatible TS defaults
+		"@vue/typescript/recommended",
+		// Vue-compatible Prettier defaults
+		"plugin:prettier-vue/recommended",
+		// General Prettier defaults
+		"prettier",
+	],
 	settings: {
+		// https://github.com/import-js/eslint-plugin-import#resolvers
 		"import/resolver": {
 			// `node` must be listed first!
 			node: {},
-			webpack: { config: require.resolve("@vue/cli-service/webpack.config.js") },
+			webpack: { config: webpackConfigPath },
 		},
+
+		// https://github.com/meteorlxy/eslint-plugin-prettier-vue
 		"prettier-vue": {
+			// Use Prettier to format the HTML, CSS, and JS blocks of .vue single-file components
 			SFCBlocks: {
 				template: true,
 				style: true,
+				script: true,
 			},
 		},
 	},
-	ignorePatterns: ["node_modules/", "dist/", "pkg/", "wasm/pkg/*", "!.*.js", "!.*.ts", "!.*.json"],
+	ignorePatterns: [
+		// Ignore generated directories
+		"node_modules/",
+		"dist/",
+		"pkg/",
+		"wasm/pkg/",
+
+		// Don't ignore JS and TS dotfiles in this folder
+		"!.*.js",
+		"!.*.ts",
+	],
 	rules: {
+		// Standard ESLint config
 		indent: ["error", "tab", { SwitchCase: 1 }],
 		quotes: ["error", "double"],
+		camelcase: ["error", { properties: "always" }],
 		"linebreak-style": ["error", "unix"],
 		"eol-last": ["error", "always"],
+		"max-len": ["error", { code: 200, tabWidth: 4 }],
 		"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
 		"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
 		"no-param-reassign": ["error", { props: false }],
-		"import/prefer-default-export": "off",
-		"max-len": ["error", { code: 200, tabWidth: 4 }],
+
+		// TypeScript plugin config
 		"@typescript-eslint/camelcase": "off",
 		"@typescript-eslint/no-use-before-define": "off",
 		"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
-		camelcase: ["error", { properties: "always" }],
+
+		// Import plugin config (used to intelligently validate module import statements)
+		"import/prefer-default-export": "off",
+
+		// Prettier plugin config (used to enforce HTML, CSS, and JS formatting styles as an ESLint plugin, where fixes are reported to ESLint to be applied when linting)
 		"prettier-vue/prettier": [
 			"error",
 			{