feat: updates according to pro

Author: jd-solanki

typescript-version/.eslintrc.js typescript-version/.eslintrc.cjs

@@ -11,6 +11,7 @@ module.exports = {
     'plugin:promise/recommended',
     'plugin:sonarjs/recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:case-police/recommended',
 
     // 'plugin:unicorn/recommended',
   ],
@@ -25,21 +26,24 @@ module.exports = {
     '@typescript-eslint',
     'regex',
   ],
-  ignorePatterns: ['src/@iconify/*.js', 'node_modules', 'dist', '*.d.ts'],
+  ignorePatterns: ['src/plugins/iconify/*.js', 'node_modules', 'dist', '*.d.ts', 'vendor'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 
     // indentation (Already present in TypeScript)
     'comma-spacing': ['error', { before: false, after: true }],
     'key-spacing': ['error', { afterColon: true }],
+    'n/prefer-global/process': ['off'],
+    'sonarjs/cognitive-complexity': ['off'],
 
     'vue/first-attribute-linebreak': ['error', {
       singleline: 'beside',
       multiline: 'below',
     }],
 
     'antfu/top-level-function': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
 
     // indentation (Already present in TypeScript)
     'indent': ['error', 2],
@@ -50,6 +54,9 @@ module.exports = {
     // Enforce consistent spacing inside braces of object (Already present in TypeScript)
     'object-curly-spacing': ['error', 'always'],
 
+    // Enforce camelCase naming convention
+    'camelcase': 'error',
+
     // Disable max-len
     'max-len': 'off',
 
@@ -72,11 +79,14 @@ module.exports = {
         allowClassStart: true,
         allowObjectStart: true,
         allowArrayStart: true,
+
+        // We don't want to add extra space above closing SECTION
+        ignorePattern: '!SECTION',
       },
     ],
 
     // Ignore _ as unused variable
-    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_+$' }],
+    '@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: '^_+$', argsIgnorePattern: '^_+$' }],
 
     'array-element-newline': ['error', 'consistent'],
     'array-bracket-newline': ['error', 'consistent'],
@@ -94,7 +104,10 @@ module.exports = {
     // Plugin: eslint-plugin-import
     'import/prefer-default-export': 'off',
     'import/newline-after-import': ['error', { count: 1 }],
-    'no-restricted-imports': ['error', 'vuetify/components'],
+    'no-restricted-imports': ['error', 'vuetify/components', {
+      name: 'vue3-apexcharts',
+      message: 'apexcharts are autoimported',
+    }],
 
     // For omitting extension for ts files
     'import/extensions': [
@@ -132,7 +145,7 @@ module.exports = {
     // ESLint plugin vue
     'vue/block-tag-newline': 'error',
     'vue/component-api-style': 'error',
-    'vue/component-name-in-template-casing': ['error', 'PascalCase', { registeredComponentsOnly: false }],
+    'vue/component-name-in-template-casing': ['error', 'PascalCase', { registeredComponentsOnly: false, ignores: ['/^swiper-/'] }],
     'vue/custom-event-name-casing': ['error', 'camelCase', {
       ignores: [
         '/^(click):[a-z]+((\d)|([A-Z0-9][a-z0-9]+))*([A-Z])?/',
@@ -146,8 +159,7 @@ module.exports = {
     'vue/no-child-content': 'error',
     'vue/require-default-prop': 'off',
 
-    // NOTE this rule only supported in SFC,  Users of the unplugin-vue-define-options should disable that rule: https://github.com/vuejs/eslint-plugin-vue/issues/1886
-    // 'vue/no-duplicate-attr-inheritance': 'error',
+    'vue/no-duplicate-attr-inheritance': 'error',
     'vue/no-empty-component-block': 'error',
     'vue/no-multiple-objects-in-class': 'error',
     'vue/no-reserved-component-names': 'error',
@@ -191,9 +203,9 @@ module.exports = {
           message: 'Use \'@images\' path alias for image imports',
         },
         {
-          regex: '@/styles',
+          regex: '@/assets/styles',
           replacement: '@styles',
-          message: 'Use \'@styles\' path alias for importing styles from \'src/styles\'',
+          message: 'Use \'@styles\' path alias for importing styles from \'src/assets/styles\'',
         },
 
         // {
@@ -219,14 +231,12 @@ module.exports = {
       ],
 
       // Ignore files
-      '\.eslintrc\.js',
+      '\.eslintrc\.cjs',
     ],
   },
   settings: {
     'import/resolver': {
-      node: {
-        extensions: ['.ts', '.js', '.tsx', '.jsx', '.mjs', '.png', '.jpg'],
-      },
+      node: true,
       typescript: {},
     },
   },

typescript-version/.gitignore

@@ -16,6 +16,8 @@ dist-ssr
 /cypress/videos/
 /cypress/screenshots/
 
+# 👉 Custom Git ignores
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
@@ -32,3 +34,10 @@ dist-ssr
 
 # iconify dist files
 src/plugins/iconify/icons.css
+
+# Ignore MSW script
+public/mockServiceWorker.js
+
+# Env files
+.env*
+!.env.example

typescript-version/.npmrc

@@ -0,0 +1,2 @@
+auto-install-peers=true
+shamefully-hoist=true

typescript-version/.stylelintrc.json

@@ -1,34 +1,45 @@
 {
-    "extends": [
-        "stylelint-config-standard-scss",
-        "stylelint-config-idiomatic-order"
-    ],
-    "plugins": [
-        "stylelint-use-logical-spec"
+  "extends": [
+    "stylelint-config-standard-scss",
+    "stylelint-config-idiomatic-order"
+  ],
+  "plugins": [
+    "stylelint-use-logical-spec",
+    "stylelint-codeguide"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "**/*.scss"
+      ],
+      "customSyntax": "postcss-scss"
+    },
+    {
+      "files": [
+        "**/*.vue"
+      ],
+      "customSyntax": "postcss-html"
+    }
+  ],
+  "rules": {
+    "codeguide/max-line-length": [
+      120,
+      {
+        "ignore": "comments"
+      }
     ],
-    "overrides": [
-        {
-            "files": [
-                "**/*.scss"
-            ],
-            "customSyntax": "postcss-scss"
-        },
-        {
-            "files": [
-                "**/*.vue"
-            ],
-            "customSyntax": "postcss-html"
-        }
+    "codeguide/indentation": 2,
+    "liberty/use-logical-spec": true,
+    "selector-class-pattern": null,
+    "color-function-notation": null,
+    "annotation-no-unknown": [
+      true,
+      {
+        "ignoreAnnotations": [
+          "default"
+        ]
+      }
     ],
-    "rules": {
-        "max-line-length": [
-            120,
-            {
-                "ignore": "comments"
-            }
-        ],
-        "liberty/use-logical-spec": true,
-        "selector-class-pattern": null,
-        "color-function-notation": null
-    }
+    "media-feature-range-notation": null
+  }
 }

typescript-version/.vscode/extensions.json

@@ -4,10 +4,12 @@
     "editorconfig.editorconfig",
     "xabikos.javascriptsnippets",
     "stylelint.vscode-stylelint",
+    "fabiospampinato.vscode-highlight",
     "github.vscode-pull-request-github",
     "vue.volar",
     "antfu.iconify",
     "cipchk.cssrem",
-    "matijao.vue-nuxt-snippets"
+    "matijao.vue-nuxt-snippets",
+    "dongido.sync-env"
   ]
 }

typescript-version/.vscode/settings.json

@@ -38,9 +38,9 @@
     },
     "eslint.alwaysShowStatus": true,
     "eslint.format.enable": true,
-    "eslint.packageManager": "yarn",
+    "eslint.packageManager": "pnpm",
     // Extension: Stylelint
-    "stylelint.packageManager": "yarn",
+    "stylelint.packageManager": "pnpm",
     "stylelint.validate": [
         "css",
         "scss",
@@ -50,41 +50,40 @@
     "cSpell.words": [
         "Composables",
         "Customizer",
+        "destr",
         "flagpack",
         "Iconify",
+        "ofetch",
         "psudo",
         "stylelint",
         "touchless",
         "triggerer",
         "vuetify"
     ],
     // Extension: Comment Anchors
-    "commentAnchors.tags.list": [
-        {
-            "tag": "ℹ️",
+    "commentAnchors.tags.anchors": {
+        "ℹ️": {
             "scope": "hidden",
             // This color is taken from "Better Comments" Extension (?)
             "highlightColor": "#3498DB",
             "styleComment": true,
             "isItalic": false,
         },
-        {
-            "tag": "👉",
+        "👉": {
             "scope": "file",
             // This color is taken from "Better Comments" Extension (*)
             "highlightColor": "#98C379",
             "styleComment": true,
             "isItalic": false
         },
-        {
-            "tag": "❗",
+        "❗": {
             "scope": "hidden",
             // This color is taken from "Better Comments" Extension (*)
             "highlightColor": "#FF2D00",
             "styleComment": true,
             "isItalic": false,
         },
-    ],
+    },
     // Extension: fabiospampinato.vscode-highlight
     "highlight.regexFlags": "gi",
     "highlight.regexes": {

typescript-version/README.md

@@ -4,13 +4,13 @@ This template should help get you started developing with Vue 3 in Vite.
 
 ## Recommended IDE Setup
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+[VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
 
 ## Type Support for `.vue` Imports in TS
 
 Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
 
-However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VS Code command palette.
 
 ## Customize configuration