Merge pull request #11 from ackzell/#10-linting-and-formatting

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

Author: ackzell

.github/workflows/pipeline.yml

@@ -0,0 +1,27 @@
+name: Pipeline
+
+on:
+  push:
+    branches: [develop]
+  pull_request:
+    branches: [develop]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  lint:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js from .node-version
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .node-version
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run linter
+        run: pnpm lint

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: true,
+  yaml: true,
+  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

@@ -1,18 +1,20 @@
 {
-  "name": "yehyecoa",
+  "name": "yehyecoa-vue",
+  "type": "module",
   "version": "0.0.0",
   "private": true,
-  "type": "module",
+  "packageManager": "[email protected]",
   "engines": {
-    "node": "^20.19.0 || >=22.12.0"
+    "node": ">=24.5.0"
   },
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" -- && npm run build-server",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
-    "lint": "eslint . --fix",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
     "format": "prettier --write src/",
     "install-in-amoxtli-vue": "cp -r dist/ ../amoxtli-vue/src/templates/yehyecoa",
     "bi": "npm run build && npm run install-in-amoxtli-vue",
@@ -25,6 +27,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",