all: WIP migrate ESLint legacy configs to flat config

Need keep testing that it's working

VSCode ESLint extension should be updated to latest insider version I guess,
and the extension seems stop working sometimes...
Don't restart ESLint server in VSCode, or it will stop working after that until restart VSCode..?

.vscode/extensions.json

@@ -1,7 +1,9 @@
 {
   "recommendations": [
     "dbaeumer.vscode-eslint",
-    "Vue.vscode-typescript-vue-plugin"
+    "Vue.volar",
+    "EditorConfig.EditorConfig",
+    "Orta.vscode-jest"
   ],
   "unwantedRecommendations": [
     "svelte.svelte-vscode"

MyBoothManager.code-workspace

@@ -12,6 +12,10 @@
       "name": "[packages] Common UI",
       "path": "packages/CommonUI"
     },
+    {
+      "name": "[packages] Dev Shared",
+      "path": "packages/DevShared"
+    },
     {
       "name": "[packages] I18n",
       "path": "packages/I18n"
@@ -34,6 +38,15 @@
       { "pattern": "./packages/*/" },
       { "pattern": "./projects/*/" }
     ],
+    "eslint.useFlatConfig": true,
+    "eslint.validate": [
+      "javascript",
+      "typescript",
+      "vue",
+      "html"
+    ],
+    "eslint.lintTask.enable": true,
+    "eslint.run": "onType",
     "typescript.tsdk": "node_modules/typescript/lib"
 	}
 }

README.md

