[All] Migrate ESLint configs to flat config

.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,16 @@
       { "pattern": "./packages/*/" },
       { "pattern": "./projects/*/" }
     ],
+    "eslint.useFlatConfig": true,
+    "eslint.validate": [
+      "javascript",
+      "typescript",
+      "vue",
+      "html"
+    ],
+    "eslint.lintTask.enable": true,
+    "eslint.run": "onType",
+    "eslint.packageManager": "pnpm",
     "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,6 @@
 /* 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,10 +1,8 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-export function emptyObject(target: Record<any, any>): void {
+export function emptyObject(target: Record<string, unknown>): void {
   Object.keys(target).forEach((key) => delete target[key]);
 }
 
-export function emptyNumberKeyObject(target: Record<number, any>): void {
+export function emptyNumberKeyObject(target: Record<number, unknown>): void {
   Object.keys(target).forEach((key) => delete target[parseInt(key)]);
 }
 

packages/Common/src/utils/index.ts

@@ -1,7 +1,8 @@
-export type MutualExclusive<TInterface,
-                            TKey1 extends keyof TInterface,
-                            TKey2 extends keyof TInterface>
-  =  (({ [key in TKey1]: TInterface[key] } & { [key in TKey2]?: never })
+export type MutualExclusive<
+  TInterface,
+  TKey1 extends keyof TInterface,
+  TKey2 extends keyof TInterface,
+> = (({ [key in TKey1]: TInterface[key] } & { [key in TKey2]?: never })
     | ({ [key in TKey2]: TInterface[key] } & { [key in TKey1]?: never }))
     & Omit<TInterface, TKey1 | TKey2>;
 

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/booth/member/BoothMemberItem.vue

@@ -44,7 +44,7 @@ import { useDisplay } from "vuetify";
 export default class BoothMemberItem extends Vue {
   @Prop({ type: Object,  required: true }) readonly memberData!: IBoothMember;
   @Prop({ type: Boolean, default: false }) readonly editable!: boolean;
-  @Prop({ type: Function, default: (s: any) => s }) readonly imageUrlResolver!: (rawImageUrl?: string | null) => string | null | undefined;
+  @Prop({ type: Function, default: (s: string) => s }) readonly imageUrlResolver!: (rawImageUrl?: string | null) => string | null | undefined;
 
   @Setup(() => useDisplay().smAndUp)
   declare smAndUp: boolean;

packages/CommonUI/src/components/dialogs/common/CommonErrorDialog.vue

@@ -32,7 +32,7 @@ export default class CommonErrorDialog extends Vue {
   @Prop({ type: String, default: "green" }) accentColor!: string;
   @Prop({ type: Boolean, default: true }) showReloadButton!: boolean;
   @Prop({ type: Boolean, default: true }) showContacts!: boolean;
-  @Prop({ type: Boolean, default: true }) closeable!: Boolean;
+  @Prop({ type: Boolean, default: true }) closeable!: boolean;
 
   get developerTwitterHandle(): string {
     return `@${DEVELOPER_TWITTER_HANDLE}`;

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({})
@@ -104,7 +104,7 @@ export default class GlobalSnackbarStack extends Vue {
   }
 
   getNormalizedProps(context: ISnackbarContext) {
-    let props: ISnackbarContext | Record<string, any> = {
+    let props: ISnackbarContext | Record<string, any> = {  // eslint-disable-line @typescript-eslint/no-explicit-any
       /* Defaults */
       location: "top right",
       timeout: 5000,

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,
+];