feat(ESLint): 迁移并优化有关代码

Author: timi137137

eslint.config.js

@@ -10,9 +10,12 @@ import typescript from 'typescript-eslint';
 
 export default antfu(
   {
-    formatters: true,
     typescript: true,
     vue: true,
+    jsonc: false,
+    yaml: false,
+    markdown: false,
+    formatters: false,
   },
   [
     ...typescript.configs.recommended,
@@ -51,11 +54,16 @@ export default antfu(
       },
 
       rules: {
+        /* Closed due to template running
+         * (Recommended to open!)
+         */
+        'no-console': 'off',
         'ts/no-explicit-any': 'off',
 
         /* Disallow person rules */
         'antfu/top-level-function': 'off',
         'antfu/if-newline': 'off',
+        'n/prefer-global/process': 'off',
 
         /* If you need control the imports sequence, must be off
          *  https://github.com/vuejs/vue-eslint-parser/issues/58
@@ -100,16 +108,27 @@ export default antfu(
 
       rules: {
         'vue/component-name-in-template-casing': ['error', 'kebab-case'],
+        'vue/custom-event-name-casing': ['error', 'kebab-case'],
         'vue/block-order': [
           'error',
           {
             order: ['template', 'script', 'style'],
           },
         ],
+        'vue/block-lang': [
+          'error',
+          {
+            script: {
+              lang: ['ts', 'tsx'],
+            },
+          },
+        ],
         'vue/multi-word-component-names': 'off',
         'vue/no-reserved-props': 'off',
         'vue/no-v-html': 'off',
 
+        'vue-scoped-css/no-parsing-error': 'off',
+        'vue-scoped-css/no-unused-selector': 'off',
         'vue-scoped-css/enforce-style-type': [
           'error',
           {

mock/index.ts

@@ -1,5 +1,5 @@
 import Mock from 'mockjs';
-import { MockMethod } from 'vite-plugin-mock';
+import type { MockMethod } from 'vite-plugin-mock';
 
 export default [
   {
@@ -11,7 +11,7 @@ export default [
         ...Mock.mock({
           'list|1-100': [
             {
-              index: /S20201228115950[0-9][0-9][0-9]/,
+              index: /S20201228115950\d\d\d/,
               pdName: 'Macbook',
               pdNum: 'p_tmp_60a637cd0d',
               'purchaseNum|1-100': 100,
@@ -20,7 +20,7 @@ export default [
               pdType: '电子产品',
             },
             {
-              index: /S20201228115950[0-9][0-9][0-9]/,
+              index: /S20201228115950\d\d\d/,
               pdName: 'Macbook',
               pdNum: 'p_tmp_60a637cd0d',
               'purchaseNum|1-100': 100,

package.json

@@ -13,7 +13,7 @@
     "preview": "vite preview",
     "lint": "eslint --ext .vue,.js,.jsx,.ts,.tsx ./ --max-warnings 0",
     "lint:fix": "eslint --ext .vue,.js,jsx,.ts,.tsx ./ --max-warnings 0 --fix",
-    "stylelint": "stylelint src/**/*.{html,vue,sass,less}",
+    "stylelint": "stylelint src/**/*.{html,vue,css,sass,less}",
     "stylelint:fix": "stylelint --fix src/**/*.{html,vue,css,sass,less}",
     "prepare": "husky install",
     "site:preview": "npm run build && cp -r dist _site",
@@ -55,7 +55,6 @@
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^9.22.0",
     "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-format": "^1.0.1",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-vue": "^10.0.0",
@@ -94,5 +93,5 @@
   },
   "engines": {
     "node": ">=18.18.0"
-  },
+  }
 }

src/App.vue

@@ -3,6 +3,7 @@
     <router-view :key="locale" :class="[mode]" />
   </t-config-provider>
 </template>
+
 <script setup lang="ts">
 import { computed } from 'vue';
 
