Fix web code linting to be portable across environments

client/web/.eslintrc.js

@@ -3,35 +3,40 @@ module.exports = {
 	env: {
 		node: true,
 	},
-	extends: [
-		"plugin:vue/vue3-essential",
-		"@vue/airbnb",
-		"@vue/typescript/recommended",
-	],
+	extends: ["plugin:vue/vue3-essential", "@vue/airbnb", "@vue/typescript/recommended", "plugin:prettier-vue/recommended", "prettier"],
 	parserOptions: {
 		ecmaVersion: 2020,
 	},
 	settings: {
 		"import/resolver": {
-			// `node` must be the top property
+			// `node` must be listed first
 			node: {},
-			webpack: {
-				config: require.resolve("@vue/cli-service/webpack.config.js"),
+			webpack: { config: require.resolve("@vue/cli-service/webpack.config.js") },
+		},
+		"prettier-vue": {
+			SFCBlocks: {
+				template: true,
+				style: true,
 			},
 		},
 	},
 	rules: {
-		"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-		"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-		"no-tabs": 0,
-		"max-len": 0,
-		"linebreak-style": ["error", "unix"],
 		indent: ["error", "tab"],
 		quotes: ["error", "double"],
+		"linebreak-style": ["error", "unix"],
+		"eol-last": ["error", "always"],
+		"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+		"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+		"max-len": ["error", { code: 200, tabWidth: 4 }],
 		"@typescript-eslint/camelcase": "off",
 		camelcase: ["error", { ignoreImports: true, ignoreDestructuring: true }],
-		"import/extensions": ["error", "ignorePackages", {
-			js: "never", jsx: "never", ts: "never", tsx: "never",
-		}],
+		"prettier-vue/prettier": [
+			"error",
+			{
+				tabWidth: 4,
+				tabs: true,
+				printWidth: 200,
+			},
+		],
 	},
 };