feat: upgrade packages / linters

Author: Sarmaged

.editorconfig

@@ -2,6 +2,7 @@
 root = true
 
 [*]
+max_line_length = 120
 indent_style = space
 indent_size = 2
 end_of_line = lf

.eslintrc.js

@@ -7,9 +7,15 @@ module.exports = {
   parserOptions: {
     parser: '@babel/eslint-parser',
     requireConfigFile: false,
+    ecmaVersion: 'latest',
+    sourceType: 'module',
   },
-  extends: ['@nuxtjs', 'plugin:nuxt/recommended', 'prettier'],
+  extends: ['@nuxtjs', 'plugin:nuxt/recommended', 'eslint:recommended', 'prettier'],
   plugins: [],
   // add your custom rules here
-  rules: {},
+  rules: {
+    'vue/multi-word-component-names': 'off',
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+  },
 }

.prettierrc

@@ -1,4 +1,9 @@
 {
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "all",
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "htmlWhitespaceSensitivity": "ignore"
 }

nuxt.config.js

@@ -8,25 +8,39 @@ export default {
     title: 'Style-Forge',
     htmlAttrs: {
       lang: 'en',
-      'data-theme': 'auto'
+      'data-theme': 'auto',
     },
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: 'CSS framework with themes, utilities, flexbox, and grid for creating responsive websites' },
-      { name: 'keywords', content: 'style-forge, CSS framework, modern design, responsive design, utilities, web development, frontend, UI components, CSS grid, CSS flexbox, themes, form validation, custom themes, grid, flex, input, select, switch, textarea, helpers, colors' },
+      {
+        hid: 'description',
+        name: 'description',
+        content: 'CSS framework with themes, utilities, flexbox, and grid for creating responsive websites',
+      },
+      {
+        name: 'keywords',
+        content:
+          'style-forge, CSS framework, modern design, responsive design, utilities, web development, frontend, UI components, CSS grid, CSS flexbox, themes, form validation, custom themes, grid, flex, input, select, switch, textarea, helpers, colors',
+      },
 
       { name: 'format-detection', content: 'telephone=no' },
 
       { property: 'og:title', content: 'Style-Forge' },
-      { property: 'og:description', content: 'CSS framework with themes, utilities, flexbox, and grid for creating responsive websites' },
+      {
+        property: 'og:description',
+        content: 'CSS framework with themes, utilities, flexbox, and grid for creating responsive websites',
+      },
       { property: 'og:url', content: 'https://style-forge.github.io/' },
       { property: 'og:image', content: '/images/main.png' },
       { property: 'og:type', content: 'website' },
       { name: 'twitter:title', content: 'Style-Forge' },
-      { name: 'twitter:description', content: 'CSS framework with themes, utilities, flexbox, and grid for creating responsive websites' },
+      {
+        name: 'twitter:description',
+        content: 'CSS framework with themes, utilities, flexbox, and grid for creating responsive websites',
+      },
       { name: 'twitter:card', content: 'summary_large_image' },
-      { name: 'twitter:image', content: '/images/main.png' }
+      { name: 'twitter:image', content: '/images/main.png' },
     ],
     link: [
       { rel: 'apple-touch-icon', size: '180x180', href: '/icons/icon-180x180.png' },
@@ -35,58 +49,63 @@ export default {
       { rel: 'manifest', href: '/site.webmanifest' },
       { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
       { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossOrigin: true },
-      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap' },
-      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200,0,0' }
-    ]
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+      },
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200,0,0',
+      },
+    ],
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: ['~/assets/main.css'],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: [
-    { src: '~/plugins/support.js', mode: 'client' }
-  ],
+  plugins: [{ src: '~/plugins/support.js', mode: 'client' }],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
   components: true,
 
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
   buildModules: [
     // https://go.nuxtjs.dev/eslint
-    '@nuxtjs/eslint-module'
+    '@nuxtjs/eslint-module',
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [],
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {
+    friendlyErrors: false,
     publicPath: '_',
     extractCSS: true,
     postcss: {
       postcssOptions: {
         plugins: {
-          'postcss-preset-env': false
-        }
-      }
-    }
+          'postcss-preset-env': false,
+        },
+      },
+    },
   },
 
   /* /// */
   loading: false,
   loadingIndicator: false,
 
   router: {
-    mode: 'abstract'
+    mode: 'abstract',
   },
 
   generate: {
     cache: false,
-    fallback: false
+    fallback: false,
   },
 
   server: {
-    port: 5173
-  }
+    port: 5173,
+  },
 }

package.json

@@ -14,28 +14,29 @@
     "lintfix": "prettier --write --list-different . && yarn lint:js --fix"
   },
   "dependencies": {
-    "core-js": "^3.25.3",
-    "nuxt": "^2.15.8",
     "style-forge.base": "^2025.1.22",
     "style-forge.colors": "^2025.1.24",
     "style-forge.form": "^2025.1.25",
     "style-forge.helpers": "^2025.1.25",
     "style-forge.media": "^2025.1.25",
     "style-forge.patterns": "^2025.1.18",
-    "style-forge.themes": "^2025.1.18",
-    "vue": "^2.7.10",
-    "vue-server-renderer": "^2.7.10",
-    "vue-template-compiler": "^2.7.10"
+    "style-forge.themes": "^2025.1.18"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.19.1",
-    "@nuxt/types": "~2.18.0",
-    "@nuxtjs/eslint-config": "^11.0.0",
+    "@babel/eslint-parser": "^7.26.5",
+    "@nuxt/types": "~2.18.1",
+    "@nuxtjs/eslint-config": "^12.0.0",
     "@nuxtjs/eslint-module": "^3.1.0",
-    "eslint": "^8.24.0",
-    "eslint-config-prettier": "^8.5.0",
+    "core-js": "^3.40.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-nuxt": "^4.0.0",
-    "eslint-plugin-vue": "^9.5.1",
-    "prettier": "^2.7.1"
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-vue": "^9.32.0",
+    "nuxt": "^2.18.1",
+    "prettier": "^2.8.8",
+    "vue": "^2.7.16",
+    "vue-server-renderer": "^2.7.16",
+    "vue-template-compiler": "^2.7.16"
   }
 }