Merge pull request #298 from Concordium/frontendeslint

Fix lint config and warnings in code

.github/workflows/frontend-checks.yml

@@ -36,6 +36,6 @@ jobs:
       - name: Check types
         working-directory: frontend
         run: yarn run typecheck
-      # - name: Linting
-      #   working-directory: frontend
-      #   run: yarn run lintcheck
+      - name: Linting
+        working-directory: frontend
+        run: yarn run lintcheck

frontend/eslint.config.mjs

@@ -0,0 +1,29 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+// @ts-expect-error No type definitions for this one.
+import eslintConfigPrettier from 'eslint-config-prettier'
+
+export default withNuxt([
+	// Ignore files generated from the GraphQL schema, and Nuxt output directories.
+	{ ignores: ['src/types/generated.ts', 'dist', '.output'] },
+	// Disable rules conflicting with prettier.
+	eslintConfigPrettier,
+])
+	.override('nuxt/vue/rules', {
+		rules: {
+			'vue/multi-word-component-names': 'off',
+			// Disable check, since this is mostly relevant for older version of Vue (version 2).
+			'vue/no-multiple-template-root': 'off',
+		},
+	})
+	// Reduce certain rules to be warnings instead of errors, since these might
+	// appear during development and are still prevented by the CI.
+	.override('nuxt/typescript/rules', {
+		rules: {
+			'@typescript-eslint/no-unused-vars': 'warn',
+			'@typescript-eslint/no-unused-expressions': 'warn',
+			'@typescript-eslint/consistent-type-imports': 'warn',
+			'@typescript-eslint/no-import-type-side-effects': 'warn',
+		},
+	})
+	.override('nuxt/rules', { rules: { 'no-empty': 'warn' } })

frontend/nuxt.config.ts

@@ -65,4 +65,5 @@ export default defineNuxtConfig({
 		// Enable type-checking at build time.
 		typeCheck: true,
 	},
+	modules: ['@nuxt/eslint'],
 })

frontend/package.json

@@ -14,8 +14,8 @@
 		"test": "cross-env TZ=Universal jest",
 		"test:watch": "cross-env TZ=Universal jest --watch",
 		"typecheck": "nuxi typecheck",
-		"lint": "eslint --fix --max-warnings 0 --ext .js,.ts,.vue .",
 		"lintcheck": "eslint --max-warnings 0 src",
+		"lint": "eslint --max-warnings 0 --fix src",
 		"format": "prettier src --write",
 		"formatcheck": "prettier src --check",
 		"gql-codegen": "graphql-codegen --config graphql-codegen.yml"
@@ -39,25 +39,16 @@
 		"@babel/preset-typescript": "^7.17.12",
 		"@graphql-codegen/cli": "2.6.2",
 		"@graphql-codegen/typescript": "^2.4.11",
-		"@nuxtjs/eslint-config-typescript": "10.0.0",
+		"@nuxt/eslint": "^0.6.1",
 		"@testing-library/jest-dom": "^5.16.4",
 		"@testing-library/vue": "^6.4.2",
 		"@types/jest": "^27",
 		"@types/node": "^16.11.11",
-		"@typescript-eslint/eslint-plugin": "^5.27.0",
-		"@typescript-eslint/parser": "^5.27.0",
-		"@vue/eslint-config-typescript": "^10.0.0",
 		"@vue/vue3-jest": "^28",
 		"autoprefixer": "^10.4.7",
 		"babel-jest": "^28",
-		"eslint": "^8.16.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-jest": "^26.4.6",
-		"eslint-plugin-jest-dom": "^4.0.2",
-		"eslint-plugin-jest-formatting": "^3.1.0",
-		"eslint-plugin-nuxt": "^3.2.0",
-		"eslint-plugin-testing-library": "^5.5.1",
-		"eslint-plugin-vue": "^9.0.1",
+		"eslint": "^9.14.0",
+		"eslint-config-prettier": "^9.1.0",
 		"husky": "^8.0.1",
 		"jest": "^28",
 		"jest-environment-jsdom": "^28.1.0",

