feat: html,css lint, zed config, perfectionist

.vscode/settings.json

@@ -3,14 +3,14 @@
     "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": [
-    "typescript",
-    "typescriptreact",
+    "css",
+    "html",
     "javascript",
     "json",
     "jsonc",
+    "typescript",
+    "typescriptreact",
     "yaml"
   ],
-  "files.associations": {
-    "*.css": "tailwindcss"
-  }
+  "css.customData": ["./.vscode/tailwind.json"]
 }

.vscode/tailwind.json

@@ -0,0 +1,14 @@
+{
+  "atDirectives": [
+    {
+      "name": "@theme",
+      "description": "Use the @theme directive to define your project's custom design tokens, like fonts, colors, and breakpoints.",
+      "references": [
+        {
+          "name": "Tailwind's “Functions & Directives” documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive"
+        }
+      ]
+    }
+  ]
+}

.zed/settings.json

@@ -0,0 +1,26 @@
+{
+  "disable_ai": true,
+  "code_actions_on_format": {
+    "source.fixAll.eslint": true
+  },
+  "languages": {
+    "CSS": {
+      "language_servers": ["eslint", "tailwindcss-language-server"]
+    },
+    "HTML": {
+      "formatter": [{ "code_action": "source.fixAll.eslint" }],
+      "language_servers": ["eslint", "vscode-html-language-server"]
+    },
+    "JSONC": {
+      "formatter": [{ "code_action": "source.fixAll.eslint" }],
+      "language_servers": ["eslint", "json-language-server"]
+    },
+    "JSON": {
+      "formatter": [{ "code_action": "source.fixAll.eslint" }],
+      "language_servers": ["eslint", "json-language-server"]
+    },
+    "YAML": {
+      "language_servers": ["eslint", "yaml-language-server"]
+    }
+  }
+}

env.d.ts

@@ -2,10 +2,10 @@
 /// <reference types="vitest" />
 /// <reference types="@testing-library/jest-dom/vitest" />
 
-interface ImportMetaEnv {
-  readonly BASE?: string;
-}
-
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
+
+interface ImportMetaEnv {
+  readonly BASE?: string;
+}

eslint.config.ts

@@ -1,30 +1,21 @@
-import eslint from '@eslint/js';
+/* eslint-disable import-x/no-named-as-default-member */
 import { includeIgnoreFile } from '@eslint/compat';
-import { defineConfig, globalIgnores } from 'eslint/config';
-import { configs as tseslintConfigs } from 'typescript-eslint';
+import css from '@eslint/css';
+import eslint from '@eslint/js';
+import html from '@html-eslint/eslint-plugin';
+import stylistic from '@stylistic/eslint-plugin';
+import { importX } from 'eslint-plugin-import-x';
+import jsonc from 'eslint-plugin-jsonc';
 import jsxA11y from 'eslint-plugin-jsx-a11y';
-import solidTsConfig from 'eslint-plugin-solid/configs/typescript';
+import perfectionist from 'eslint-plugin-perfectionist';
 import prettierRecommended from 'eslint-plugin-prettier/recommended';
-import jsonc from 'eslint-plugin-jsonc';
+import solidTsConfig from 'eslint-plugin-solid/configs/typescript';
 import yml from 'eslint-plugin-yml';
-import { importX } from 'eslint-plugin-import-x';
-import stylistic from '@stylistic/eslint-plugin';
+import { defineConfig, globalIgnores } from 'eslint/config';
 import { fileURLToPath } from 'node:url';
