chore: udpate lint, close #6896

.eslintignore

@@ -7,4 +7,6 @@ es/
 lib/
 _site/
 dist/
+site/dist/
 components/version/version.tsx
+site/src/router/demoRoutes.js

.eslintrc.js

@@ -15,9 +15,20 @@ module.exports = {
     'plugin:vue/vue3-recommended',
     'plugin:import/recommended',
     'plugin:import/typescript',
-    'prettier',
+    '@vue/typescript/recommended',
+    '@vue/prettier',
+    // 'prettier',
   ],
+  // extends: [
+  //   'eslint:recommended',
+  //   'plugin:vue/vue3-recommended',
+  //   '@vue/typescript/recommended',
+  //   '@vue/prettier',
+  // ],
   plugins: ['markdown', 'jest', '@typescript-eslint', 'import'],
+  globals: {
+    defineProps: 'readonly',
+  },
   overrides: [
     {
       files: ['*.md'],
@@ -28,12 +39,11 @@ module.exports = {
     },
     {
       files: ['*.ts', '*.tsx'],
-      extends: ['@vue/typescript/recommended', '@vue/prettier', '@vue/prettier/@typescript-eslint'],
+      // extends: ['@vue/typescript/recommended', '@vue/prettier'],
       parserOptions: {
         project: './tsconfig.json',
       },
       rules: {
-        '@typescript-eslint/no-explicit-any': 0,
         '@typescript-eslint/ban-types': 0,
         '@typescript-eslint/consistent-type-imports': 'error',
         '@typescript-eslint/explicit-module-boundary-types': 0,
@@ -51,17 +61,21 @@ module.exports = {
       parser: 'vue-eslint-parser',
       parserOptions: {
         parser: '@typescript-eslint/parser',
+        ecmaVersion: 2021,
       },
       rules: {
         'no-console': 'off',
-        '@typescript-eslint/no-unused-vars': [
+        'vue/no-reserved-component-names': 'off',
-          'error',
-          { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
-        ],
       },
     },
   ],
   rules: {
+    '@typescript-eslint/no-explicit-any': 0,
+    '@typescript-eslint/no-empty-function': 0,
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { vars: 'all', args: 'after-used', ignoreRestSiblings: true, argsIgnorePattern: '^_' },
+    ],
     'import/no-named-as-default': 'off',
     'import/namespace': [2, { allowComputed: true }],
     'import/no-named-as-default-member': 'off',

components/_util/BaseMixin.ts

@@ -3,7 +3,7 @@ import { getOptionProps } from './props-util';
 
 export default {
   methods: {
-    setState(state = {}, callback) {
+    setState(state = {}, callback: () => any) {
       let newState = typeof state === 'function' ? state(this.$data, this.$props) : state;
       if (this.getDerivedStateFromProps) {
         const s = this.getDerivedStateFromProps(getOptionProps(this), {
@@ -26,6 +26,7 @@ export default {
     },
     __emit() {
       // 直接调用事件，底层组件不需要vueTool记录events
+      // eslint-disable-next-line prefer-rest-params
       const args = [].slice.call(arguments, 0);
       let eventName = args[0];
       eventName = `on${eventName[0].toUpperCase()}${eventName.substring(1)}`;

components/_util/antInputDirective.ts

@@ -1,8 +1,10 @@
-function onCompositionStart(e) {
+import type { Directive } from 'vue';
+
+function onCompositionStart(e: any) {
   e.target.composing = true;
 }
 
-function onCompositionEnd(e) {
+function onCompositionEnd(e: any) {
   // prevent triggering an input event for no reason
   if (!e.target.composing) return;
   e.target.composing = false;
@@ -15,10 +17,15 @@ function trigger(el, type) {
   el.dispatchEvent(e);
 }
 
-export function addEventListener(el, event, handler, options) {
+export function addEventListener(
+  el: HTMLElement,
+  event: string,
+  handler: EventListenerOrEventListenerObject,
+  options?: boolean | AddEventListenerOptions,
+) {
   el.addEventListener(event, handler, options);
 }
-const antInput = {
+const antInput: Directive = {
   created(el, binding) {
     if (!binding.modifiers || !binding.modifiers.lazy) {
       addEventListener(el, 'compositionstart', onCompositionStart);

components/_util/json2mq.ts

@@ -3,7 +3,7 @@
  * https://github.com/akiran/json2mq.git
  */
 
-const camel2hyphen = function (str) {
+const camel2hyphen = function (str: string) {
   return str
     .replace(/[A-Z]/g, function (match) {
       return '-' + match.toLowerCase();
@@ -11,12 +11,12 @@ const camel2hyphen = function (str) {
     .toLowerCase();
 };
 
-const isDimension = function (feature) {
+const isDimension = function (feature: string) {
   const re = /[height|width]$/;
   return re.test(feature);
 };
 
-const obj2mq = function (obj) {
+const obj2mq = function (obj: { [x: string]: any }) {
   let mq = '';
   const features = Object.keys(obj);
   features.forEach(function (feature, index) {
@@ -40,7 +40,7 @@ const obj2mq = function (obj) {
   return mq;
 };
 
-export default function (query) {
+export default function (query: any[]) {
   let mq = '';
   if (typeof query === 'string') {
     return query;

components/_util/props-util/index.ts

@@ -1,19 +1,19 @@
-import isPlainObject from 'lodash-es/isPlainObject';
 import classNames from '../classNames';
-import { isVNode, Fragment, Comment, Text, h } from 'vue';
+import { isVNode, Fragment, Comment, Text } from 'vue';
 import { camelize, hyphenate, isOn, resolvePropValue } from '../util';
 import isValid from '../isValid';
 import initDefaultProps from './initDefaultProps';
+import type { VueInstance } from '../hooks/_vueuse/unrefElement';
 // function getType(fn) {
 //   const match = fn && fn.toString().match(/^\s*function (\w+)/);
 //   return match ? match[1] : '';
 // }
 
-const splitAttrs = attrs => {
+const splitAttrs = (attrs: any) => {
   const allAttrs = Object.keys(attrs);
-  const eventAttrs = {};
+  const eventAttrs: Record<string, any> = {};
-  const onEvents = {};
+  const onEvents: Record<string, any> = {};
-  const extraAttrs = {};
+  const extraAttrs: Record<string, any> = {};
   for (let i = 0, l = allAttrs.length; i < l; i++) {
     const key = allAttrs[i];
     if (isOn(key)) {
@@ -25,7 +25,7 @@ const splitAttrs = attrs => {
   }
   return { onEvents, events: eventAttrs, extraAttrs };
 };
-const parseStyleText = (cssText = '', camel) => {
+const parseStyleText = (cssText = '', camel = false) => {
   const res = {};
   const listDelimiter = /;(?![^(]*\))/g;
   const propertyDelimiter = /:(.+)/;
@@ -42,34 +42,9 @@ const parseStyleText = (cssText = '', camel) => {
   return res;
 };
 
-const hasProp = (instance, prop) => {
+const hasProp = (instance: any, prop: string) => {
   return instance[prop] !== undefined;
 };
-// 重构后直接使用 hasProp 替换
-const slotHasProp = (slot, prop) => {
-  return hasProp(slot, prop);
-};
-
-const getScopedSlots = ele => {
-  return (ele.data && ele.data.scopedSlots) || {};
-};
-
-const getSlots = ele => {
-  let componentOptions = ele.componentOptions || {};
-  if (ele.$vnode) {
-    componentOptions = ele.$vnode.componentOptions || {};
-  }
-  const children = ele.children || componentOptions.children || [];
-  const slots = {};
-  children.forEach(child => {
-    if (!isEmptyElement(child)) {
-      const name = (child.data && child.data.slot) || 'default';
-      slots[name] = slots[name] || [];
-      slots[name].push(child);
-    }
-  });
-  return { ...slots, ...getScopedSlots(ele) };
-};
 
 export const skipFlattenKey = Symbol('skipFlatten');
 const flattenChildren = (children = [], filterEmpty = true) => {
@@ -97,39 +72,29 @@ const flattenChildren = (children = [], filterEmpty = true) => {
   return res;
 };
 
-const getSlot = (self, name = 'default', options = {}) => {
+const getSlot = (self: any, name = 'default', options = {}) => {
   if (isVNode(self)) {
     if (self.type === Fragment) {
-      return name === 'default' ? flattenChildren(self.children) : [];
+      return name === 'default' ? flattenChildren(self.children as any[]) : [];
     } else if (self.children && self.children[name]) {
       return flattenChildren(self.children[name](options));
     } else {
       return [];
     }
   } else {
-    let res = self.$slots[name] && self.$slots[name](options);
+    const res = self.$slots[name] && self.$slots[name](options);
     return flattenChildren(res);
   }
 };
 
-const getAllChildren = ele => {
+const findDOMNode = (instance: any) => {
-  let componentOptions = ele.componentOptions || {};
-  if (ele.$vnode) {
-    componentOptions = ele.$vnode.componentOptions || {};
-  }
-  return ele.children || componentOptions.children || [];
-};
-const getSlotOptions = () => {
-  throw Error('使用 .type 直接取值');
-};
-const findDOMNode = instance => {
   let node = instance?.vnode?.el || (instance && (instance.$el || instance));
   while (node && !node.tagName) {
     node = node.nextSibling;
   }
   return node;
 };
-const getOptionProps = instance => {
+const getOptionProps = (instance: VueInstance) => {
   const res = {};
   if (instance.$ && instance.$.vnode) {
     const props = instance.$.vnode.props || {};
@@ -146,7 +111,7 @@ const getOptionProps = instance => {
     Object.keys(originProps).forEach(key => {
       props[camelize(key)] = originProps[key];
     });
-    const options = instance.type.props || {};
+    const options = (instance.type as any).props || {};
     Object.keys(options).forEach(k => {
       const v = resolvePropValue(options, props, k, props[k]);
       if (v !== undefined || k in props) {
@@ -156,7 +121,7 @@ const getOptionProps = instance => {
   }
   return res;
 };
-const getComponent = (instance, prop = 'default', options = instance, execute = true) => {
+const getComponent = (instance: any, prop = 'default', options = instance, execute = true) => {
   let com = undefined;
   if (instance.$) {
     const temp = instance[prop];
@@ -184,94 +149,13 @@ const getComponent = (instance, prop = 'default', options = instance, execute =
   }
   return com;
 };
-const getComponentFromProp = (instance, prop, options = instance, execute = true) => {
-  if (instance.$createElement) {
-    // const h = instance.$createElement;
-    const temp = instance[prop];
-    if (temp !== undefined) {
-      return typeof temp === 'function' && execute ? temp(h, options) : temp;
-    }
-    return (
-      (instance.$scopedSlots[prop] && execute && instance.$scopedSlots[prop](options)) ||
-      instance.$scopedSlots[prop] ||
-      instance.$slots[prop] ||
-      undefined
-    );
-  } else {
-    // const h = instance.context.$createElement;
-    const temp = getPropsData(instance)[prop];
-    if (temp !== undefined) {
-      return typeof temp === 'function' && execute ? temp(h, options) : temp;
-    }
-    const slotScope = getScopedSlots(instance)[prop];
-    if (slotScope !== undefined) {
-      return typeof slotScope === 'function' && execute ? slotScope(h, options) : slotScope;
-    }
-    const slotsProp = [];
-    const componentOptions = instance.componentOptions || {};
-    (componentOptions.children || []).forEach(child => {
-      if (child.data && child.data.slot === prop) {
-        if (child.data.attrs) {
-          delete child.data.attrs.slot;
-        }
-        if (child.tag === 'template') {
-          slotsProp.push(child.children);
-        } else {
-          slotsProp.push(child);
-        }
-      }
-    });
-    return slotsProp.length ? slotsProp : undefined;
-  }
-};
 
-const getAllProps = ele => {
+const getKey = (ele: any) => {
-  let props = getOptionProps(ele);
+  const key = ele.key;
-  if (ele.$) {
-    props = { ...props, ...this.$attrs };
-  } else {
-    props = { ...ele.props, ...props };
-  }
-  return props;
-};
-
-const getPropsData = ins => {
-  const vnode = ins.$ ? ins.$ : ins;
-  const res = {};
-  const originProps = vnode.props || {};
-  const props = {};
-  Object.keys(originProps).forEach(key => {
-    props[camelize(key)] = originProps[key];
-  });
-  const options = isPlainObject(vnode.type) ? vnode.type.props : {};
-  options &&
-    Object.keys(options).forEach(k => {
-      const v = resolvePropValue(options, props, k, props[k]);
-      if (k in props) {
-        // 仅包含 props，不包含默认值
-        res[k] = v;
-      }
-    });
-  return { ...props, ...res }; // 合并事件、未声明属性等
-};
-const getValueByProp = (ele, prop) => {
-  return getPropsData(ele)[prop];
-};
-
-const getAttrs = ele => {
-  let data = ele.data;
-  if (ele.$vnode) {
-    data = ele.$vnode.data;
-  }
-  return data ? data.attrs || {} : {};
-};
-
-const getKey = ele => {
-  let key = ele.key;
   return key;
 };
 
-export function getEvents(ele = {}, on = true) {
+export function getEvents(ele: any = {}, on = true) {
   let props = {};
   if (ele.$) {
     props = { ...props, ...ele.$attrs };
@@ -281,27 +165,9 @@ export function getEvents(ele = {}, on = true) {
   return splitAttrs(props)[on ? 'onEvents' : 'events'];
 }
 
-export function getEvent(child, event) {
+export function getClass(ele: any) {
-  return child.props && child.props[event];
-}
-
-// 获取 xxx.native 或者 原生标签 事件
-export function getDataEvents(child) {
-  let events = {};
-  if (child.data && child.data.on) {
-    events = child.data.on;
-  }
-  return { ...events };
-}
-
-// use getListeners instead this.$listeners
-// https://github.com/vueComponent/ant-design-vue/issues/1705
-export function getListeners(context) {
-  return (context.$vnode ? context.$vnode.componentOptions.listeners : context.$listeners) || {};
-}
-export function getClass(ele) {
   const props = (isVNode(ele) ? ele.props : ele.$attrs) || {};
-  let tempCls = props.class || {};
+  const tempCls = props.class || {};
   let cls = {};
   if (typeof tempCls === 'string') {
     tempCls.split(' ').forEach(c => {
@@ -318,7 +184,7 @@ export function getClass(ele) {
   }
   return cls;
 }
-export function getStyle(ele, camel) {
+export function getStyle(ele: any, camel?: boolean) {
   const props = (isVNode(ele) ? ele.props : ele.$attrs) || {};
   let style = props.style || {};
   if (typeof style === 'string') {
@@ -332,19 +198,19 @@ export function getStyle(ele, camel) {
   return style;
 }
 
-export function getComponentName(opts) {
+export function getComponentName(opts: any) {
   return opts && (opts.Ctor.options.name || opts.tag);
 }
 
-export function isFragment(c) {
+export function isFragment(c: any) {
   return c.length === 1 && c[0].type === Fragment;
 }
 
-export function isEmptyContent(c) {
+export function isEmptyContent(c: any) {
   return c === undefined || c === null || c === '' || (Array.isArray(c) && c.length === 0);
 }
 
-export function isEmptyElement(c) {
+export function isEmptyElement(c: any) {
   return (
     c &&
     (c.type === Comment ||
@@ -353,11 +219,11 @@ export function isEmptyElement(c) {
   );
 }
 
-export function isEmptySlot(c) {
+export function isEmptySlot(c: any) {
   return !c || c().every(isEmptyElement);
 }
 
-export function isStringElement(c) {
+export function isStringElement(c: any) {
   return c && c.type === Text;
 }
 
@@ -375,7 +241,7 @@ export function filterEmpty(children = []) {
   return res.filter(c => !isEmptyElement(c));
 }
 
-export function filterEmptyWithUndefined(children) {
+export function filterEmptyWithUndefined(children: any[]) {
   if (children) {
     const coms = filterEmpty(children);
     return coms.length ? coms : undefined;
@@ -384,34 +250,18 @@ export function filterEmptyWithUndefined(children) {
   }
 }
 
-export function mergeProps() {
+function isValidElement(element: any) {
-  const args = [].slice.call(arguments, 0);
-  const props = {};
-  args.forEach((p = {}) => {
-    for (const [k, v] of Object.entries(p)) {
-      props[k] = props[k] || {};
-      if (isPlainObject(v)) {
-        Object.assign(props[k], v);
-      } else {
-        props[k] = v;
-      }
-    }
-  });
-  return props;
-}
-
-function isValidElement(element) {
   if (Array.isArray(element) && element.length === 1) {
     element = element[0];
   }
   return element && element.__v_isVNode && typeof element.type !== 'symbol'; // remove text node
 }
 
-function getPropsSlot(slots, props, prop = 'default') {
+function getPropsSlot(slots: any, props: any, prop = 'default') {
   return props[prop] ?? slots[prop]?.();
 }
 
-export const getTextFromElement = ele => {
+export const getTextFromElement = (ele: any) => {
   if (isValidElement(ele) && isStringElement(ele[0])) {
     return ele[0].children;
   }
@@ -422,21 +272,12 @@ export {
   hasProp,
   getOptionProps,
   getComponent,
-  getComponentFromProp,
-  getSlotOptions,
-  slotHasProp,
-  getPropsData,
   getKey,
-  getAttrs,
-  getValueByProp,
   parseStyleText,
   initDefaultProps,
   isValidElement,
   camelize,
-  getSlots,
   getSlot,
-  getAllProps,
-  getAllChildren,
   findDOMNode,
   flattenChildren,
   getPropsSlot,

components/form/demo/custom-validation.vue

@@ -59,7 +59,7 @@ const formState = reactive<FormState>({
   checkPass: '',
   age: undefined,
 });
-let checkAge = async (_rule: Rule, value: number) => {
+const checkAge = async (_rule: Rule, value: number) => {
   if (!value) {
     return Promise.reject('Please input the age');
   }
@@ -73,7 +73,7 @@ let checkAge = async (_rule: Rule, value: number) => {
     }
   }
 };
-let validatePass = async (_rule: Rule, value: string) => {
+const validatePass = async (_rule: Rule, value: string) => {
   if (value === '') {
     return Promise.reject('Please input the password');
   } else {
@@ -83,7 +83,7 @@ let validatePass = async (_rule: Rule, value: string) => {
     return Promise.resolve();
   }
 };
-let validatePass2 = async (_rule: Rule, value: string) => {
+const validatePass2 = async (_rule: Rule, value: string) => {
   if (value === '') {
     return Promise.reject('Please input the password again');
   } else if (value !== formState.pass) {

components/form/demo/dynamic-form-item.vue

@@ -101,7 +101,7 @@ const resetForm = () => {
   formRef.value.resetFields();
 };
 const removeDomain = (item: Domain) => {
-  let index = dynamicValidateForm.domains.indexOf(item);
+  const index = dynamicValidateForm.domains.indexOf(item);
   if (index !== -1) {
     dynamicValidateForm.domains.splice(index, 1);
   }

components/form/demo/dynamic-form-items-complex.vue

@@ -102,7 +102,7 @@ watch(
   },
 );
 const removeSight = (item: Sights) => {
-  let index = dynamicValidateForm.sights.indexOf(item);
+  const index = dynamicValidateForm.sights.indexOf(item);
   if (index !== -1) {
     dynamicValidateForm.sights.splice(index, 1);
   }

components/form/demo/dynamic-form-items.vue

@@ -75,7 +75,7 @@ const dynamicValidateForm = reactive<{ users: User[] }>({
   users: [],
 });
 const removeUser = (item: User) => {
-  let index = dynamicValidateForm.users.indexOf(item);
+  const index = dynamicValidateForm.users.indexOf(item);
   if (index !== -1) {
     dynamicValidateForm.users.splice(index, 1);
   }

components/input/demo/password-input.vue

@@ -19,8 +19,8 @@ Input type of password.
   <a-space direction="vertical" size="middle" style="width: 100%">
     <a-input-password v-model:value="value" placeholder="input password" />
     <a-input-password v-model:value="value2" placeholder="input password">
-      <template #iconRender="visible">
+      <template #iconRender="v">
-        <EyeTwoTone v-if="visible"></EyeTwoTone>
+        <EyeTwoTone v-if="v"></EyeTwoTone>
         <EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
       </template>
     </a-input-password>

components/menu/demo/sider-current.vue

@@ -76,7 +76,7 @@ const state = reactive({
 });
 const onOpenChange = (openKeys: string[]) => {
   const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
-  if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
+  if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
     state.openKeys = openKeys;
   } else {
     state.openKeys = latestOpenKey ? [latestOpenKey] : [];

components/table/demo/ajax.vue

@@ -109,7 +109,7 @@ const handleTableChange: TableProps['onChange'] = (
   sorter: any,
 ) => {
   run({
-    results: pag.pageSize!,
+    results: pag.pageSize,
     page: pag?.current,
     sortField: sorter.field,
     sortOrder: sorter.order,

components/vc-slick/dots.jsx

@@ -42,18 +42,18 @@ const Dots = (_, { attrs }) => {
   const mouseEvents = { onMouseenter, onMouseover, onMouseleave };
   let dots = [];
   for (let i = 0; i < dotCount; i++) {
-    let _rightBound = (i + 1) * slidesToScroll - 1;
+    const _rightBound = (i + 1) * slidesToScroll - 1;
-    let rightBound = infinite ? _rightBound : clamp(_rightBound, 0, slideCount - 1);
+    const rightBound = infinite ? _rightBound : clamp(_rightBound, 0, slideCount - 1);
-    let _leftBound = rightBound - (slidesToScroll - 1);
+    const _leftBound = rightBound - (slidesToScroll - 1);
-    let leftBound = infinite ? _leftBound : clamp(_leftBound, 0, slideCount - 1);
+    const leftBound = infinite ? _leftBound : clamp(_leftBound, 0, slideCount - 1);
 
-    let className = classnames({
+    const className = classnames({
       'slick-active': infinite
         ? currentSlide >= leftBound && currentSlide <= rightBound
         : currentSlide === leftBound,
     });
 
-    let dotOptions = {
+    const dotOptions = {
       message: 'dots',
       index: i,
       slidesToScroll,

components/vc-slick/inner-slider.jsx

@@ -310,7 +310,7 @@ export default {
       };
     },
     checkImagesLoad() {
-      let images =
+      const images =
         (this.list &&
           this.list.querySelectorAll &&
           this.list.querySelectorAll('.slick-slide img')) ||

package.json

@@ -128,10 +128,10 @@
     "@vitejs/plugin-vue": "^3.0.0",
     "@vitejs/plugin-vue-jsx": "^2.0.0",
     "@vue/babel-plugin-jsx": "^1.0.0",
-    "@vue/cli-plugin-eslint": "^5.0.0-0",
+    "@vue/cli-plugin-eslint": "^5.0.0",
     "@vue/compiler-sfc": "^3.2.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^9.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/test-utils": "^2.0.2",
     "@vue/vue3-jest": "28",
     "@vueuse/core": "^8.3.1",
@@ -175,7 +175,7 @@
     "eslint-plugin-markdown": "^2.0.0",
     "eslint-plugin-no-explicit-type-exports": "^0.12.0",
     "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-vue": "^8.1.1",
+    "eslint-plugin-vue": "^9.17.0",
     "fast-glob": "^3.2.7",
     "fetch-jsonp": "^1.1.3",
     "fs-extra": "^10.0.0",
@@ -261,7 +261,7 @@
     "vue": "^3.2.0",
     "vue-clipboard2": "0.3.3",
     "vue-drag-resize": "^2.0.3",
-    "vue-eslint-parser": "^8.0.0",
+    "vue-eslint-parser": "^9.3.1",
     "vue-i18n": "^9.1.7",
     "vue-infinite-scroll": "^2.0.2",
     "vue-loader": "^17.0.0",