🛠️ [Eslint] Switch to flat config (#84)

.changeset/small-seahorses-enjoy.md

@@ -0,0 +1,6 @@
+---
+"website": minor
+"earwurm": minor
+---
+
+Bumped required node and pnpm versions. Also overhauled linting/formatting.

.github/labeler.yml

@@ -1,18 +1,18 @@
 🧰 Dependency:
   - changed-files:
-      - any-glob-to-any-file: 'pnpm-lock.yaml'
+      - any-glob-to-any-file: pnpm-lock.yaml
 
 📚 Documentation:
   - changed-files:
-      - any-glob-to-any-file: ['README.md', 'docs/**']
+      - any-glob-to-any-file: [README.md, 'docs/**']
 
 ⚖️ Legal:
   - changed-files:
-      - any-glob-to-any-file: 'LICENSE'
+      - any-glob-to-any-file: LICENSE
 
 🔖 Release:
   - changed-files:
-      - any-glob-to-any-file: 'CHANGELOG.md'
+      - any-glob-to-any-file: CHANGELOG.md
 
 🧪 Testing:
   - changed-files:
@@ -21,23 +21,21 @@
 🛠️ Tooling:
   - changed-files:
       - any-glob-to-any-file:
-          [
-            '.github/**',
-            '.vscode/**',
-            '.editorconfig',
-            '.eslintignore',
-            '.eslintrc',
-            '.eslintrc.cjs',
-            '.gitignore',
-            '.npmignore',
-            '.nvmrc',
-            '.prettierignore',
-            '.prettierrc',
-            'config/**',
-            'package.json',
-            'tsconfig.json',
-            'tsconfig.*.json',
-            'vite.config.ts',
-            '**/*/env.d.ts',
-            '**/*/lightningcss-plugins.ts',
-          ]
+          - '.github/**'
+          - '.vscode/**'
+          - .editorconfig
+          - .eslintignore
+          - .eslintrc
+          - .eslintrc.cjs
+          - .gitignore
+          - .npmignore
+          - .nvmrc
+          - .prettierignore
+          - .prettierrc
+          - 'config/**'
+          - package.json
+          - tsconfig.json
+          - 'tsconfig.*.json'
+          - vite.config.ts
+          - '**/*/env.d.ts'
+          - '**/*/lightningcss-plugins.ts'

.github/workflows/deploy.yml

@@ -16,7 +16,7 @@ permissions:
 
 # Allow one concurrent deployment.
 concurrency:
-  group: 'pages'
+  group: pages
   cancel-in-progress: true
 
 # This workflow is adapted from:
@@ -37,8 +37,8 @@ jobs:
       - name: 🔧 Setup Node 20.x
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
+          node-version-file: .nvmrc
+          cache: pnpm
 
       - name: 📦 Install dependencies
         run: pnpm i
@@ -52,7 +52,7 @@ jobs:
       - name: 📈 Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: './app/website/dist'
+          path: ./app/website/dist
 
       - name: 📱 Deploy to GitHub Pages
         id: deployment

.github/workflows/lint.yml

@@ -16,8 +16,8 @@ jobs:
       - name: 🔧 Setup Node 20.x
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
+          node-version-file: .nvmrc
+          cache: pnpm
 
       - name: 📦 Install dependencies
         run: pnpm i

.github/workflows/release.yml

@@ -21,8 +21,8 @@ jobs:
       - name: 🔧 Setup Node 20.x
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
+          node-version-file: .nvmrc
+          cache: pnpm
 
       - name: 📦 Install dependencies
         run: pnpm i

.github/workflows/test.yml

@@ -16,8 +16,8 @@ jobs:
       - name: 🔧 Setup Node 20.x
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
+          node-version-file: .nvmrc
+          cache: pnpm
 
       - name: 📦 Install dependencies
         run: pnpm i

.nvmrc

@@ -1 +1 @@
-20.12
+22.4

.vscode/extensions.json

@@ -10,7 +10,7 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "vue.volar",
-    "csstools.postcss",
-    "stylelint.vscode-stylelint"
-  ]
+    "csstools.postcss"
+  ],
+  "unwantedRecommendations": []
 }

.vscode/settings.json

@@ -1,11 +1,15 @@
 {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+
+  /*
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "eslint.validate": ["javascript", "typescript", "vue"],
-  "stylelint.enable": true,
+  */
+
+  "eslint.useFlatConfig": true,
   "typescript.tsdk": "./node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "files.exclude": {
@@ -17,5 +21,55 @@
     "**/node_modules": true,
     "lib": true,
     "dist/": true
-  }
+  },
+
+  // Ant-fu
+  // https://github.com/antfu/eslint-config
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silence the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "css",
+    "scss",
+    "pcss",
+    "postcss"
+  ]
 }

README.md

@@ -1,6 +1,7 @@
 # Earwurm
 
 [![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)
+[![Mutable.ai Auto Wiki](https://img.shields.io/badge/Auto_Wiki-Mutable.ai-blue)](https://wiki.mutable.ai/beefchimi/earwurm)
 
 > `Earwurm` is a minimal-scope library for managing `webm` audio files using the [`Web Audio API`](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API).
 
@@ -25,6 +26,8 @@ pnpm add earwurm
 
 **Initializing a global instance:**
 
+<!-- eslint-skip -->
+
 ```ts
 import {Earwurm, type ManagerConfig} from 'earwurm';
 

app/README.md

@@ -4,21 +4,4 @@ All marketing and demo apps are located in this folder.
 
 ## Eslint
 
-At the moment, we are allowing each `app` to manage their own `eslint` config. We may later decide to move this to the root level `.eslintrc`. If so, we should be able to clearly specify `Vue` config like so:
-
-```json
-"overrides": [
-  {
-    "files": "*.vue",
-    "parser": "vue-eslint-parser",
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended",
-      "@vue/eslint-config-typescript",
-      "@vue/eslint-config-prettier/skip-formatting",
-    ],
-    "plugins": [],
-    "rules": {}
-  }
-],
-```
+At the moment, we are linting/formatting the entire monorepo from the root `eslint.config.mjs`. In the future, we may use a dedicated `/websites/eslint.config.mjs`.

app/website/README.md

@@ -1,3 +1,63 @@
 # Earwurm app
 
 This repo hosts the website for the `earwurm` project.
+
+## TsConfig
+
+Originally, we isolated the `app` vs `node` configs. This had to be changed however because of the following bug: <https://github.com/antfu/eslint-config/issues/564>
+
+As a result, the following packages were removed:
+
+```json
+{
+  "@tsconfig/node20": "^20.1.4",
+  "@vue/tsconfig": "^0.5.1"
+}
+```
+
+### Record keeping
+
+In case we ever restore the original `tsconfig`:
+
+#### tsconfig.app.json
+
+```json
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"]
+}
+```
+
+#### tsconfig.node.json
+
+```json
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "types": ["node"]
+  },
+  "include": ["lightningcss-plugins.ts", "vite.config.ts"]
+}
+```
+
+#### tsconfig.json
+
+```json
+{
+  "references": [
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.app.json" }
+  ],
+  "files": []
+}
+```