-import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript';
+import tseslint from 'typescript-eslint';
 
 export default defineConfig(
-  eslint.configs.recommended,
-  tseslintConfigs.strictTypeChecked,
-  tseslintConfigs.stylisticTypeChecked,
-  jsxA11y.flatConfigs.strict,
-  // @ts-expect-error Argument of type is not assignable to parameter of type 'InfiniteArray<ConfigWithExtends>'ts(2345)
-  solidTsConfig,
-  importX.flatConfigs.recommended,
-  importX.flatConfigs.typescript,
-  stylistic.configs.customize({
-    semi: true,
-  }),
-  prettierRecommended,
   includeIgnoreFile(fileURLToPath(new URL('.gitignore', import.meta.url))),
   globalIgnores(['pnpm-lock.yaml']),
   {
@@ -34,26 +25,76 @@ export default defineConfig(
         ecmaFeatures: {
           jsx: true,
         },
+        extraFileExtensions: ['.css'],
         projectService: true,
         tsconfigRootDir: import.meta.dirname,
       },
     },
+  },
+  {
+    extends: [
+      eslint.configs.recommended,
+      tseslint.configs.strictTypeChecked,
+      tseslint.configs.stylisticTypeChecked,
+      jsxA11y.flatConfigs.strict,
+      // @ts-expect-error Types of property create are incompatible. (ts 2322)
+      solidTsConfig,
+      // @ts-expect-error Types of property languageOptions are incompatible. (ts 2322)
+      importX.flatConfigs.recommended,
+      // @ts-expect-error Types of property languageOptions are incompatible. (ts 2322)
+      importX.flatConfigs.typescript,
+      stylistic.configs.customize({
+        jsx: false,
+        semi: true,
+      }),
+      perfectionist.configs['recommended-natural'],
+      prettierRecommended,
+    ],
+    files: ['**/*.{ts,tsx}'],
     rules: {
       '@typescript-eslint/restrict-template-expressions': [
         'error',
         { allowNumber: true },
       ],
     },
-    settings: {
-      'import-x/resolver-next': [createTypeScriptImportResolver()],
+  },
+  {
+    extends: [
+      jsonc.configs['flat/recommended-with-jsonc'],
+      jsonc.configs['flat/prettier'],
+      prettierRecommended,
+    ],
+    files: ['**/*.json'],
+  },
+  {
+    extends: [
+      yml.configs['flat/recommended'],
+      yml.configs['flat/prettier'],
+      prettierRecommended,
+    ],
+    files: ['**/*.{yml,yaml}'],
+  },
+  {
+    extends: ['css/recommended', prettierRecommended],
+    files: ['**/*.css'],
+    language: 'css/css',
+    plugins: { css },
+    rules: {
+      'css/no-invalid-at-rules': 'off',
     },
   },
-  jsonc.configs['flat/recommended-with-jsonc'],
-  jsonc.configs['flat/prettier'],
-  yml.configs['flat/recommended'],
-  yml.configs['flat/prettier'],
   {
-    files: ['**/*.{json,yml,yaml}'],
-    ...tseslintConfigs.disableTypeChecked,
+    extends: ['html/recommended'],
+    files: ['**/*.html'],
+    language: 'html/html',
+    plugins: { html },
+    rules: {
+      'html/attrs-newline': [
+        'error',
+        { closeStyle: 'newline', ifAttrsMoreThan: 3 },
+      ],
+      'html/indent': ['error', 2],
+      'html/no-trailing-spaces': 'error',
+    },
   },
 );

index.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Solid Clock</title>
-    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg">
   </head>
   <body class="m-0">
     <script type="module" src="/src/index.tsx"></script>

package.json

@@ -14,7 +14,9 @@
   },
   "devDependencies": {
     "@eslint/compat": "2.0.0",
+    "@eslint/css": "0.14.1",
     "@eslint/js": "9.39.2",
+    "@html-eslint/eslint-plugin": "0.52.1",
     "@solidjs/testing-library": "0.8.10",
     "@stylistic/eslint-plugin": "5.7.0",
     "@tailwindcss/vite": "4.1.18",
@@ -28,6 +30,7 @@
     "eslint-plugin-import-x": "4.16.1",
     "eslint-plugin-jsonc": "2.21.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-perfectionist": "5.3.1",
     "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-solid": "0.14.5",
     "eslint-plugin-yml": "1.19.1",