@@ -17,6 +18,7 @@ const mode = computed(() => {
 
 const { getComponentsLocale, locale } = useLocale();
 </script>
+
 <style lang="less" scoped>
 #nprogress .bar {
   background: var(--td-brand-color) !important;

src/api/model/permissionModel.ts

@@ -1,6 +1,6 @@
-import { defineComponent } from 'vue';
+import type { defineComponent } from 'vue';
 
-import { RouteMeta } from '@/types/interface';
+import type { RouteMeta } from '@/types/interface';
 
 export interface MenuListResult {
   list: Array<RouteItem>;

src/components/color/index.vue

@@ -1,23 +1,25 @@
 <template>
   <div :style="style" class="color-container" />
 </template>
+
 <script setup lang="ts">
 import { computed } from 'vue';
 
 import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
 
-const panelColor =
-  'conic-gradient(from 90deg at 50% 50%, #FF0000 -19.41deg, #FF0000 18.76deg, #FF8A00 59.32deg, #FFE600 99.87deg, #14FF00 141.65deg, #00A3FF 177.72deg, #0500FF 220.23deg, #AD00FF 260.13deg, #FF00C7 300.69deg, #FF0000 340.59deg, #FF0000 378.76deg)';
-
 const { value } = defineProps({
   value: {
     type: String,
+    default: '',
   },
 });
 
+const panelColor =
+  'conic-gradient(from 90deg at 50% 50%, #FF0000 -19.41deg, #FF0000 18.76deg, #FF8A00 59.32deg, #FFE600 99.87deg, #14FF00 141.65deg, #00A3FF 177.72deg, #0500FF 220.23deg, #AD00FF 260.13deg, #FF00C7 300.69deg, #FF0000 340.59deg, #FF0000 378.76deg)';
+
 const style = computed(() => {
   return {
-    background: DEFAULT_COLOR_OPTIONS.indexOf(value) > -1 ? value : panelColor,
+    background: DEFAULT_COLOR_OPTIONS.includes(value) ? value : panelColor,
   };
 });
 </script>

src/components/common-table/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="list-common-table">
-    <t-form ref="form" :data="formData" :label-width="80" colon @reset="onReset" @submit="onSubmit">
+    <t-form :data="formData" :label-width="80" colon @reset="onReset" @submit="onSubmit">
       <t-row>
         <t-col :span="10">
           <t-row :gutter="[24, 24]">
@@ -122,8 +122,10 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
-import { MessagePlugin, PageInfo, PrimaryTableCol, TableRowData } from 'tdesign-vue-next';
+import type { PageInfo, PrimaryTableCol, TableRowData } from 'tdesign-vue-next';
+import { MessagePlugin } from 'tdesign-vue-next';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 

src/components/product-card/index.vue

@@ -3,22 +3,22 @@
     <template #avatar>
       <t-avatar size="56px">
         <template #icon>
-          <shop-icon v-if="product.type === 1" />
-          <calendar-icon v-if="product.type === 2" />
-          <service-icon v-if="product.type === 3" />
-          <user-avatar-icon v-if="product.type === 4" />
-          <laptop-icon v-if="product.type === 5" />
+          <shop-icon v-if="props.product.type === 1" />
+          <calendar-icon v-if="props.product.type === 2" />
+          <service-icon v-if="props.product.type === 3" />
+          <user-avatar-icon v-if="props.product.type === 4" />
+          <laptop-icon v-if="props.product.type === 5" />
         </template>
       </t-avatar>
     </template>
     <template #status>
-      <t-tag :theme="product.isSetup ? 'success' : 'default'" :disabled="!product.isSetup">{{
-        product.isSetup ? t('components.isSetup.on') : t('components.isSetup.off')
-      }}</t-tag>
+      <t-tag :theme="props.product.isSetup ? 'success' : 'default'" :disabled="!props.product.isSetup">
+        {{ props.product.isSetup ? t('components.isSetup.on') : t('components.isSetup.off') }}
+      </t-tag>
     </template>
     <template #content>
-      <p class="list-card-item_detail--name">{{ product.name }}</p>
-      <p class="list-card-item_detail--desc">{{ product.description }}</p>
+      <p class="list-card-item_detail--name">{{ props.product.name }}</p>
+      <p class="list-card-item_detail--desc">{{ props.product.description }}</p>
     </template>
     <template #footer>
       <t-avatar-group cascading="left-up" :max="2">
@@ -32,28 +32,29 @@
     </template>
     <template #actions>
       <t-dropdown
-        :disabled="!product.isSetup"
+        :disabled="!props.product.isSetup"
         trigger="click"
         :options="[
           {
             content: t('components.manage'),
             value: 'manage',
-            onClick: () => handleClickManage(product),
+            onClick: () => handleClickManage(props.product),
           },
           {
             content: t('components.delete'),
             value: 'delete',
-            onClick: () => handleClickDelete(product),
+            onClick: () => handleClickDelete(props.product),
           },
         ]"
       >
-        <t-button theme="default" :disabled="!product.isSetup" shape="square" variant="text">
+        <t-button theme="default" :disabled="!props.product.isSetup" shape="square" variant="text">
           <more-icon />
         </t-button>
       </t-dropdown>
     </template>
   </t-card>
 </template>
+
 <script setup lang="ts">
 import {
   AddIcon,
@@ -75,10 +76,10 @@ export interface CardProductType {
   name: string;
 }
 
-// eslint-disable-next-line
 const props = defineProps({
   product: {
     type: Object as PropType<CardProductType>,
+    default: undefined,
   },
 });
 

src/components/result/index.vue

@@ -8,6 +8,7 @@
     <slot />
   </div>
 </template>
+
 <script setup lang="ts">
 import { computed } from 'vue';
 
@@ -19,10 +20,22 @@ import ResultMaintenanceIcon from '@/assets/assets-result-maintenance.svg?compon
 import ResultWifiIcon from '@/assets/assets-result-wifi.svg?component';
 
 const { type } = defineProps({
-  bgUrl: String,
-  title: String,
-  tip: String,
-  type: String,
+  bgUrl: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  tip: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
 });
 
 const dynamicComponent = computed(() => {
@@ -44,6 +57,7 @@ const dynamicComponent = computed(() => {
   }
 });
 </script>
+
 <style lang="less" scoped>
 .result {
   &-link {

src/components/thumbnail/index.vue

@@ -1,11 +1,15 @@
 <template>
   <img :class="className" :src="url" />
 </template>
+
 <script setup lang="ts">
 import { computed } from 'vue';
 
 const { type } = defineProps({
-  url: String,
+  url: {
+    type: String,
+    default: '',
+  },
   type: {
     type: String,
     default: 'layout',
@@ -22,6 +26,7 @@ const className = computed(() => {
   ];
 });
 </script>
+
 <style lang="less" scoped>
 @import '@/style/index.less';