frontend/src/components/Accounts/AccountDetailsAccountStatement.vue

@@ -103,11 +103,11 @@
 						><TransactionLink
 							v-if="accountStatementItem.reference.__typename === 'Transaction'"
 							:hash="accountStatementItem.reference.transactionHash"
-						></TransactionLink>
+						/>
 						<BlockLink
 							v-if="accountStatementItem.reference.__typename === 'Block'"
 							:hash="accountStatementItem.reference.blockHash"
-						></BlockLink>
+						/>
 					</TableTd>
 					<TableTd align="right" class="numerical">
 						<Amount :amount="accountStatementItem.amount" />

frontend/src/components/Accounts/AccountDetailsContainer.vue

@@ -22,7 +22,7 @@ import Loader from '~/components/molecules/Loader.vue'
 import NotFound from '~/components/molecules/NotFound.vue'
 import AccountDetailsContent from '~/components/Accounts/AccountDetailsContent.vue'
 import { usePagination, PAGE_SIZE_SMALL } from '~/composables/usePagination'
-import { type Subscription } from '~/types/generated'
+import type { Subscription } from '~/types/generated'
 import { useAccountsUpdatedSubscription } from '~/subscriptions/useAccountsUpdatedSubscription'
 
 type Props = {
@@ -102,7 +102,7 @@ const { data, error, componentState, executeQuery } = useAccountQuery({
 	transactionVariables,
 })
 
-const subscriptionHandler = (_prevData: void, newData: Subscription) => {
+const subscriptionHandler = (_prevData: unknown, newData: Subscription) => {
 	if (
 		newData.accountsUpdated.address === props.address &&
 		componentState.value !== 'loading'

frontend/src/components/Accounts/AccountDetailsContent.vue

@@ -133,8 +133,6 @@ import type { Account, PageInfo } from '~/types/generated'
 import { useDateNow } from '~/composables/useDateNow'
 import type { PaginationTarget } from '~/composables/usePagination'
 import AccountDetailsDelegation from '~/components/Accounts/AccountDetailsDelegation.vue'
-import Tooltip from '~/components/atoms/Tooltip.vue'
-import Amount from '~/components/atoms/Amount.vue'
 import AccountDetailsRewards from '~/components/Accounts/AccountDetailsRewards.vue'
 
 const { NOW } = useDateNow()

frontend/src/components/Accounts/AccountDetailsToken.vue

@@ -73,7 +73,9 @@ watchEffect(() => {
 		.forEach(async t => {
 			try {
 				t.metadata = await fetchMetadata(t.token.metadataUrl as string)
-			} catch {}
+			} catch {
+				return
+			}
 		})
 })
 </script>

frontend/src/components/BakerDetails/BakerDetailsHeader.spec.ts

@@ -1,6 +1,5 @@
 import BakerDetailsHeader from './BakerDetailsHeader.vue'
 import { setupComponent, screen } from '~/utils/testing'
-import { BakerPoolOpenStatus } from '~/types/generated'
 
 jest.mock('~/composables/useDrawer', () => ({
 	useDrawer: () => ({

frontend/src/components/BakerDetails/BakerDetailsPoolAmounts.vue

@@ -2,7 +2,7 @@
 	<Tooltip text-class="text-left">
 		<template #content>
 			<div class="text-theme-body text-sm">
-				<span class="legend"></span>
+				<span class="legend" />
 				Validator:
 				<Amount
 					:amount="amounts.bakerAmount"
@@ -11,7 +11,7 @@
 				/>
 			</div>
 			<div v-if="amounts.delegatorsAmount">
-				<span class="legend legend-green"></span>
+				<span class="legend legend-green" />
 				Delegators:
 				<Amount
 					:amount="amounts.delegatorsAmount"

frontend/src/components/BakerDetails/BakerDetailsPoolContent.spec.ts

@@ -1,12 +1,6 @@
 import { h } from 'vue'
 import BakerDetailsPoolContent from './BakerDetailsPoolContent.vue'
-import {
-	setupComponent,
-	screen,
-	within,
-	fireEvent,
-	waitFor,
-} from '~/utils/testing'
+import { setupComponent, screen, within, fireEvent } from '~/utils/testing'
 import { BakerPoolOpenStatus } from '~/types/generated'
 
 jest.mock('~/composables/useDrawer', () => ({

frontend/src/components/BakerDetails/BakerDetailsPoolRewardsItem.vue

@@ -19,7 +19,7 @@
 			<Tooltip text-class="text-left">
 				<template #content>
 					<div>
-						<span class="legend"></span>
+						<span class="legend" />
 						Validator:
 						<Amount
 							:amount="totalAmounts.baker"
@@ -28,7 +28,7 @@
 						/>
 					</div>
 					<div v-if="reward.bakerReward.delegatorsAmount">
-						<span class="legend legend-green"></span>
+						<span class="legend legend-green" />
 						Delegators:
 						<Amount
 							:amount="totalAmounts.delegators"
@@ -71,8 +71,8 @@
 	</TableRow>
 
 	<TableRow v-if="isOpen">
-		<TableTd v-if="breakpoint >= Breakpoint.SM"></TableTd>
-		<TableTd v-if="breakpoint >= Breakpoint.MD"></TableTd>
+		<TableTd v-if="breakpoint >= Breakpoint.SM" />
+		<TableTd v-if="breakpoint >= Breakpoint.MD" />
 		<TableTd :colspan="breakpoint >= Breakpoint.SM ? 1 : 3" align="right">
 			<div class="block">
 				<DescriptionList class="text-sm text-theme-faded">

frontend/src/components/BakerDetails/BakerDetailsRewards.vue

@@ -103,7 +103,7 @@ import TableTh from '~/components/Table/TableTh.vue'
 import TableRow from '~/components/Table/TableRow.vue'
 import TableBody from '~/components/Table/TableBody.vue'
 import TableHead from '~/components/Table/TableHead.vue'
-import type { Baker, PageInfo } from '~/types/generated'
+import type { PageInfo } from '~/types/generated'
 import { useBakerRewardsQuery } from '~/queries/useBakerRewardsQuery'
 import BlockLink from '~/components/molecules/BlockLink.vue'
 import { useBreakpoint, Breakpoint } from '~/composables/useBreakpoint'

frontend/src/components/BlockDetails/BlockDetailsTransactions.vue

@@ -53,7 +53,6 @@
 
 <script lang="ts" setup>
 import { translateTransactionType } from '~/utils/translateTransactionTypes'
-import { PAGE_SIZE } from '~/composables/usePagination'
 import type { PaginationTarget } from '~/composables/usePagination'
 import { useBreakpoint, Breakpoint } from '~/composables/useBreakpoint'
 import type { PageInfo, Transaction } from '~/types/generated'

frontend/src/components/Charts/ChartBar.vue

@@ -1,12 +1,16 @@
 <template>
 	<div class="relative">
-		<canvas ref="canvasRef"></canvas>
+		<canvas ref="canvasRef" />
 	</div>
 </template>
 <script lang="ts" setup>
-import { Chart, registerables, Scale } from 'chart.js/dist/chart.esm'
-import * as Chartjs from 'chart.js/dist/chart.esm'
-import type { TooltipItem } from 'chart.js'
+import {
+	Chart,
+	registerables,
+	type Scale,
+	type ChartOptions,
+	type TooltipItem,
+} from 'chart.js/dist/chart.esm'
 import type { LabelFormatterFunc } from './ChartUtils'
 import { prettyFormatBucketDuration } from '~/utils/format'
 
@@ -142,11 +146,10 @@ const defaultOptions = ref({
 })
 let chartInstance: Chart
 onMounted(() => {
-	/* eslint-disable no-new */
-	chartInstance = new Chartjs.Chart(canvasRef.value, {
+	chartInstance = new Chart(canvasRef.value, {
 		data: chartData,
 		type: 'bar',
-		options: defaultOptions.value as Chartjs.ChartOptions<'bar'>,
+		options: defaultOptions.value as ChartOptions<'bar'>,
 	})
 })
 </script>

frontend/src/components/Charts/ChartLine.vue

@@ -1,12 +1,16 @@
 <template>
 	<div class="relative">
-		<canvas ref="canvasRef"></canvas>
+		<canvas ref="canvasRef" />
 	</div>
 </template>
 <script lang="ts" setup>
-import { Chart, registerables, Scale } from 'chart.js/dist/chart.esm'
-import * as Chartjs from 'chart.js/dist/chart.esm'
-import type { TooltipItem } from 'chart.js'
+import {
+	Chart,
+	registerables,
+	type Scale,
+	type ChartOptions,
+	type TooltipItem,
+} from 'chart.js/dist/chart.esm'
 import type { LabelFormatterFunc } from './ChartUtils'
 import { prettyFormatBucketDuration } from '~/utils/format'
 type Props = {
@@ -139,11 +143,10 @@ const defaultOptions = ref({
 })
 let chartInstance: Chart
 onMounted(() => {
-	/* eslint-disable no-new */
-	chartInstance = new Chartjs.Chart(canvasRef.value, {
+	chartInstance = new Chart(canvasRef.value, {
 		data: chartData,
 		type: 'line',
-		options: defaultOptions.value as Chartjs.ChartOptions<'line'>,
+		options: defaultOptions.value as ChartOptions<'line'>,
 	})
 })
 </script>

frontend/src/components/Charts/ChartLineArea.vue

@@ -1,11 +1,15 @@
 <template>
 	<div class="relative">
-		<canvas ref="canvasRef"></canvas>
+		<canvas ref="canvasRef" />
 	</div>
 </template>
 <script lang="ts" setup>
-import { Chart, registerables, Scale } from 'chart.js/dist/chart.esm'
-import * as Chartjs from 'chart.js/dist/chart.esm'
+import {
+	Chart,
+	registerables,
+	type ChartOptions,
+	type Scale,
+} from 'chart.js/dist/chart.esm'
 import { onMounted } from 'vue'
 import type { TooltipItem } from 'chart.js'
 import type { LabelFormatterFunc } from './ChartUtils'
@@ -182,11 +186,10 @@ const defaultOptions = ref({
 })
 let chartInstance: Chart
 onMounted(() => {
-	/* eslint-disable no-new */
-	chartInstance = new Chartjs.Chart(canvasRef.value, {
+	chartInstance = new Chart(canvasRef.value, {
 		data: chartData,
 		type: 'line',
-		options: defaultOptions.value as Chartjs.ChartOptions<'line'>,
+		options: defaultOptions.value as ChartOptions<'line'>,
 	})
 })
 </script>

frontend/src/components/Contracts/ContractDetailsTokens.vue

@@ -56,7 +56,9 @@ watchEffect(() => {
 		.forEach(async t => {
 			try {
 				t.metadata = await fetchMetadata(String(t.metadataUrl))
-			} catch {}
+			} catch {
+				return
+			}
 		})
 })
 </script>

frontend/src/components/Contracts/Events/ContractTransfer.vue

@@ -20,5 +20,5 @@ import Amount from '~/components/atoms/Amount.vue'
 type Props = {
 	contractEvent: Transferred
 }
-const props = defineProps<Props>()
+defineProps<Props>()
 </script>

frontend/src/components/Details/DetailsTable.vue

@@ -25,8 +25,8 @@ import PageDropdown from '../PageDropdown.vue'
 import {
 	MIN_PAGE_SIZE,
 	type PageDropdownInfo,
-} from '~~/src/composables/usePageDropdown'
-import type { PaginationOffsetInfo } from '~~/src/composables/usePaginationOffset'
+} from '~/composables/usePageDropdown'
+import type { PaginationOffsetInfo } from '~/composables/usePaginationOffset'
 
 type Props = {
 	totalCount: number