chore: Add Prettier configuration and setup

Add Prettier for consistent code formatting across the project.

Changes:
- Add .prettierrc.js with Standard-style formatting rules
- Add .prettierignore to exclude build artifacts and dependencies
- Add format and format:check scripts to package.json
- Add prettier, eslint-config-prettier, and eslint-plugin-prettier packages
- Update ESLint configuration to integrate with Prettier
- Update .eslintignore to exclude style files
- Update VS Code settings for Prettier integration
- Update PostCSS and Babel configs for consistency

This enables consistent code formatting and integrates Prettier with
the existing ESLint setup.

Author: guyromellemagayano

.eslintignore

@@ -6,3 +6,8 @@
 /node_modules
 .eslintrc.js
 babel.config.js
+.prettierrc.js
+
+# Style files (excluded from linting)
+*.css
+*.scss

.eslintrc.js

@@ -4,15 +4,16 @@ module.exports = {
   // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
   root: true,
 
+  parser: 'vue-eslint-parser',
   parserOptions: {
     parser: '@babel/eslint-parser',
     ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
-    sourceType: 'module' // Allows for the use of imports
+    sourceType: 'module', // Allows for the use of imports
+    requireConfigFile: true, // Use babel.config.js for Babel configuration
   },
 
   env: {
     browser: true,
-    'vue/setup-compiler-macros': true
   },
 
   // Rules order is important, please avoid shuffling them
@@ -23,19 +24,20 @@ module.exports = {
     // Uncomment any of the lines below to choose desired strictness,
     // but leave only one uncommented!
     // See https://eslint.vuejs.org/rules/#available-rules
-    'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
-    // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
-    // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+    'plugin:vue/essential', // Priority A: Essential (Error Prevention) - Vue 3
+    // 'plugin:vue/strongly-recommended', // Priority B: Strongly Recommended (Improving Readability) - Vue 3
+    // 'plugin:vue/recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) - Vue 3
 
-    'standard'
-    
+    'standard',
+    // Prettier must be last to override other configs
+    'plugin:prettier/recommended',
   ],
 
   plugins: [
     // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
     // required to lint *.vue files
     'vue',
-    
+    'prettier',
   ],
 
   globals: {
@@ -48,7 +50,7 @@ module.exports = {
     __QUASAR_SSR_PWA__: 'readonly',
     process: 'readonly',
     Capacitor: 'readonly',
-    chrome: 'readonly'
+    chrome: 'readonly',
   },
 
   // add your custom rules here
@@ -73,12 +75,11 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 
     // custom
-    'semi': [2, 'always'],
-    'space-before-function-paren': [2, 'always'],
-    'keyword-spacing': [2, { before: true, after: true }],
-    'space-before-blocks': [2, 'always'],
-    'comma-dangle': [2, 'always-multiline'],
     'no-console': 'off',
     'no-multi-str': 'off',
-  }
+
+    // Prettier integration - Prettier handles formatting, so we disable conflicting rules
+    // eslint-config-prettier disables formatting rules, but we keep some custom ones
+    'prettier/prettier': 'error',
+  },
 }

.postcssrc.js

@@ -4,6 +4,6 @@
 module.exports = {
   plugins: [
     // to edit target browsers: use "browserslist" field in package.json
-    require('autoprefixer')
-  ]
+    require('autoprefixer'),
+  ],
 }

.prettierignore

@@ -0,0 +1,24 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+dist/
+.quasar/
+*.min.js
+*.bundle.js
+
+# Generated files
+coverage/
+*.log
+
+# Config files that shouldn't be formatted
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# Other
+.DS_Store
+*.swp
+*.swo
+*~
+

.prettierrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  // Basic formatting
+  semi: false, // Standard style: no semicolons
+  singleQuote: true, // Standard style: single quotes
+  quoteProps: 'as-needed',
+  trailingComma: 'es5', // Standard style: trailing commas for ES5
+  bracketSpacing: true,
+  arrowParens: 'avoid', // Match ESLint rule: 'arrow-parens': 'off'
+
+  // Indentation
+  tabWidth: 2, // Standard: 2 spaces
+  useTabs: false,
+
+  // Line length
+  printWidth: 100,
+
+  // Line endings
+  endOfLine: 'lf',
+
+  // Vue-specific
+  vueIndentScriptAndStyle: false,
+
+  // Other
+  bracketSameLine: false,
+  singleAttributePerLine: false,
+}

.vscode/settings.json

@@ -1,14 +1,10 @@
 {
-  "editor.codeActionsOnSave": [
-    "source.fixAll.eslint"
-  ],
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "vue"
-  ],
-  // "eslint.autoFixOnSave": true
-  // "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always"
+  },
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
+  "yaml.validate": false,
+  "prettier.configPath": ".prettierrc.js",
+  "editor.formatOnSave": true
   // "vetur.format.defaultFormatter.html": "js-beautify-html",
 }

babel.config.js

@@ -7,8 +7,8 @@ module.exports = api => {
         '@quasar/babel-preset-app',
         api.caller(caller => caller && caller.target === 'node')
           ? { targets: { node: 'current' } }
-          : {}
-      ]
-    ]
+          : {},
+      ],
+    ],
   }
 }

package.json

@@ -7,6 +7,8 @@
   "private": true,
   "scripts": {
     "lint": "eslint --ext .js,.vue ./",
+    "format": "prettier --write \"**/*.{js,vue,json,scss,css,md}\"",
+    "format:check": "prettier --check \"**/*.{js,vue,json,scss,css,md}\"",
     "test": "echo \"No test specified\" && exit 0",
     "serve": "firebase serve",
     "dev": "quasar dev -m ssr",
@@ -31,12 +33,15 @@
     "@babel/eslint-parser": "^7.13.14",
     "@quasar/app-webpack": "^3.7.2",
     "eslint": "^8.10.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.19.1",
     "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-vue": "^8.5.0",
     "eslint-webpack-plugin": "^3.1.1",
+    "prettier": "^3.6.2",
     "pug": "^3.0.2",
     "pug-plain-loader": "^1.1.0",
     "workbox-webpack-plugin": "^6.0.0"