chore: add prettier config to eslint (#200)

.prettierrc.mjs

@@ -6,6 +6,7 @@ import defaultConfig from '@epic-web/config/prettier';
  */
 const config = {
   ...defaultConfig,
+  plugins: ['prettier-plugin-tailwindcss'],
   printWidth: 100,
   semi: true,
   trailingComma: 'es5',

.stylelintrc.cjs

@@ -4,6 +4,7 @@ module.exports = {
     'stylelint-config-standard',
     'stylelint-config-html/html',
     'stylelint-config-html/astro',
+    'stylelint-prettier/recommended',
   ],
   rules: {
     'unit-allowed-list': [

.vscode/extensions.json

@@ -1,4 +1,10 @@
 {
-  "recommendations": ["astro-build.astro-vscode"],
+  "recommendations": [
+    "astro-build.astro-vscode",
+    "esbenp.prettier-vscode",
+    "foxundermoon.shell-format",
+    "stylelint.vscode-stylelint",
+    "unifiedjs.vscode-mdx"
+  ],
   "unwantedRecommendations": []
 }

.vscode/settings.json

@@ -1,20 +1,31 @@
 {
-  "editor.tabSize": 2,
-  "editor.insertSpaces": true,
-  "editor.renderWhitespace": "boundary",
-  "editor.rulers": [100],
+  "editor.rulers": [120],
   "editor.formatOnSave": true,
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always",
+    "source.fixAll": "always"
+  },
+  "eslint.validate": ["astro", "javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "files.eol": "\n",
   "files.encoding": "utf8",
   "files.trimTrailingWhitespace": true,
   "files.insertFinalNewline": true,
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "css.validate": false,
-  "stylelint.enable": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "dotenv.enableAutocloaking": true,
+  "stylelint.validate": ["astro", "css"],
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
   "[astro]": {
-    "editor.defaultFormatter": "astro-build.astro-vscode"
+    "editor.defaultFormatter": "astro-build.astro-vscode",
+    "editor.formatOnSave": true
+  },
+  "[css]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.stylelint": "always"
+    }
   },
   "[dotenv]": {
     "editor.defaultFormatter": "foxundermoon.shell-format"

eslint.config.mjs

@@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url';
 import { config as defaultConfig } from '@epic-web/config/eslint';
 import { FlatCompat } from '@eslint/eslintrc';
 import js from '@eslint/js';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import globals from 'globals';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -15,6 +16,7 @@ const compat = new FlatCompat({
 
 export default [
   ...defaultConfig,
+  eslintPluginPrettierRecommended,
   {
     ignores: ['.astro/*'],
   },

package.json

@@ -7,7 +7,7 @@
     "start": "astro preview",
     "build": "astro check && astro build",
     "preview": "astro preview",
-    "format": "prettier --write \"./src/**/*.{ts,tsx}\" \"./*.{cjs,mjs,js,ts,tsx}\"",
+    "format": "prettier --write \"./src/**/*.{ts,tsx}\" \"./templates/**/*.{cjs,mjs,js,ts,tsx}\" \"./*.{cjs,mjs,js,ts,tsx}\"",
     "lint": "eslint \"**/*.{cjs,mjs,js,jsx,ts,tsx}\"",
     "lint:fix": "eslint --fix \"**/*.{cjs,mjs,js,jsx,ts,tsx}\"",
     "astro": "astro",
@@ -60,15 +60,19 @@
     "@types/webfontloader": "^1.6.38",
     "eslint": "^9.18.0",
     "eslint-config-gsap": "^3.0.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.3",
     "globals": "^15.14.0",
     "is-ci-cli": "^2.2.0",
     "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "react-intersection-observer": "^9.13.1",
     "react-is": "^18.3.1",
     "stylelint": "^16.11.0",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recommended": "^14.0.1",
     "stylelint-config-standard": "^36.0.1",
+    "stylelint-prettier": "^5.0.3",
     "vitest": "^2.1.8"
   }
 }