#10 Adding antfu's configs and tweaking them a little.

Author: ackzell

README.md

@@ -12,7 +12,7 @@ Most notably, it doesn't allow for switching Vue versions nor it displays the co
 
 ### As part of [amoxtli-vue](https://github.com/ackzell/amoxtli-vue)
 
-This is the playground that will load into a preview pane in the `amoxtli-vue` project. 
+This is the playground that will load into a preview pane in the `amoxtli-vue` project.
 It reads the different [code files in the lessons](https://tutorialkit.dev/guides/creating-content/#a-lesson-code) provided from that repo and loads them into the monaco editor to interact with them.
 
 ![screenshot](docs/amoxtli-integration.png)

eslint.config.ts

@@ -1,22 +1,51 @@
-import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
-import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
-import pluginVue from 'eslint-plugin-vue'
-import { globalIgnores } from 'eslint/config'
+import antfu from '@antfu/eslint-config';
 
-// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
-// import { configureVueProject } from '@vue/eslint-config-typescript'
-// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
-// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
-
-export default defineConfigWithVueTs(
-  {
-    name: 'app/files-to-lint',
-    files: ['**/*.{ts,mts,tsx,vue}'],
+export default antfu({
+  type: 'lib',
+  stylistic: {
+    indent: 2,
+    quotes: 'single',
+    semi: true,
   },
+  typescript: true,
+  vue: true,
+  jsonc: false,
+  yaml: false,
+  ignores: [
+    '**/fixtures',
+  ],
+}, {
+  // Additional config for more specific rules
+  files: ['**/*.vue', '**/*.ts', '**/*.tsx', '**/*.js'],
+  rules: {
+    // TypeScript unused vars with underscore ignore pattern
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
 
-  globalIgnores(['**/public/**', '**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+    // Vue template formatting
+    'vue/max-attributes-per-line': [
+      'warn', // Use 'warn' instead of 'error' for less strict enforcement
+      {
+        singleline: 3,
+        multiline: 2,
+      },
+    ],
+    'vue/first-attribute-linebreak': ['warn', {
+      singleline: 'ignore',
+      multiline: 'below',
+    }],
+    'vue/html-closing-bracket-newline': ['warn', {
+      singleline: 'never',
+      multiline: 'always',
+    }],
 
-  pluginVue.configs['flat/essential'],
-  vueTsConfigs.recommended,
-  skipFormatting,
-)
+    'vue/custom-event-name-casing': ['error', 'kebab-case'],
+    'node/prefer-global/process': ['warn'],
+    'no-console': ['warn'],
+  },
+});

package.json

@@ -25,6 +25,7 @@
     "vue": "^3.5.18"
   },
   "devDependencies": {
+    "@antfu/eslint-config": "^5.2.1",
     "@tsconfig/node22": "^22.0.2",
     "@types/node": "^22.16.5",
     "@vitejs/plugin-vue": "^6.0.1",