Linting and Formatting Updates (ESLint, Stylelint, Prettier) update

.stylelintrc.json

@@ -2,6 +2,7 @@
     "cache": true,
     "defaultSeverity": "warning",
     "extends": [
+        "stylelint-config-html",
         "stylelint-config-standard"
     ],
     "fix": true,
@@ -11,11 +12,14 @@
         "comment-whitespace-inside": "always",
         "custom-property-empty-line-before": "never",
         "declaration-block-no-redundant-longhand-properties": false,
+        "declaration-block-no-shorthand-property-overrides": true,
         "declaration-empty-line-before": "never",
         "declaration-property-unit-allowed-list": {
             "font-size": [
                 "px",
-                "rem"
+                "rem",
+                "vh",
+                "vw"
             ]
         },
         "font-family-name-quotes": "always-unless-keyword",
@@ -42,7 +46,6 @@
     "overrides": [
         {
             "files": [
-                "*.scss",
                 "**/*.scss"
             ],
             "extends": [

cypress.config.ts

@@ -1,15 +1,15 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
-  component: {
-    devServer: {
-      bundler: "vite",
-      framework: "vue",
+    component: {
+        devServer: {
+            bundler: "vite",
+            framework: "vue",
+        },
     },
-  },
 
-  e2e: {
-    baseUrl: "http://localhost:4173",
-    specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
-  },
+    e2e: {
+        baseUrl: "http://localhost:4173",
+        specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
+    },
 });

cypress.d.ts

@@ -1,6 +1,5 @@
 // Packages
 import {
-  type CyMountOptions,
   mount,
 } from 'cypress/vue';
 import {

cypress/fixtures/example.json

@@ -1,5 +1,5 @@
 {
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
+    "name": "Using fixtures to represent data",
+    "email": "hello@cypress.io",
+    "body": "Fixtures are a great way to mock data for responses to routes"
 }

cypress/support/commands/select.ts

@@ -1,24 +1,24 @@
 const enterValueForSelectInput = (id: string, text: string) => {
-  cy
-    .get(id)
-    .find('.vs__search')
-    .clear()
-    .type(text)
-    .type('{enter}')
-    .trigger('input');
+    cy
+        .get(id)
+        .find('.vs__search')
+        .clear()
+        .type(text)
+        .type('{enter}')
+        .trigger('input');
 };
 
 Cypress.Commands.add('enterValueForSelectInput', enterValueForSelectInput);
 
 const selectFirstElementInVSelect = (id: string) => {
-  cy
-    .get(id)
-    .click();
+    cy
+        .get(id)
+        .click();
 
-  cy
-    .get('li.vs__dropdown-option')
-    .first()
-    .click();
+    cy
+        .get('li.vs__dropdown-option')
+        .first()
+        .click();
 };
 
 Cypress.Commands.add('selectFirstElementInVSelect', selectFirstElementInVSelect);

cypress/support/commands/vue.ts

@@ -1,35 +1,35 @@
 // Packages
-import { mount } from 'cypress/vue';
 import { type VueWrapper } from '@vue/test-utils';
+import { mount } from 'cypress/vue';
 // Plugins
 import { ToastrPlugin } from '@src/utils/plugins/toastr';
 
 Cypress.Commands.add('getMounted', () => {
-  return cy
-    .get<VueWrapper<unknown>>('@vue')
-    .then(($wrapper) => {
-      cy.wrap($wrapper);
-    });
+    return cy
+        .get<VueWrapper<unknown>>('@vue')
+        .then(($wrapper) => {
+            cy.wrap($wrapper);
+        });
 });
 
 Cypress.Commands.add('mount', (component, options = {}) => {
-  const defaultOptions = {
-    global: {
-      plugins: [
-        ToastrPlugin,
-      ],
-      stubs: {
-        transition: false,
-        'transition-group': false,
-      },
-    },
-  };
+    const defaultOptions = {
+        global: {
+            plugins: [
+                ToastrPlugin,
+            ],
+            stubs: {
+                transition: false,
+                'transition-group': false,
+            },
+        },
+    };
 
-  const mountOptions = { ...defaultOptions, ...options };
+    const mountOptions = { ...defaultOptions, ...options };
 
-  return mount(component, mountOptions).then(({ wrapper }) => {
-    cy
-      .wrap(wrapper)
-      .as('vue');
-  });
+    return mount(component, mountOptions).then(({ wrapper }) => {
+        cy
+            .wrap(wrapper)
+            .as('vue');
+    });
 });

cypress/support/component-index.html

@@ -1,12 +1,20 @@
+<!-- eslint-disable @html-eslint/require-meta-description -->
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Components App</title>
-  </head>
-  <body>
-    <div data-cy-root></div>
-  </body>
-</html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <meta
+            content="IE=edge"
+            http-equiv="X-UA-Compatible"
+        >
+        <meta
+            content="width=device-width,initial-scale=1.0"
+            name="viewport"
+        >
+        <title>Components App</title>
+    </head>
+    <body>
+        <!-- eslint-disable-next-line @html-eslint/require-attrs -->
+        <div data-cy-root></div>
+    </body>
+</html>

cypress/support/component.ts

@@ -14,7 +14,6 @@
 // ***********************************************************
 
 import '@src/styles/base/_index.scss';
-
 // Import commands.js using ES2015 syntax:
 import './commands/vue';
 import './commands/select';