From e9e56d5938f9aaae5ff161367d009a248baf1c98 Mon Sep 17 00:00:00 2001 From: Sanxiaozhizi Date: Fri, 27 Aug 2021 17:46:06 +0800 Subject: [PATCH] chore: upgrade & improve eslint rule (#3105) * chore: remove unused ts-node * chore: upgrade lodash * chore: upgrade eslint * perf: remove side effects in computed * refactor: follow eslint rules * chore: remove vue-template-compiler * style: enhance eslint format rule * style: format code --- .eslintrc.js | 28 +- package.json | 6 +- .../components/cascader-panel/src/index.vue | 2 +- .../components/checkbox/src/useCheckbox.ts | 2 + packages/components/collapse/src/collapse.vue | 2 +- packages/components/color-picker/src/color.ts | 2 +- .../src/date-picker-com/basic-date-table.vue | 2 +- .../src/date-picker-com/basic-month-table.vue | 2 +- packages/components/icon/src/index.vue | 2 +- .../components/image-viewer/src/index.vue | 2 +- .../components/loading/src/loading.type.ts | 66 +- .../message-box/src/message-box.type.ts | 14 +- .../components/message-box/src/messageBox.ts | 16 +- packages/components/message/src/message.ts | 2 +- packages/components/message/src/types.ts | 2 +- .../notification/src/notification.type.ts | 2 +- packages/components/pagination/src/index.ts | 10 +- packages/components/slider/src/slider.type.ts | 2 +- packages/components/space/src/index.ts | 2 +- packages/components/space/src/useSpace.ts | 4 +- packages/components/switch/src/index.vue | 4 +- .../table/src/table-body/defaults.ts | 4 +- .../table/src/table-column/defaults.ts | 6 +- .../table/src/table-footer/index.ts | 2 +- .../components/table/src/table/defaults.ts | 44 +- packages/components/tabs/src/tab-nav.vue | 2 +- packages/components/tabs/src/tab-pane.vue | 12 +- packages/components/timeline/src/item.vue | 10 - .../components/tree/src/model/tree-store.ts | 2 +- .../src/model/useNodeExpandEventBroadcast.ts | 2 +- packages/components/tree/src/tree.type.ts | 130 ++-- packages/components/upload/src/upload.vue | 6 +- packages/directives/click-outside/index.ts | 10 +- packages/directives/package.json | 1 - packages/hooks/package.json | 1 - .../hooks/use-popper/use-target-events.ts | 4 +- packages/locale/package.json | 1 - packages/test-utils/make-mount.ts | 2 +- packages/theme-chalk/package.json | 3 +- packages/tokens/package.json | 1 - packages/utils/aria.ts | 2 +- packages/utils/package.json | 1 - yarn.lock | 728 ++++++++++-------- 43 files changed, 617 insertions(+), 531 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 3e69fb9c4a..b4596cab05 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -20,18 +20,33 @@ module.exports = { 'plugin:vue/vue3-recommended', ], rules: { - // js/ts + // style + 'block-spacing': 'error', 'eol-last': 'error', 'no-trailing-spaces': 'error', 'comma-style': ['error', 'last'], 'comma-dangle': ['error', 'always-multiline'], 'no-multi-spaces': 'error', - quotes: ['error', 'single', { avoidEscape: true, allowTemplateLiterals: true }], - camelcase: ['error', { properties: 'never' }], semi: ['error', 'never'], - indent: ['error', 2, { SwitchCase: 1 }], - 'object-curly-spacing': ['error', 'always'], - 'arrow-parens': ['error', 'as-needed'], + 'arrow-parens':['error', 'as-needed'], + 'array-bracket-spacing': ['error', 'never'], + + 'indent': 'off', + '@typescript-eslint/indent':['error', 2, { SwitchCase: 1 }], + + 'object-curly-spacing': 'off', + '@typescript-eslint/object-curly-spacing': ['error', 'always'], + + quotes: 'off', + '@typescript-eslint/quotes': ['error', 'single', { avoidEscape: true, allowTemplateLiterals: true }], + + 'space-infix-ops': 'off', + '@typescript-eslint/space-infix-ops': ['error', { 'int32Hint': false }], + + '@typescript-eslint/type-annotation-spacing': ['error', {}], + + // js/ts + camelcase: ['error', { properties: 'never' }], '@typescript-eslint/explicit-module-boundary-types': 'off', '@typescript-eslint/no-explicit-any': 'off', '@typescript-eslint/member-delimiter-style': [ @@ -47,6 +62,7 @@ module.exports = { }, }, ], + // vue 'vue/no-v-html': 'off', 'vue/singleline-html-element-content-newline': 'off', diff --git a/package.json b/package.json index 4ce9a60cab..d4aeb28330 100644 --- a/package.json +++ b/package.json @@ -54,8 +54,8 @@ "@types/jest": "^26.0.10", "@types/klaw-sync": "^6.0.1", "@types/lodash": "^4.14.161", - "@typescript-eslint/eslint-plugin": "^3.10.1", - "@typescript-eslint/parser": "^3.10.1", + "@typescript-eslint/eslint-plugin": "^4.29.3", + "@typescript-eslint/parser": "^4.29.3", "@vue/babel-plugin-jsx": "^1.0.0", "@vue/compiler-sfc": "^3.2.0", "@vue/component-compiler-utils": "^3.2.0", @@ -112,14 +112,12 @@ "transliteration": "^2.1.11", "ts-loader": "^8.0.3", "ts-morph": "^11.0.3", - "ts-node": "^10.2.0", "typescript": "^4.3.5", "url-loader": "^4.1.0", "vue": "^3.2.0", "vue-jest": "5.0.0-alpha.5", "vue-loader": "^16.1.2", "vue-router": "^4.0.2", - "vue-template-compiler": "^2.6.12", "webpack": "^4.44.1", "webpack-bundle-analyzer": "^3.9.0", "webpack-cli": "^3.3.12", diff --git a/packages/components/cascader-panel/src/index.vue b/packages/components/cascader-panel/src/index.vue index 3761c1e433..79630480e6 100644 --- a/packages/components/cascader-panel/src/index.vue +++ b/packages/components/cascader-panel/src/index.vue @@ -297,7 +297,7 @@ export default defineComponent({ })) watch( - [ config, () => props.options ], + [config, () => props.options], initStore, { deep: true, immediate: true }, ) diff --git a/packages/components/checkbox/src/useCheckbox.ts b/packages/components/checkbox/src/useCheckbox.ts index 55f23314fd..f316c5f669 100644 --- a/packages/components/checkbox/src/useCheckbox.ts +++ b/packages/components/checkbox/src/useCheckbox.ts @@ -112,6 +112,8 @@ const useCheckboxStatus = (props: IUseCheckboxProps, { model }: PartialReturnTyp return value.includes(props.label) } else if (value !== null && value !== undefined) { return value === props.trueLabel + } else { + return !!value } }) const checkboxSize = computed(() => { diff --git a/packages/components/collapse/src/collapse.vue b/packages/components/collapse/src/collapse.vue index 94f186542a..07deb86db1 100644 --- a/packages/components/collapse/src/collapse.vue +++ b/packages/components/collapse/src/collapse.vue @@ -27,7 +27,7 @@ export default defineComponent({ accordion: Boolean, modelValue: { type: [Array, String, Number] as PropType< - string | number | Array + string | number | Array >, default: () => [], }, diff --git a/packages/components/color-picker/src/color.ts b/packages/components/color-picker/src/color.ts index 63e9060f5e..2a68b95dc8 100644 --- a/packages/components/color-picker/src/color.ts +++ b/packages/components/color-picker/src/color.ts @@ -179,7 +179,7 @@ export default class Color { this.doOnChange() } - set(prop: {[key: string]: any;} | any, value?: number) { + set(prop: { [key: string]: any; } | any, value?: number) { if (arguments.length === 1 && typeof prop === 'object') { for (const p in prop) { if (hasOwn(prop, p)) { diff --git a/packages/components/date-picker/src/date-picker-com/basic-date-table.vue b/packages/components/date-picker/src/date-picker-com/basic-date-table.vue index 7a940bb108..9e182c7aa8 100644 --- a/packages/components/date-picker/src/date-picker-com/basic-date-table.vue +++ b/packages/components/date-picker/src/date-picker-com/basic-date-table.vue @@ -93,7 +93,7 @@ export default defineComponent({ // data const lastRow = ref(null) const lastColumn = ref(null) - const tableRows = ref([ [], [], [], [], [], [] ]) + const tableRows = ref([[], [], [], [], [], []]) // todo better way to get Day.js locale object const firstDayOfWeek = (props.date as any).$locale().weekStart || 7 diff --git a/packages/components/date-picker/src/date-picker-com/basic-month-table.vue b/packages/components/date-picker/src/date-picker-com/basic-month-table.vue index 9b14129954..7e3267cf24 100644 --- a/packages/components/date-picker/src/date-picker-com/basic-month-table.vue +++ b/packages/components/date-picker/src/date-picker-com/basic-month-table.vue @@ -68,7 +68,7 @@ export default defineComponent({ setup(props, ctx) { const { t, lang } = useLocaleInject() const months = ref(props.date.locale('en').localeData().monthsShort().map(_=>_.toLowerCase())) - const tableRows = ref([ [], [], [] ]) + const tableRows = ref([[], [], []]) const lastRow = ref(null) const lastColumn = ref(null) const rows = computed(() => { diff --git a/packages/components/icon/src/index.vue b/packages/components/icon/src/index.vue index bb34b765f7..cbea86ed9b 100644 --- a/packages/components/icon/src/index.vue +++ b/packages/components/icon/src/index.vue @@ -28,7 +28,7 @@ export default defineComponent({ return {} } return { - ...(props.size ? { '--font-size': `${props.size}px` }: {}), + ...(props.size ? { '--font-size': `${props.size}px` } : {}), ...(props.color ? { '--color': props.color } : {}), } as CSSProperties }), diff --git a/packages/components/image-viewer/src/index.vue b/packages/components/image-viewer/src/index.vue index 4c3932cd15..0dd7cbe6f2 100644 --- a/packages/components/image-viewer/src/index.vue +++ b/packages/components/image-viewer/src/index.vue @@ -94,7 +94,7 @@ export default defineComponent({ props: { urlList: { type: Array as PropType, - default: [], + default: () => [], }, zIndex: { type: Number, diff --git a/packages/components/loading/src/loading.type.ts b/packages/components/loading/src/loading.type.ts index e7d46018db..924599b9d0 100644 --- a/packages/components/loading/src/loading.type.ts +++ b/packages/components/loading/src/loading.type.ts @@ -1,49 +1,49 @@ import type { Ref, VNode } from 'vue' export type ILoadingOptions = { - parent?: ILoadingParentElement - background?: string - svg?: string - svgViewBox?: string - spinner?: boolean | string - text?: string - fullscreen?: boolean - body?: boolean - lock?: boolean - customClass?: string - visible?: boolean - target?: string | HTMLElement + parent?: ILoadingParentElement + background?: string + svg?: string + svgViewBox?: string + spinner?: boolean | string + text?: string + fullscreen?: boolean + body?: boolean + lock?: boolean + customClass?: string + visible?: boolean + target?: string | HTMLElement } export type ILoadingInstance = { - parent?: Ref - background?: Ref - spinner?: Ref - text?: Ref - fullscreen?: Ref - body?: Ref - lock?: Ref - customClass?: Ref - visible?: Ref - target?: Ref - originalPosition?: Ref - originalOverflow?: Ref - setText: (text: string) => void - close: () => void - handleAfterLeave: () => void - vm: VNode - $el: HTMLElement + parent?: Ref + background?: Ref + spinner?: Ref + text?: Ref + fullscreen?: Ref + body?: Ref + lock?: Ref + customClass?: Ref + visible?: Ref + target?: Ref + originalPosition?: Ref + originalOverflow?: Ref + setText: (text: string) => void + close: () => void + handleAfterLeave: () => void + vm: VNode + $el: HTMLElement } export type ILoadingGlobalConfig = { - fullscreenLoading: ILoadingInstance + fullscreenLoading: ILoadingInstance } export type ILoadingCreateComponentParams = { - options: ILoadingOptions - globalLoadingOption: ILoadingGlobalConfig + options: ILoadingOptions + globalLoadingOption: ILoadingGlobalConfig } export interface ILoadingParentElement extends HTMLElement { - vLoadingAddClassList?: () => void + vLoadingAddClassList?: () => void } diff --git a/packages/components/message-box/src/message-box.type.ts b/packages/components/message-box/src/message-box.type.ts index 805c35ffdd..130b3abaf1 100644 --- a/packages/components/message-box/src/message-box.type.ts +++ b/packages/components/message-box/src/message-box.type.ts @@ -157,14 +157,14 @@ export interface ElMessageBoxOptions { export type ElMessageBoxShortcutMethod = (( - message: ElMessageBoxOptions['message'], - title: ElMessageBoxOptions['title'], - options?: ElMessageBoxOptions, - ) => Promise) + message: ElMessageBoxOptions['message'], + title: ElMessageBoxOptions['title'], + options?: ElMessageBoxOptions, + ) => Promise) & (( - message: ElMessageBoxOptions['message'], - options?: ElMessageBoxOptions, - ) => Promise) + message: ElMessageBoxOptions['message'], + options?: ElMessageBoxOptions, + ) => Promise) export interface IElMessageBox { /** Show a message box */ diff --git a/packages/components/message-box/src/messageBox.ts b/packages/components/message-box/src/messageBox.ts index fd09366027..646b5f4ff4 100644 --- a/packages/components/message-box/src/messageBox.ts +++ b/packages/components/message-box/src/messageBox.ts @@ -17,13 +17,13 @@ import type { // component default merge props & data const messageInstance = new Map< - ComponentPublicInstance<{ doClose: () => void; }>, // marking doClose as function - { - options: any - callback: Callback - resolve: (res: any) => void - reject: (reason?: any) => void - } +ComponentPublicInstance<{ doClose: () => void; }>, // marking doClose as function +{ + options: any + callback: Callback + resolve: (res: any) => void + reject: (reason?: any) => void +} >() @@ -110,7 +110,7 @@ const showMessage = (options: any) => { async function MessageBox(options: ElMessageBoxOptions): Promise function MessageBox( options: ElMessageBoxOptions | string | VNode, -): Promise<{value: string; action: Action;} | Action> { +): Promise<{ value: string; action: Action; } | Action> { if (isServer) return let callback if (isString(options) || isVNode(options)) { diff --git a/packages/components/message/src/message.ts b/packages/components/message/src/message.ts index 3f28cada69..6147ea9168 100644 --- a/packages/components/message/src/message.ts +++ b/packages/components/message/src/message.ts @@ -78,7 +78,7 @@ const Message: IMessage = function( return { // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle // for out component, so that all closing steps will not be skipped. - close: () => (vm.component.proxy as ComponentPublicInstance<{visible: boolean;}>).visible = false, + close: () => (vm.component.proxy as ComponentPublicInstance<{ visible: boolean; }>).visible = false, } } as any diff --git a/packages/components/message/src/types.ts b/packages/components/message/src/types.ts index c9c7774879..4375d23edf 100644 --- a/packages/components/message/src/types.ts +++ b/packages/components/message/src/types.ts @@ -26,7 +26,7 @@ export type MessageParams = IMessageOptions | string export type TypedMessageParams = { type: T; } & Omit | string export interface IMessage { - (options?: MessageParams) : IMessageHandle + (options?: MessageParams): IMessageHandle success: (options?: TypedMessageParams<'success'>) => IMessageHandle warning: (options?: TypedMessageParams<'warning'>) => IMessageHandle info: (options?: TypedMessageParams<'info'>) => IMessageHandle diff --git a/packages/components/notification/src/notification.type.ts b/packages/components/notification/src/notification.type.ts index d83ef17385..cf6d0b2599 100644 --- a/packages/components/notification/src/notification.type.ts +++ b/packages/components/notification/src/notification.type.ts @@ -9,7 +9,7 @@ export interface INotificationHandle { } export interface INotification { - (options?: INotificationOptions) : INotificationHandle + (options?: INotificationOptions): INotificationHandle success?: (options: TypedNotificationOptions) => INotificationHandle warning?: (options: TypedNotificationOptions) => INotificationHandle error?: (options: TypedNotificationOptions) => INotificationHandle diff --git a/packages/components/pagination/src/index.ts b/packages/components/pagination/src/index.ts index 9ffd41780e..aa74bee9a3 100644 --- a/packages/components/pagination/src/index.ts +++ b/packages/components/pagination/src/index.ts @@ -5,6 +5,7 @@ import { computed, defineComponent, getCurrentInstance, + watch, } from 'vue' import { warn } from '@element-plus/utils/error' import { useLocaleInject } from '@element-plus/hooks' @@ -185,10 +186,6 @@ export default defineComponent({ } else if (!isAbsent(props.total)) { pageCount = Math.max(1, Math.ceil(props.total / pageSizeBridge.value)) } - // side effect - if (currentPageBridge.value > pageCount) { - currentPageBridge.value = pageCount - } return pageCount }) @@ -213,6 +210,11 @@ export default defineComponent({ }, }) + watch(pageCountBridge, val => { + if (currentPageBridge.value > val) + currentPageBridge.value = val + }) + function handleCurrentChange(val: number) { currentPageBridge.value = val } diff --git a/packages/components/slider/src/slider.type.ts b/packages/components/slider/src/slider.type.ts index 378718b3de..7d76fdb3c0 100644 --- a/packages/components/slider/src/slider.type.ts +++ b/packages/components/slider/src/slider.type.ts @@ -47,7 +47,7 @@ export interface ISliderProvider { export type Mark = { point: number position: number - mark: {[s: string]: any;} + mark: { [s: string]: any; } } export type Marks = ComputedRef diff --git a/packages/components/space/src/index.ts b/packages/components/space/src/index.ts index 4239f1988a..909af77214 100644 --- a/packages/components/space/src/index.ts +++ b/packages/components/space/src/index.ts @@ -25,7 +25,7 @@ export default defineComponent({ render( ctx: ReturnType & - ExtractPropTypes & { $slots: Slots; }, + ExtractPropTypes & { $slots: Slots; }, ) { const { classes, diff --git a/packages/components/space/src/useSpace.ts b/packages/components/space/src/useSpace.ts index 17fa01459f..4d6ee7f583 100644 --- a/packages/components/space/src/useSpace.ts +++ b/packages/components/space/src/useSpace.ts @@ -25,7 +25,7 @@ export const defaultProps = { style: { type: [String, Array, Object] as PropType< - string | Array | CSSProperties + string | Array | CSSProperties >, }, @@ -63,7 +63,7 @@ export const defaultProps = { size: { type: [String, Array, Number] as PropType< - ComponentSize | [number, number] | number + ComponentSize | [number, number] | number >, validator: (val: unknown) => { return ( diff --git a/packages/components/switch/src/index.vue b/packages/components/switch/src/index.vue index a8c2bf60f8..09badb65f0 100644 --- a/packages/components/switch/src/index.vue +++ b/packages/components/switch/src/index.vue @@ -70,7 +70,7 @@ interface ISwitchProps { name: string validateEvent: boolean id: string - loading:boolean + loading: boolean beforeChange?: () => (Promise | boolean) } @@ -190,7 +190,7 @@ export default defineComponent({ }) const switchDisabled = computed((): boolean => { - return props.disabled || props.loading ||(elForm || {}).disabled + return props.disabled || props.loading || (elForm || {}).disabled }) const handleChange = (): void => { diff --git a/packages/components/table/src/table-body/defaults.ts b/packages/components/table/src/table-body/defaults.ts index 71bab3cea4..1c46184245 100644 --- a/packages/components/table/src/table-body/defaults.ts +++ b/packages/components/table/src/table-body/defaults.ts @@ -25,10 +25,10 @@ const defaultProps = { type: Object as PropType['context']>, }, rowClassName: [String, Function] as PropType< - TableBodyProps['rowClassName'] + TableBodyProps['rowClassName'] >, rowStyle: [Object, Function] as PropType< - TableBodyProps['rowStyle'] + TableBodyProps['rowStyle'] >, fixed: { type: String, diff --git a/packages/components/table/src/table-column/defaults.ts b/packages/components/table/src/table-column/defaults.ts index 16d3d822a0..e3c5eb84a6 100644 --- a/packages/components/table/src/table-column/defaults.ts +++ b/packages/components/table/src/table-column/defaults.ts @@ -95,7 +95,7 @@ export default { default: '', }, renderHeader: Function as PropType< - TableColumnCtx['renderHeader'] + TableColumnCtx['renderHeader'] >, sortable: { type: [Boolean, String], @@ -103,7 +103,7 @@ export default { }, sortMethod: Function as PropType['sortMethod']>, sortBy: [String, Function, Array] as PropType< - TableColumnCtx['sortBy'] + TableColumnCtx['sortBy'] >, resizable: { type: Boolean, @@ -119,7 +119,7 @@ export default { selectable: Function as PropType['selectable']>, reserveSelection: Boolean, filterMethod: Function as PropType< - TableColumnCtx['filterMethod'] + TableColumnCtx['filterMethod'] >, filteredValue: Array as PropType['filteredValue']>, filters: Array as PropType['filters']>, diff --git a/packages/components/table/src/table-footer/index.ts b/packages/components/table/src/table-footer/index.ts index 06fa05d34e..537bde574f 100644 --- a/packages/components/table/src/table-footer/index.ts +++ b/packages/components/table/src/table-footer/index.ts @@ -27,7 +27,7 @@ export default defineComponent({ type: Object as PropType['store']>, }, summaryMethod: Function as PropType< - TableFooter['summaryMethod'] + TableFooter['summaryMethod'] >, sumText: String, border: Boolean, diff --git a/packages/components/table/src/table/defaults.ts b/packages/components/table/src/table/defaults.ts index 3fb974c35f..c3712573b3 100644 --- a/packages/components/table/src/table/defaults.ts +++ b/packages/components/table/src/table/defaults.ts @@ -58,19 +58,19 @@ type ColumnStyle = type CellCls = | string | ((data: { - row: T - rowIndex: number - column: TableColumnCtx - columnIndex: number - }) => string) + row: T + rowIndex: number + column: TableColumnCtx + columnIndex: number + }) => string) type CellStyle = | CSSProperties | ((data: { - row: T - rowIndex: number - column: TableColumnCtx - columnIndex: number - }) => CSSProperties) + row: T + rowIndex: number + column: TableColumnCtx + columnIndex: number + }) => CSSProperties) interface TableProps { data: T[] @@ -108,11 +108,11 @@ interface TableProps { column: TableColumnCtx columnIndex: number }) => - | number[] - | { - rowspan: number - colspan: number - } + | number[] + | { + rowspan: number + colspan: number + } selectOnIndeterminate?: boolean indent?: number treeProps?: { @@ -182,26 +182,26 @@ export default { sumText: String, summaryMethod: Function as PropType['summaryMethod']>, rowClassName: [String, Function] as PropType< - TableProps['rowClassName'] + TableProps['rowClassName'] >, rowStyle: [Object, Function] as PropType['rowStyle']>, cellClassName: [String, Function] as PropType< - TableProps['cellClassName'] + TableProps['cellClassName'] >, cellStyle: [Object, Function] as PropType< - TableProps['cellStyle'] + TableProps['cellStyle'] >, headerRowClassName: [String, Function] as PropType< - TableProps['headerRowClassName'] + TableProps['headerRowClassName'] >, headerRowStyle: [Object, Function] as PropType< - TableProps['headerRowStyle'] + TableProps['headerRowStyle'] >, headerCellClassName: [String, Function] as PropType< - TableProps['headerCellClassName'] + TableProps['headerCellClassName'] >, headerCellStyle: [Object, Function] as PropType< - TableProps['headerCellStyle'] + TableProps['headerCellStyle'] >, highlightCurrentRow: Boolean, currentRowKey: [String, Number], diff --git a/packages/components/tabs/src/tab-nav.vue b/packages/components/tabs/src/tab-nav.vue index 46024f1458..2c763db164 100644 --- a/packages/components/tabs/src/tab-nav.vue +++ b/packages/components/tabs/src/tab-nav.vue @@ -48,7 +48,7 @@ export default defineComponent({ editable: Boolean, onTabClick: { type: Function as PropType< - (tab: Pane, tabName: string, ev: Event) => void + (tab: Pane, tabName: string, ev: Event) => void >, default: NOOP, }, diff --git a/packages/components/tabs/src/tab-pane.vue b/packages/components/tabs/src/tab-pane.vue index 3ec46d29c2..d8c5ee302f 100644 --- a/packages/components/tabs/src/tab-pane.vue +++ b/packages/components/tabs/src/tab-pane.vue @@ -12,7 +12,7 @@