Add Prettier config and update ESLint

Author: Tim020

.github/workflows/nodelint.yml

@@ -1,4 +1,4 @@
-name: ESLint
+name: Lint & Format (ESLint + Prettier)
 
 on: [push]
 

client/.prettierignore

@@ -0,0 +1,16 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+dist/
+../server/static/
+
+# Test outputs
+coverage/
+junit/
+
+# Backups
+*.backup
+
+# Generated files
+src/docs/

client/eslint.config.mjs

@@ -2,6 +2,8 @@ import js from '@eslint/js';
 import pluginVue from 'eslint-plugin-vue';
 import globals from 'globals';
 import babelParser from '@babel/eslint-parser';
+import prettierConfig from 'eslint-config-prettier';
+import prettierPlugin from 'eslint-plugin-prettier';
 
 export default [
   {
@@ -11,12 +13,16 @@ export default [
       '../server/static/**',
       'junit/**',
       '*.backup',
+      'src/docs/**',
     ],
   },
   js.configs.recommended,
   ...pluginVue.configs['flat/vue2-recommended'],
   {
     files: ['**/*.{js,vue}'],
+    plugins: {
+      prettier: prettierPlugin,
+    },
     languageOptions: {
       ecmaVersion: 2021,
       sourceType: 'module',
@@ -37,27 +43,24 @@ export default [
       },
     },
     rules: {
+      // Prettier integration - runs Prettier as an ESLint rule
+      'prettier/prettier': 'error',
+
+      // Disable formatting rules that conflict with Prettier
+      ...prettierConfig.rules,
+
+      // Let Prettier handle line length (via printWidth config)
+      'max-len': 'off',
+
+      // Custom linting rules (non-formatting)
       'no-unused-vars': 'off',
       'vue/no-unused-vars': 'off',
       'no-plusplus': 'off',
-      'no-param-reassign': ['error', {
-        props: true,
-        ignorePropertyModificationsFor: [
-          'state',
-          'acc',
-          'e',
-        ],
-      }],
-      'max-len': [
+      'no-param-reassign': [
         'error',
-        150,
-        2,
         {
-          ignoreUrls: true,
-          ignoreComments: false,
-          ignoreRegExpLiterals: true,
-          ignoreStrings: true,
-          ignoreTemplateLiterals: true,
+          props: true,
+          ignorePropertyModificationsFor: ['state', 'acc', 'e'],
         },
       ],
     },

client/package-lock.json

@@ -6,9 +6,13 @@
     "prebuild": "scripts/copy-docs.sh && node scripts/generate-doc-manifest.js",
     "build": "vite build",
     "build:analyze": "vite build --mode analyze",
-    "lint": "eslint 'src/**/*.{js,vue}' --fix",
-    "ci-lint": "eslint 'src/**/*.{js,vue}'",
+    "lint": "npm run format && npm run lint:eslint",
+    "lint:eslint": "eslint 'src/**/*.{js,vue}' --fix",
+    "ci-lint": "npm run format:check && npm run lint:eslint-check",
+    "lint:eslint-check": "eslint 'src/**/*.{js,vue}'",
     "lint:filter": "./scripts/eslint-filter.sh",
+    "format": "prettier --write 'src/**/*.{js,vue,json,css,scss}'",
+    "format:check": "prettier --check 'src/**/*.{js,vue,json,css,scss}'",
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:run": "vitest run",
@@ -54,9 +58,12 @@
     "@vitest/ui": "^4.0.16",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-vue": "^9.33.0",
     "globals": "^15.14.0",
     "jsdom": "^27.4.0",
+    "prettier": "^3.7.4",
     "sass": "1.97.2",
     "vite": "^7.3.1",
     "vitest": "^4.0.16"

client/package.json

@@ -0,0 +1,40 @@
+/**
+ * Prettier configuration for DigiScript frontend
+ * Based on Vue.js community recommendations
+ * @see https://prettier.io/docs/en/configuration.html
+ * @see https://vuejs.org/style-guide/
+ */
+export default {
+  // Standard Prettier defaults with Vue community preferences
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  trailingComma: 'es5',
+  bracketSpacing: true,
+  bracketSameLine: false,
+  arrowParens: 'always',
+  endOfLine: 'lf',
+
+  // Vue-specific options
+  vueIndentScriptAndStyle: false, // Don't indent <script> and <style> tags
+  singleAttributePerLine: false, // Allow multiple attributes per line (Vue default)
+
+  // File-specific overrides
+  overrides: [
+    {
+      files: '*.vue',
+      options: {
+        parser: 'vue',
+      },
+    },
+    {
+      files: ['*.json', '.prettierrc'],
+      options: {
+        printWidth: 80,
+      },
+    },
+  ],
+};