chore: Use Nuxt3 offical starter instead of sidebase/merino (#36)

Author: zoey-kaiser

.eslintrc

@@ -10,36 +10,73 @@ jobs:
   testCodebase:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
+      - name: Use Node.js 20.6.1
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.6.1
 
-      - name: Use Node.js 16.14.2
-        uses: actions/setup-node@v3
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        id: pnpm-install
         with:
-          node-version: 16.14.2
+          version: 8
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-      - run: npm ci
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
-      - run: npm run lint
-      - run: npm run typecheck
+      - run: pnpm install
+
+      - run: pnpm run lint
+      - run: pnpm run typecheck
 
   testCli:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js 16.14.2
-        uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - name: Use Node.js 20.6.1
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.6.1
+
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 8
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
         with:
-          node-version: 16.14.2
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
-      - run: npm ci
-      - run: npm run dev -- -- --ci
+      - run: pnpm install
+      - run: pnpm dev:ci
 
       # This is what the user would do, minus actually starting the application
       - run: cd my-sidebase-app && npx prisma db push
 
       # code should be 100% correct at the start
-      - run: cd my-sidebase-app && npm run lint
-      - run: cd my-sidebase-app && npm exec nuxi prepare && npm run typecheck
+      - run: cd my-sidebase-app && pnpm lint
+      - run: cd my-sidebase-app && npm exec nuxi prepare && pnpm run typecheck
 
       # start dev-app, all of the following adapted from https://stackoverflow.com/a/60996259
       - run: "cd my-sidebase-app && timeout 30 npm run dev || ( [[ $? -eq 124 ]] && echo \"app started and did not exit within first 30 seconds, thats good\" )"

.github/workflows/ci.yaml

@@ -1,7 +1,5 @@
 {
   "recommendations": [
     "editorconfig.editorconfig",
-    "dbaeumer.vscode-eslint",
-    "vue.volar"
   ]
 }

.vscode/extensions.json

@@ -1,22 +1,45 @@
 {
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
-  "[vue]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  },
-  "[js]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  },
-  "[ts]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
   },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "format/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
   "eslint.validate": [
     "javascript",
+    "javascriptreact",
     "typescript",
-    "vue"
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "gql",
+    "graphql"
   ]
 }

.vscode/settings.json

@@ -0,0 +1,39 @@
+import antfu from '@antfu/eslint-config'
+
+const ignores = [
+  '.nuxt',
+  '**/.nuxt/**',
+  '.output',
+  '**/.output/**',
+  'node_modules',
+  '**/node_modules/**',
+  'public',
+  '**/public/**',
+]
+
+export default antfu({
+  // .eslintignore is no longer supported in Flat config, use ignores instead
+  ignores,
+
+  // Stylistic formatting rules
+  stylistic: {
+    indent: 2,
+    quotes: 'single',
+  },
+
+  // TypeScript and Vue are auto-detected, you can also explicitly enable them
+  typescript: true,
+  vue: true,
+
+  // Disable jsonc and yaml support
+  jsonc: false,
+  yaml: false,
+
+  // Overwrite certain rules to your preference
+  rules: {
+    'no-console': 'off',
+    'style/comma-dangle': 'off',
+    'curly': ['error', 'all'],
+    'node/prefer-global/process': ['error', 'always'],
+  },
+})