@@ -58,6 +58,10 @@ This is an in-development project for **managing booths and goods**, recording o
   $ pnpm all:version minor  # or major, patch
   ```
 
+### Misc
+* In [root `package.json`](package.json), [`@myboothmanager/dev-shared`](packages/DevShared/) is registered as dev dependency. <br />
+  This is intended, and is mandatory to make VSCode ESLint plugin work properly in sub-projects which extends the shared ESLint config.
+
 ## Copyright & License
 Copyright © 2023- **[somni](https://github.com/somnisomni)**, All rights reserved.
 

package.json

@@ -22,12 +22,9 @@
     "test:cov": "pnpm jest --coverage"
   },
   "devDependencies": {
+    "@myboothmanager/dev-shared": "workspace:^",
     "@types/node": "^20.14.2",
-    "@typescript-eslint/parser": "^7.12.0",
     "concurrently": "^8.2.2",
-    "eslint": "^8",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
     "jest": "^29.7.0",
     "ts-jest": "^29.1.4",
     "typescript": "^5.4.5"

packages/Common/eslint.config.mjs

@@ -0,0 +1,5 @@
+import { eslintConfigs } from "@myboothmanager/dev-shared";
+
+export default [
+  ...eslintConfigs.typescript,
+];

packages/Common/jest.config.cjs

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-var-requires */
 const { JestConfigWithTsJest, pathsToModuleNameMapper } = require("ts-jest");
 const { compilerOptions } = require("./tsconfig.json");
 

packages/Common/package.json

@@ -12,22 +12,19 @@
     "build:esm": "tsc -p tsconfig.build.esm.json && tsc-alias -p tsconfig.build.esm.json",
     "build:cjs": "tsc -p tsconfig.build.cjs.json && tsc-alias -p tsconfig.build.cjs.json",
     "clean": "rimraf ./dist",
-    "lint": "eslint",
+    "lint": "eslint .",
     "test": "jest"
   },
   "files": [
     "./dist"
   ],
   "devDependencies": {
+    "@myboothmanager/dev-shared": "workspace:^",
     "@rushstack/eslint-patch": "^1.10.3",
     "@tsconfig/node20": "^20.1.4",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.2",
-    "@typescript-eslint/eslint-plugin": "^7.12.0",
-    "@typescript-eslint/parser": "^7.12.0",
-    "eslint": "^8",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint": "^9.4.0",
     "execa": "^9.2.0",
     "jest": "^29.7.0",
     "rimraf": "^5.0.7",

packages/Common/src/interfaces/goods-combination.ts

@@ -1,5 +1,3 @@
-/* eslint-disable import/exports-last */
-
 import { GoodsStockVisibility, IGoodsCommon, IGoodsFrontendCommon, IGoodsStock } from "./goods";
 
 /* === Common === */

packages/Common/src/interfaces/goods.ts

@@ -1,5 +1,3 @@
-/* eslint-disable import/exports-last */
-
 import { IImageUploadInfo } from "./base";
 
 /* === Common === */

packages/Common/src/utils/functions.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 export function emptyObject(target: Record<any, any>): void {
   Object.keys(target).forEach((key) => delete target[key]);
 }

packages/Common/tsconfig.build.cjs.json

@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["./dist", "node_modules", "**/__tests__/**"],
+  "exclude": ["./dist", "./node_modules", "**/__tests__/**"],
   "compilerOptions": {
     "outDir": "./dist/cjs",
     "module": "CommonJS",

packages/Common/tsconfig.build.esm.json

@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["./dist", "node_modules", "**/__tests__/**"],
+  "exclude": ["./dist", "./node_modules", "**/__tests__/**"],
   "compilerOptions": {
     "outDir": "./dist/esm",
     "module": "ESNext",

packages/CommonUI/eslint.config.mjs

@@ -0,0 +1,5 @@
+import { eslintConfigs } from "@myboothmanager/dev-shared";
+
+export default [
+  ...eslintConfigs.vue,
+];

packages/CommonUI/package.json

@@ -10,7 +10,7 @@
     "clean": "rimraf ./dist",
     "build-only": "vite build && vue-tsc -p tsconfig.app.json --emitDeclarationOnly",
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+    "lint": "eslint ."
   },
   "files": [
     "./dist"
@@ -20,15 +20,15 @@
   "module": "./dist/common-ui.js",
   "devDependencies": {
     "@mdi/font": "^7.4.47",
+    "@myboothmanager/dev-shared": "workspace:^",
     "@myboothmanager/common": "workspace:^",
     "@rushstack/eslint-patch": "^1.10.3",
     "@tsconfig/node20": "^20.1.4",
     "@types/clone-deep": "^4.0.4",
     "@types/node": "^20.14.2",
     "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.1",
-    "eslint": "^8",
+    "eslint": "^9.4.0",
     "eslint-plugin-vue": "^9.26.0",
     "npm-run-all2": "^6.2.0",
     "rimraf": "^5.0.7",

packages/CommonUI/src/components/global/GlobalSnackbarStack.vue

@@ -27,8 +27,8 @@
 </template>
 
 <script lang="ts">
-import type { ISnackbarContext } from "@/entities";
 import type { VSnackbar } from "vuetify/components";
+import type { ISnackbarContext } from "@/entities";
 import { Component, Model, Ref, Vue, Watch } from "vue-facing-decorator";
 
 @Component({})

packages/CommonUI/src/components/goods/GoodsListView.vue

@@ -78,7 +78,7 @@ export default class GoodsListView extends Vue {
   @Prop({ type: Boolean, default: false }) readonly omitEmptyGoodsCategory!: boolean;
   @Prop({ type: String, required: true })  readonly currencySymbol!: string;
   @Prop({ type: Boolean, default: false }) readonly categoryEditable!: boolean;
-  @Prop({ type: Function, default: (s: any) => s }) readonly goodsImageUrlResolver!: (rawGoodsImageUrl?: string) => string | null | undefined;
+  @Prop({ type: Function, default: (s: string) => s }) readonly goodsImageUrlResolver!: (rawGoodsImageUrl?: string) => string | null | undefined;
 
   get goodsListAdjusted(): Array<Goods> {
     if(!this.goodsList) {

packages/CommonUI/src/entities/ui-context/snackbar.ts

@@ -3,15 +3,15 @@ import { ref, type Ref } from "vue";
 /* Part of https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14 */
 const block = ["top", "bottom"] as const;
 const inline = ["start", "end", "left", "right"] as const;
-type Tblock = typeof block[number]
-type Tinline = typeof inline[number]
+type Tblock = typeof block[number];
+type Tinline = typeof inline[number];
 type VuetifyAnchor =
   | Tblock
   | Tinline
   | "center"
   | "center center"
   | `${Tblock} ${Tinline | "center"}`
-  | `${Tinline} ${Tblock | "center"}`
+  | `${Tinline} ${Tblock | "center"}`;
 
 export interface ISnackbarContext {
   id: string;
@@ -32,7 +32,7 @@ export interface ISnackbarContext {
 }
 
 export class SnackbarContextWrapper {
-  private _contexts: Array<ISnackbarContext> = new Array();
+  private _contexts: Array<ISnackbarContext> = [];
 
   get contexts(): Ref<Array<ISnackbarContext>> {
     return ref(this._contexts);

packages/DevShared/eslint.config.mjs

@@ -0,0 +1,5 @@
+import { eslintConfigs } from "./eslint/index.mjs";
+
+export default [
+  ...eslintConfigs.typescript,
+];

packages/DevShared/eslint/additional.mjs

@@ -0,0 +1,13 @@
+/** @type {import("eslint").Linter.FlatConfig} */
+export default {
+  name: "@myboothmanager/dev-shared eslint - additional rules",
+  rules: {
+    "eqeqeq": ["error", "always", { null: "ignore" }],
+    "quote-props": ["error", "consistent-as-needed"],
+    "arrow-body-style": ["error", "as-needed"],
+    "semi-spacing": ["error", {
+      before: false,
+      after: true,
+    }],
+  }
+};

packages/DevShared/eslint/import.mjs

@@ -0,0 +1,37 @@
+import importPlugin from "eslint-plugin-import";
+import { fixupPluginRules } from "@eslint/compat";
+import { parser as tsParser } from "typescript-eslint";
+
+/** @type {import("eslint").Linter.FlatConfig} */
+export default {
+  files: ["**/*.(m|c)?(t|j)s", "**/*.vue"],
+  plugins: {
+    import: fixupPluginRules(importPlugin),
+  },
+  settings: {
+    ...importPlugin.configs.typescript.settings,
+    "import/resolver": {
+      typescript: true,
+      node: true,
+    },
+  },
+  languageOptions: {
+    parserOptions: {
+      parser: tsParser,
+      ecmaVersion: "latest",
+      sourceType: "module",
+    },
+  },
+  rules: {
+    // Import plugin rules
+    ...importPlugin.configs.recommended.rules,
+    ...importPlugin.configs.typescript.rules,
+    "import/namespace": "off",
+    "import/order": [ "error", {
+      groups: ["type", "builtin", "external", "internal", "parent", "sibling", "index", "object"],
+    }],
+    "import/first": "error",
+    "import/newline-after-import": "error",
+    "import/exports-last": "error",
+  },
+};