chore: new eslint rules

Author: KagamiChan

.node-version

@@ -1 +1 @@
-22
+24

eslint.config.mts

@@ -1,11 +1,12 @@
 import js from '@eslint/js'
-import globals from 'globals'
-import tseslint from 'typescript-eslint'
-import pluginReact from 'eslint-plugin-react'
-import { defineConfig, globalIgnores } from 'eslint/config'
+import jsxA11y from 'eslint-plugin-jsx-a11y'
+import perfectionist from 'eslint-plugin-perfectionist'
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import pluginReact from 'eslint-plugin-react'
 import reactHooks from 'eslint-plugin-react-hooks'
-import jsxA11y from 'eslint-plugin-jsx-a11y'
+import { defineConfig, globalIgnores } from 'eslint/config'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
 
 export default defineConfig([
   {
@@ -27,4 +28,17 @@ export default defineConfig([
   reactHooks.configs.flat.recommended,
   jsxA11y.flatConfigs.recommended,
   globalIgnores(['index.js']),
+  {
+    plugins: {
+      perfectionist,
+    },
+    rules: {
+      'perfectionist/sort-imports': 'error',
+    },
+  },
+  {
+    rules: {
+      '@typescript-eslint/consistent-type-imports': 'error',
+    },
+  },
 ])

package.json

@@ -41,6 +41,7 @@
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-perfectionist": "^5.4.0",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",

pnpm-lock.yaml

@@ -1,8 +1,8 @@
-import { APIShip } from 'kcsapi/api_port/port/response'
-import { APIMstShip } from 'kcsapi/api_start2/getData/response'
-import { APIDeckPort } from 'kcsapi/api_port/port/response'
-import { APIGetMemberSlotItemResponse } from 'kcsapi/api_get_member/slot_item/response'
-import { APIGetMemberNdockResponse } from 'kcsapi/api_get_member/ndock/response'
+import type { APIGetMemberNdockResponse } from 'kcsapi/api_get_member/ndock/response'
+import type { APIGetMemberSlotItemResponse } from 'kcsapi/api_get_member/slot_item/response'
+import type { APIShip } from 'kcsapi/api_port/port/response'
+import type { APIDeckPort } from 'kcsapi/api_port/port/response'
+import type { APIMstShip } from 'kcsapi/api_start2/getData/response'
 
 export type RootState = {
   const: {

poi-types.ts

@@ -1,32 +1,32 @@
-import React, { useMemo, useState, useRef } from 'react'
-import { createSelector } from 'reselect'
-import { useSelector } from 'react-redux'
-import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import type { ColumnDef, SortingState } from '@tanstack/react-table'
+import type { APIShip } from 'kcsapi/api_port/port/response'
+import type { APIMstShip } from 'kcsapi/api_start2/getData/response'
+
 import { HTMLTable } from '@blueprintjs/core'
 import {
   useReactTable,
   getCoreRowModel,
   getSortedRowModel,
   flexRender,
-  ColumnDef,
-  SortingState,
 } from '@tanstack/react-table'
 import { useVirtualizer } from '@tanstack/react-virtual'
-import fp from 'lodash/fp'
-import { mapValues, findIndex, includes, map } from 'lodash'
 import chroma from 'chroma-js'
-
+import { mapValues, findIndex, includes, map } from 'lodash'
+import fp from 'lodash/fp'
+import React, { useMemo, useState, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { createSelector } from 'reselect'
+import styled from 'styled-components'
 import {
   repairsSelector,
   fleetShipsIdSelectorFactory,
 } from 'views/utils/selectors'
 import { resolveTime } from 'views/utils/tools'
 
+import type { RootState } from '../poi-types'
+
 import { akashiEstimate, timePerHPCalc } from './functions'
-import { APIShip } from 'kcsapi/api_port/port/response'
-import { APIMstShip } from 'kcsapi/api_start2/getData/response'
-import { RootState } from '../poi-types'
 
 interface EnhancedShip extends APIShip {
   akashi: number

src/candidates.tsx

@@ -1,7 +1,6 @@
 // similar to CountdownTimer in 'views/components/main/parts/countdown-timer.es', but it counts up
 
 import React, { useState, useEffect, useRef } from 'react'
-
 import { resolveTime } from 'views/utils/tools'
 
 interface Ticker {

src/countup-timer.tsx

@@ -1,20 +1,20 @@
+import { HTMLTable, Tag, Callout } from '@blueprintjs/core'
+import _ from 'lodash'
 import React, { useState, useEffect, useCallback, useMemo } from 'react'
-import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
 import styled from 'styled-components'
-import { HTMLTable, Tag, Callout } from '@blueprintjs/core'
 import { Tooltip } from 'views/components/etc/overlay'
-import _ from 'lodash'
 
 import CountupTimer from './countup-timer'
-import { timerState } from './timer-state'
-import ShipRow from './ship-row'
 import {
   createFleetBasicInfoSelector,
   createFleetStatusSelector,
   createFleetRepairCountSelector,
   createFleetRepairDetailSelector,
 } from './fleet-selectors'
+import ShipRow from './ship-row'
+import { timerState } from './timer-state'
 
 interface FleetListProps {
   fleetId: number

src/fleet-list.tsx

@@ -1,13 +1,16 @@
-import { createSelector } from 'reselect'
+import type { APIDeckPort } from 'kcsapi/api_port/port/response'
+
 import _ from 'lodash'
+import { createSelector } from 'reselect'
 import {
   fleetsSelector,
   shipsSelector,
   equipsSelector,
   repairsSelector,
 } from 'views/utils/selectors'
-import { RootState } from '../poi-types'
-import { APIDeckPort } from 'kcsapi/api_port/port/response'
+
+import type { RootState } from '../poi-types'
+
 import {
   getFleetBasicInfo,
   getFleetStatus,