Hello,
I'm Sunnat

Paste this code into .prettierrc

{
  "semi": false,
  "bracketSpacing": true,
  "useTabs": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "arrowParens": "avoid",
  "trailingComma": "es5",
  "printWidth": 250,
  "proseWrap": "never",
  "endOfLine": "auto"
}
											

Paste this code into eslint.config.json

{
  "env": {
	"browser": true,
	"es2021": true
  },
  "extends": [
	"eslint:recommended",
	"plugin:@eslint/js/recommended",
	"plugin:prettier/recommended",
	"plugin:html/recommended"
  ],
  "plugins": [
	"prettier",
	"html"
  ],
  "overrides": [
	{
	  "files": [
		"*.js",
		"*.jsx",
		"*.ts",
		"*.tsx"
	  ],
	  "languageOptions": {
		"globals": {
		  "window": "readonly",
		  "document": "readonly",
		  "navigator": "readonly"
		}
	  },
	  "rules": {
		"prettier/prettier": [
		  "warn",
		  {
			"endOfLine": "auto"
		  }
		]
	  }
	}
  ],
  "rules": {}
}
											

Paste this code into .stylelintrc.json

{
  "extends": [
	"stylelint-config-standard",
	"stylelint-config-standard-scss",
	"stylelint-prettier/recommended"
  ],
  "plugins": [
	"stylelint-prettier", 
	"stylelint-order",
	"stylelint-scss"
  ],
  "rules": {
	"prettier/prettier": true,
	"color-hex-length": "short",
	"order/order": [
	  [
		"dollar-variables",
		"custom-properties",
		"at-rules",
		"declarations",
		{
		  "type": "at-rule",
		  "name": "supports"
		},
		{
		  "type": "at-rule",
		  "name": "media"
		},
		"rules"
	  ],
	  { "severity": "warning" }
	],
	"order/properties-order": [
	  {
		"groupName": "CSSModule",
		"properties": ["composes"],
		"emptyLineBefore": "never"
	  },
	  {
		"groupName": "Positioning",
		"properties": [
		  "position",
		  "z-index",
		  "top",
		  "right",
		  "bottom",
		  "left"
		],
		"emptyLineBefore": "never"
	  },
	  {
		"groupName": "Display",
		"properties": [
		  "display",
		  "grid",
		  "flex",
		  "flex-direction",
		  "align-items",
		  "justify-content",
		  "flex-grow",
		  "flex-shrink",
		  "flex-basis",
		  "grid-gap",
		  "grid-template-columns"
		],
		"emptyLineBefore": "never",
		"noEmptyLineBetween": true
	  },
	  {
		"groupName": "Box model",
		"properties": [
		  "box-sizing",
		  "margin",
		  "margin-top",
		  "margin-right",
		  "margin-bottom",
		  "margin-left",
		  "padding",
		  "padding-top",
		  "padding-right",
		  "padding-bottom",
		  "padding-left",
		  "width",
		  "min-width",
		  "max-width",
		  "height",
		  "min-height",
		  "max-height"
		],
		"emptyLineBefore": "never",
		"noEmptyLineBetween": true
	  },
	  {
		"groupName": "Typography",
		"properties": [
		  "font",
		  "font-family",
		  "font-style",
		  "font-variant",
		  "font-weight",
		  "line-height",
		  "font-size",
		  "color",
		  "letter-spacing",
		  "text-indent",
		  "text-align",
		  "text-decoration",
		  "text-transform",
		  "text-shadow",
		  "text-overflow",
		  "white-space",
		  "word-spacing",
		  "word-break"
		],
		"emptyLineBefore": "never",
		"noEmptyLineBetween": true
	  },
	  {
		"groupName": "Backgrounds",
		"properties": [
		  "background",
		  "background-image",
		  "background-position",
		  "background-size",
		  "background-repeat",
		  "background-origin",
		  "background-clip",
		  "background-attachment",
		  "background-color"
		],
		"emptyLineBefore": "never",
		"noEmptyLineBetween": true
	  },
	  {
		"groupName": "Borders",
		"properties": [
		  "border",
		  "border-top",
		  "border-right",
		  "border-bottom",
		  "border-left",
		  "border-width",
		  "border-top-width",
		  "border-right-width",
		  "border-bottom-width",
		  "border-left-width",
		  "border-style",
		  "border-top-style",
		  "border-right-style",
		  "border-bottom-style",
		  "border-left-style",
		  "border-color",
		  "border-top-color",
		  "border-right-color",
		  "border-bottom-color",
		  "border-left-color",
		  "border-radius",
		  "border-top-right-radius",
		  "border-top-left-radius",
		  "border-bottom-right-radius",
		  "border-bottom-left-radius",
		  "border-collapse"
		],
		"emptyLineBefore": "never",
		"noEmptyLineBetween": true
	  },
	  {
		"groupName": "Others",
		"properties": [
		  "opacity", 
		  "cursor"
		],
		"emptyLineBefore": "never",
		"unspecified": "bottom"
	  }
	]
  },
  "overrides": [
	{
	  "files": ["*.scss"],
	  "rules": {
		"scss/at-each-key-value-single-line": true,
		"scss/at-extend-no-missing-placeholder": true,
		"scss/load-no-partial-leading-underscore": true,
		"scss/load-partial-extension": "always",
		"selector-class-pattern": null,
		"scss/dollar-variable-pattern": null,
		"block-no-empty": null,
		"order/order": null
	  }	
	},
	{
	  "files": ["*.css"],
	  "rules": {
		"prettier/prettier": true,
		"selector-class-pattern": null,
		"no-descending-specificity": null,
		"no-duplicate-selectors": null,
		"value-no-vendor-prefix": null,
		"rule-empty-line-before": null,
		"at-rule-empty-line-before": null,
		"color-function-notation": null,
		"alpha-value-notation": null,
		"property-no-vendor-prefix": null
	  }
	}
  ]
}
											

Paste this code into settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
	"source.fixAll.stylelint": "always",
	"source.fixAll": "always"
  },
  "stylelint.validate": [
	"css",
	"scss"
  ],
  "editor.formatOnSave": true,
  "prettier.requireConfig": true,
  "workbench.iconTheme": "vscode-icons",
  "editor.linkedEditing": true,
  "[html]": {
	"editor.defaultFormatter": null
  },
  "liveServer.settings.donotShowInfoMsg": true,
  "htmlhint.enable": true,
  "htmlhint.documentSelector": [
	"html"

  ],
  "htmlhint.options": {
	"attr-lowercase": true,
	"attr-value-double-quotes": true,
	"attr-no-duplication": true,
	"attr-value-not-empty": true,
	"title-require": true,
	"alt-require": true,
	"attr-unsafe-chars": true,
	"tag-pair": true,
	"tagname-lowercase": true,
	"doctype-first": true,
	"tag-self-close": false,
	"spec-char-escape": true,
	"style-disabled": true,
	"inline-style-disabled": true,
	"inline-script-disabled": true,
	"head-script-disabled": true,
	"id-unique": true,
	"src-not-empty": true,
	"space-tab-mixed-disabled": true,
	"doctype-html5": true,
	"input-requires-label": true
  },
  "workbench.editor.enablePreview": false,
  "vscode-edge-devtools.webhintInstallNotification": true,
  "git.autofetch": true,
  "workbench.editorAssociations": {
	"*.scss": "default"
  }
}