diff --git a/.eslintignore b/.eslintignore
index 257d80189..3a4678606 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -8,5 +8,6 @@ lib/
 _site/
 dist/
 site/dist/
-components/version/version.tsx
+components/version/version.ts
 site/src/router/demoRoutes.js
+locale/
\ No newline at end of file
diff --git a/antd-tools/getWebpackConfig.js b/antd-tools/getWebpackConfig.js
index 59d7bdba0..380b276ab 100644
--- a/antd-tools/getWebpackConfig.js
+++ b/antd-tools/getWebpackConfig.js
@@ -185,7 +185,7 @@ All rights reserved.
   };
 
   if (process.env.RUN_ENV === 'PRODUCTION') {
-    let entry = ['./index'];
+    const entry = ['./index'];
     config.externals = [
       {
         vue: {
diff --git a/antd-tools/gulpfile.js b/antd-tools/gulpfile.js
index b7c7c20cd..b0353a1ee 100644
--- a/antd-tools/gulpfile.js
+++ b/antd-tools/gulpfile.js
@@ -368,7 +368,7 @@ function pub(done) {
   }
 }
 
-let startTime = new Date();
+const startTime = new Date();
 gulp.task('compile-with-es', done => {
   console.log('start compile at ', startTime);
   console.log('[Parallel] Compile to es...');
@@ -452,7 +452,7 @@ gulp.task(
           newVersion.trim() === version
         ) {
           // eslint-disable-next-line no-unused-vars
-          runCmd('npm', ['run', 'pub'], code => {
+          runCmd('npm', ['run', 'pub'], _code => {
             done();
           });
         } else {
diff --git a/components/_util/supportsPassive.js b/components/_util/supportsPassive.js
index 34722aa12..c020b7fca 100644
--- a/components/_util/supportsPassive.js
+++ b/components/_util/supportsPassive.js
@@ -1,7 +1,7 @@
 // Test via a getter in the options object to see if the passive property is accessed
 let supportsPassive = false;
 try {
-  let opts = Object.defineProperty({}, 'passive', {
+  const opts = Object.defineProperty({}, 'passive', {
     get() {
       supportsPassive = true;
     },
diff --git a/components/_util/type.ts b/components/_util/type.ts
index bc1cb530e..22f50a686 100644
--- a/components/_util/type.ts
+++ b/components/_util/type.ts
@@ -31,6 +31,8 @@ export interface PropOptions<T = any, D = T> {
 }
 
 declare type VNodeChildAtom = VNode | string | number | boolean | null | undefined | void;
+
+// eslint-disable-next-line no-undef
 export type VueNode = VNodeChildAtom | VNodeChildAtom[] | JSX.Element;
 
 export const withInstall = <T>(comp: T) => {
diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx
index 194114c98..e4fd930ea 100644
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@@ -8,7 +8,7 @@ import DownOutlined from '@ant-design/icons-vue/DownOutlined';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import type { MouseEventHandler } from '../_util/EventInterface';
 import { eventType, objectType } from '../_util/type';
-import type { CustomSlotsType } from '../_util/type';
+import type { CustomSlotsType, VueNode } from '../_util/type';
 
 export const breadcrumbItemProps = () => ({
   prefixCls: String,
@@ -38,7 +38,7 @@ export default defineComponent({
      * if overlay is have
      * Wrap a Dropdown
      */
-    const renderBreadcrumbNode = (breadcrumbItem: JSX.Element, prefixCls: string) => {
+    const renderBreadcrumbNode = (breadcrumbItem: VueNode, prefixCls: string) => {
       const overlay = getPropsSlot(slots, props, 'overlay');
       if (overlay) {
         return (
@@ -59,7 +59,7 @@ export default defineComponent({
       const separator = getPropsSlot(slots, props, 'separator') ?? '/';
       const children = getPropsSlot(slots, props);
       const { class: cls, style, ...restAttrs } = attrs;
-      let link: JSX.Element;
+      let link: VueNode;
       if (props.href !== undefined) {
         link = (
           <a class={`${prefixCls.value}-link`} onClick={handleClick} {...restAttrs}>
diff --git a/components/locale-provider/__tests__/index.test.js b/components/locale-provider/__tests__/index.test.js
index 15e515dea..f7c78c3a0 100644
--- a/components/locale-provider/__tests__/index.test.js
+++ b/components/locale-provider/__tests__/index.test.js
@@ -206,7 +206,7 @@ describe('Locale Provider', () => {
         return null;
       },
     };
-    for (let locale of locales) {
+    for (const locale of locales) {
       document.body.innerHTML = '';
       mount(
         {
diff --git a/components/message/__tests__/index.test.js b/components/message/__tests__/index.test.js
index 99e8c3a48..d7d3e7dd0 100644
--- a/components/message/__tests__/index.test.js
+++ b/components/message/__tests__/index.test.js
@@ -107,7 +107,7 @@ describe('message', () => {
 
   // https:// github.com/ant-design/ant-design/issues/8201
   it('should hide message correctly', async () => {
-    let hide = message.loading('Action in progress..', 0);
+    const hide = message.loading('Action in progress..', 0);
     await Promise.resolve();
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
     hide();
diff --git a/components/modal/useModal/index.tsx b/components/modal/useModal/index.tsx
index c9ebae1c4..e0badecf6 100644
--- a/components/modal/useModal/index.tsx
+++ b/components/modal/useModal/index.tsx
@@ -12,15 +12,15 @@ import destroyFns from '../destroyFns';
 let uuid = 0;
 
 interface ElementsHolderRef {
-  addModal: (modal: () => JSX.Element) => () => void;
+  addModal: (modal: () => VueNode) => () => void;
 }
 
 const ElementsHolder = defineComponent({
   name: 'ElementsHolder',
   inheritAttrs: false,
   setup(_, { expose }) {
-    const modals = shallowRef<(() => JSX.Element)[]>([]);
-    const addModal = (modal: () => JSX.Element) => {
+    const modals = shallowRef<(() => VueNode)[]>([]);
+    const addModal = (modal: () => VueNode) => {
       modals.value.push(modal);
       modals.value = modals.value.slice();
       return () => {
diff --git a/components/progress/Circle.tsx b/components/progress/Circle.tsx
index a91a46ecb..4f885b821 100644
--- a/components/progress/Circle.tsx
+++ b/components/progress/Circle.tsx
@@ -23,7 +23,7 @@ const getMinPercent = (width: number): number => (CIRCLE_MIN_STROKE_WIDTH / widt
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
-  name: 'Circle',
+  name: 'ProgressCircle',
   inheritAttrs: false,
   props: initDefaultProps(circleProps(), {
     trailColor: null as unknown as string,
diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx
index ffc32a7fc..f2b5f100e 100644
--- a/components/progress/Line.tsx
+++ b/components/progress/Line.tsx
@@ -72,7 +72,7 @@ export const handleGradient = (
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
-  name: 'Line',
+  name: 'ProgressLine',
   inheritAttrs: false,
   props: lineProps(),
   setup(props, { slots, attrs }) {
diff --git a/components/statistic/Statistic.tsx b/components/statistic/Statistic.tsx
index ac87d2e2a..1ee91eec7 100644
--- a/components/statistic/Statistic.tsx
+++ b/components/statistic/Statistic.tsx
@@ -1,4 +1,4 @@
-import type { CSSProperties, ExtractPropTypes, PropType, VNode } from 'vue';
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import { defineComponent } from 'vue';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import StatisticNumber from './Number';
@@ -9,7 +9,7 @@ import useConfigInject from '../config-provider/hooks/useConfigInject';
 // CSSINJS
 import useStyle from './style';
 import { anyType, booleanType, functionType, someType, vNodeType } from '../_util/type';
-import type { CustomSlotsType } from '../_util/type';
+import type { CustomSlotsType, VueNode } from '../_util/type';
 
 export const statisticProps = () => ({
   prefixCls: String,
@@ -18,7 +18,7 @@ export const statisticProps = () => ({
   format: String,
   value: someType<valueType>([Number, String, Object]),
   valueStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
-  valueRender: functionType<(node: VNode | JSX.Element) => VNode | JSX.Element>(),
+  valueRender: functionType<(node: VueNode) => VueNode>(),
   formatter: anyType<Formatter>(),
   precision: Number,
   prefix: vNodeType(),
@@ -60,7 +60,7 @@ export default defineComponent({
       const formatter = props.formatter ?? (slots.formatter as unknown as Formatter);
       // data-for-update just for update component
       // https://github.com/vueComponent/ant-design-vue/pull/3170
-      let valueNode = (
+      let valueNode: VueNode = (
         <StatisticNumber
           data-for-update={Date.now()}
           {...{ ...props, prefixCls: pre, value, formatter }}
diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx
index 6e9808e0a..4ea725891 100644
--- a/components/typography/Base.tsx
+++ b/components/typography/Base.tsx
@@ -125,7 +125,7 @@ export const baseProps = () => ({
 
 const Base = defineComponent({
   compatConfig: { MODE: 3 },
-  name: 'Base',
+  name: 'TypographyBase',
   inheritAttrs: false,
   props: baseProps(),
   // emits: ['update:content'],
diff --git a/components/typography/__tests__/index.test.js b/components/typography/__tests__/index.test.js
index 36e664672..f369a7c12 100644
--- a/components/typography/__tests__/index.test.js
+++ b/components/typography/__tests__/index.test.js
@@ -214,7 +214,7 @@ describe('Typography', () => {
     });
 
     describe('copyable', () => {
-      // eslint-disable-next-line no-unused-vars
+      // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
       function copyTest(name, text, target, icon) {
         it(name, async () => {
           jest.useFakeTimers();
diff --git a/components/vc-dialog/Content.tsx b/components/vc-dialog/Content.tsx
index 9eb965a81..6cfa6ee27 100644
--- a/components/vc-dialog/Content.tsx
+++ b/components/vc-dialog/Content.tsx
@@ -12,7 +12,7 @@ export type ContentRef = {
 };
 export default defineComponent({
   compatConfig: { MODE: 3 },
-  name: 'Content',
+  name: 'DialogContent',
   inheritAttrs: false,
   props: {
     ...dialogPropTypes(),
diff --git a/components/vc-dialog/Dialog.tsx b/components/vc-dialog/Dialog.tsx
index 7508f7d53..80141d974 100644
--- a/components/vc-dialog/Dialog.tsx
+++ b/components/vc-dialog/Dialog.tsx
@@ -16,7 +16,7 @@ import { getMotionName, getUUID } from './util';
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
-  name: 'Dialog',
+  name: 'VcDialog',
   inheritAttrs: false,
   props: initDefaultProps(
     {
diff --git a/components/vc-dialog/Mask.tsx b/components/vc-dialog/Mask.tsx
index 4b858d10a..7ec2ced2d 100644
--- a/components/vc-dialog/Mask.tsx
+++ b/components/vc-dialog/Mask.tsx
@@ -3,7 +3,7 @@ import Transition, { getTransitionProps } from '../_util/transition';
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
-  name: 'Mask',
+  name: 'DialogMask',
   props: {
     prefixCls: String,
     visible: Boolean,
diff --git a/components/vc-image/src/Image.tsx b/components/vc-image/src/Image.tsx
index 083f9da26..c835c840e 100644
--- a/components/vc-image/src/Image.tsx
+++ b/components/vc-image/src/Image.tsx
@@ -64,7 +64,7 @@ export const mergeDefaultValue = <T extends object>(obj: T, defaultValues: objec
 let uuid = 0;
 const ImageInternal = defineComponent({
   compatConfig: { MODE: 3 },
-  name: 'Image',
+  name: 'VcImage',
   inheritAttrs: false,
   props: imageProps(),
   emits: ['click', 'error'],
diff --git a/components/vc-picker/PickerPanel.tsx b/components/vc-picker/PickerPanel.tsx
index 8677db201..9e7da6e5f 100644
--- a/components/vc-picker/PickerPanel.tsx
+++ b/components/vc-picker/PickerPanel.tsx
@@ -616,5 +616,5 @@ function PickerPanel<DateType>() {
   });
 }
 const InterPickerPanel = PickerPanel<any>();
-export default <DateType,>(props: MergedPickerPanelProps<DateType>): JSX.Element =>
+export default <DateType,>(props: MergedPickerPanelProps<DateType>) =>
   createVNode(InterPickerPanel, props);
diff --git a/components/vc-progress/src/Line.tsx b/components/vc-progress/src/Line.tsx
index b7a954673..00fd75575 100644
--- a/components/vc-progress/src/Line.tsx
+++ b/components/vc-progress/src/Line.tsx
@@ -6,7 +6,7 @@ import { propTypes } from './types';
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
-  name: 'Line',
+  name: 'ProgressLine',
   props: initDefaultProps(propTypes, defaultProps),
   setup(props) {
     const percentList = computed(() => {
diff --git a/components/vc-select/BaseSelect.tsx b/components/vc-select/BaseSelect.tsx
index 525242f49..7841ce8cd 100644
--- a/components/vc-select/BaseSelect.tsx
+++ b/components/vc-select/BaseSelect.tsx
@@ -28,7 +28,7 @@ import {
   watch,
   watchEffect,
 } from 'vue';
-import type { CSSProperties, ExtractPropTypes, PropType, VNode } from 'vue';
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { initDefaultProps, isValidElement } from '../_util/props-util';
 import isMobile from '../vc-util/isMobile';
@@ -721,7 +721,7 @@ export default defineComponent({
       // ============================= Arrow ==============================
       const mergedShowArrow =
         showArrow !== undefined ? showArrow : loading || (!multiple.value && mode !== 'combobox');
-      let arrowNode: VNode | JSX.Element;
+      let arrowNode: VueNode;
 
       if (mergedShowArrow) {
         arrowNode = (
@@ -742,7 +742,7 @@ export default defineComponent({
       }
 
       // ============================= Clear ==============================
-      let clearNode: VNode | JSX.Element;
+      let clearNode: VueNode;
       const onClearMouseDown: MouseEventHandler = () => {
         onClear?.();
 
@@ -851,7 +851,7 @@ export default defineComponent({
         ></SelectTrigger>
       );
       // >>> Render
-      let renderNode: VNode | JSX.Element;
+      let renderNode: VueNode;
 
       // Render raw
       if (customizeRawInputElement) {
diff --git a/components/vc-select/Select.tsx b/components/vc-select/Select.tsx
index 5b3b639a2..e94471f60 100644
--- a/components/vc-select/Select.tsx
+++ b/components/vc-select/Select.tsx
@@ -164,7 +164,7 @@ function isRawValue(value: DraftValueType): value is RawValueType {
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
-  name: 'Select',
+  name: 'VcSelect',
   inheritAttrs: false,
   props: initDefaultProps(selectProps(), {
     prefixCls: 'vc-select',
diff --git a/components/vc-select/Selector/Input.tsx b/components/vc-select/Selector/Input.tsx
index 8e2d83460..a4f7af89d 100644
--- a/components/vc-select/Selector/Input.tsx
+++ b/components/vc-select/Selector/Input.tsx
@@ -42,7 +42,7 @@ export type InputProps = Partial<ExtractPropTypes<typeof inputProps>>;
 
 const Input = defineComponent({
   compatConfig: { MODE: 3 },
-  name: 'Input',
+  name: 'SelectInput',
   inheritAttrs: false,
   props: inputProps,
   setup(props) {
diff --git a/components/vc-slick/track.jsx b/components/vc-slick/track.jsx
index a8665e401..3d7e76fcc 100644
--- a/components/vc-slick/track.jsx
+++ b/components/vc-slick/track.jsx
@@ -32,7 +32,7 @@ const getSlideClasses = spec => {
   } else {
     focusedSlide = spec.targetSlide;
   }
-  let slickCurrent = index === focusedSlide;
+  const slickCurrent = index === focusedSlide;
   return {
     'slick-slide': true,
     'slick-active': slickActive,
diff --git a/components/vc-slick/utils/innerSliderUtils.js b/components/vc-slick/utils/innerSliderUtils.js
index 0d834a71e..24203114c 100644
--- a/components/vc-slick/utils/innerSliderUtils.js
+++ b/components/vc-slick/utils/innerSliderUtils.js
@@ -461,7 +461,7 @@ export const swipeEnd = (e, spec) => {
       onSwipe(swipeDirection);
     }
     let slideCount, newSlide;
-    let activeSlide = infinite ? currentSlide : targetSlide;
+    const activeSlide = infinite ? currentSlide : targetSlide;
     switch (swipeDirection) {
       case 'left':
       case 'up':
diff --git a/components/vc-table/Body/index.tsx b/components/vc-table/Body/index.tsx
index 81bba38ec..4477585d6 100644
--- a/components/vc-table/Body/index.tsx
+++ b/components/vc-table/Body/index.tsx
@@ -22,7 +22,7 @@ export interface BodyProps<RecordType> {
 }
 
 export default defineComponent<BodyProps<any>>({
-  name: 'Body',
+  name: 'TableBody',
   props: [
     'data',
     'getRowKey',
diff --git a/components/vc-table/Footer/Summary.tsx b/components/vc-table/Footer/Summary.tsx
index 7fc0c382c..fb6db2679 100644
--- a/components/vc-table/Footer/Summary.tsx
+++ b/components/vc-table/Footer/Summary.tsx
@@ -7,7 +7,7 @@ export interface SummaryProps {
 
 let indexGuid = 0;
 const Summary = defineComponent<SummaryProps>({
-  name: 'Summary',
+  name: 'TableSummary',
   props: ['fixed'] as any,
   setup(props, { slots }) {
     const tableContext = useInjectTable();
diff --git a/components/vc-table/Footer/index.tsx b/components/vc-table/Footer/index.tsx
index 77112898c..d3e9ce8c9 100644
--- a/components/vc-table/Footer/index.tsx
+++ b/components/vc-table/Footer/index.tsx
@@ -13,7 +13,7 @@ export interface FooterProps<RecordType = DefaultRecordType> {
 }
 
 export default defineComponent<FooterProps>({
-  name: 'Footer',
+  name: 'TableFooter',
   inheritAttrs: false,
   props: ['stickyOffsets', 'flattenColumns'] as any,
   setup(props, { slots }) {
diff --git a/components/vc-table/Header/Header.tsx b/components/vc-table/Header/Header.tsx
index 2f8b26d14..f0ed7e9f7 100644
--- a/components/vc-table/Header/Header.tsx
+++ b/components/vc-table/Header/Header.tsx
@@ -91,7 +91,7 @@ export interface HeaderProps<RecordType = DefaultRecordType> {
 }
 
 export default defineComponent<HeaderProps>({
-  name: 'Header',
+  name: 'TableHeader',
   inheritAttrs: false,
   props: ['columns', 'flattenColumns', 'stickyOffsets', 'customHeaderRow'] as any,
   setup(props) {
diff --git a/components/vc-table/Table.tsx b/components/vc-table/Table.tsx
index bc418b971..fa14aaa8d 100644
--- a/components/vc-table/Table.tsx
+++ b/components/vc-table/Table.tsx
@@ -150,7 +150,7 @@ export interface TableProps<RecordType = DefaultRecordType> {
 }
 
 export default defineComponent<TableProps<DefaultRecordType>>({
-  name: 'Table',
+  name: 'VcTable',
   inheritAttrs: false,
   props: [
     'prefixCls',
diff --git a/components/vc-tooltip/src/Content.tsx b/components/vc-tooltip/src/Content.tsx
index 884bd43b5..1aa7cc09b 100644
--- a/components/vc-tooltip/src/Content.tsx
+++ b/components/vc-tooltip/src/Content.tsx
@@ -12,7 +12,7 @@ export type TooltipContentProps = Partial<ExtractPropTypes<typeof tooltipContent
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
-  name: 'Content',
+  name: 'TooltipContent',
   props: tooltipContentProps,
   setup(props: TooltipContentProps, { slots }) {
     return () => (
diff --git a/components/vc-tour/Mask.tsx b/components/vc-tour/Mask.tsx
index c4fc7b2bc..0a12ac435 100644
--- a/components/vc-tour/Mask.tsx
+++ b/components/vc-tour/Mask.tsx
@@ -23,7 +23,7 @@ export interface MaskProps {
   zIndex?: number;
 }
 const Mask = defineComponent({
-  name: 'Mask',
+  name: 'TourMask',
   props: {
     prefixCls: { type: String },
     pos: objectType<PosInfo>(), //	获取引导卡片指向的元素
diff --git a/package.json b/package.json
index 08b3a7ce9..bdd6cac20 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "lint:demo": "eslint --fix components/*/demo/*.vue",
     "lint:md": "eslint --fix *.md",
     "lint:script": "eslint . --ext '.js,.jsx,.ts,.tsx'",
-    "lint:site": "eslint -c ./.eslintrc.js --fix --ext .jsx,.js,.ts,.tsx,vue ./site",
+    "lint:site": "eslint --fix -c ./.eslintrc.js --ext .jsx,.js,.ts,.tsx,vue ./site",
     "lint:style": "stylelint \"{site,components}/**/*.less\" --syntax less",
     "codecov": "codecov",
     "routes": "node site/scripts/genrateRoutes.js",
diff --git a/site/src/components/DemoBox.vue b/site/src/components/DemoBox.vue
index 4dd28d210..8a602844b 100644
--- a/site/src/components/DemoBox.vue
+++ b/site/src/components/DemoBox.vue
@@ -182,7 +182,7 @@ export default defineComponent({
       type.value = type.value === 'TS' ? 'JS' : 'TS';
     };
     const handleCodeSandbox = () => {
-      const code = codeRef.value!.innerText;
+      const code = codeRef.value.innerText;
       const params = getCodeSandboxParams(code, {
         title: `${title.value} - ant-design-vue@${packageInfo.version}`,
       });
diff --git a/site/src/components/antdv-token-previewer/component-demos/menu/menu.tsx b/site/src/components/antdv-token-previewer/component-demos/menu/menu.tsx
index ebff1aea6..04c54ce79 100644
--- a/site/src/components/antdv-token-previewer/component-demos/menu/menu.tsx
+++ b/site/src/components/antdv-token-previewer/component-demos/menu/menu.tsx
@@ -10,6 +10,7 @@ const Demo = defineComponent({
   setup() {
     return () => {
       const onClick: MenuProps['onClick'] = e => {
+        // eslint-disable-next-line no-console
         console.log('click ', e);
       };
 
diff --git a/site/src/components/antdv-token-previewer/component-demos/menu/menuDanger.tsx b/site/src/components/antdv-token-previewer/component-demos/menu/menuDanger.tsx
index bf5c08a31..3b64be0fd 100644
--- a/site/src/components/antdv-token-previewer/component-demos/menu/menuDanger.tsx
+++ b/site/src/components/antdv-token-previewer/component-demos/menu/menuDanger.tsx
@@ -24,6 +24,7 @@ const items: MenuProps['items'] = [
 
 const Demo = () => {
   const onClick: MenuProps['onClick'] = e => {
+    // eslint-disable-next-line no-console
     console.log('click ', e);
   };
 
diff --git a/site/src/components/antdv-token-previewer/component-demos/modal/info.tsx b/site/src/components/antdv-token-previewer/component-demos/modal/info.tsx
index 5889fba09..ba744203d 100644
--- a/site/src/components/antdv-token-previewer/component-demos/modal/info.tsx
+++ b/site/src/components/antdv-token-previewer/component-demos/modal/info.tsx
@@ -15,6 +15,7 @@ const Demo = defineComponent({
           </div>
         ),
         onOk() {
+          // eslint-disable-next-line no-console
           console.log('i am ok');
         },
       });
diff --git a/site/src/components/antdv-token-previewer/component-demos/select/danger.tsx b/site/src/components/antdv-token-previewer/component-demos/select/danger.tsx
index e5aa26736..7eadfaa2c 100644
--- a/site/src/components/antdv-token-previewer/component-demos/select/danger.tsx
+++ b/site/src/components/antdv-token-previewer/component-demos/select/danger.tsx
@@ -6,6 +6,7 @@ import type { ComponentDemo } from '../../interface';
 import options from './data';
 
 const handleChange = (value: any) => {
+  // eslint-disable-next-line no-console
   console.log(`selected ${value}`);
 };
 
diff --git a/site/src/components/antdv-token-previewer/component-demos/select/icon.tsx b/site/src/components/antdv-token-previewer/component-demos/select/icon.tsx
index e26952089..6d4ac1e0d 100644
--- a/site/src/components/antdv-token-previewer/component-demos/select/icon.tsx
+++ b/site/src/components/antdv-token-previewer/component-demos/select/icon.tsx
@@ -6,6 +6,7 @@ import type { ComponentDemo } from '../../interface';
 import options from './data';
 
 const handleChange = (value: any) => {
+  // eslint-disable-next-line no-console
   console.log(`selected ${value}`);
 };
 
diff --git a/site/src/components/antdv-token-previewer/component-demos/select/selectTag.tsx b/site/src/components/antdv-token-previewer/component-demos/select/selectTag.tsx
index dc05ebbd9..e358ed019 100644
--- a/site/src/components/antdv-token-previewer/component-demos/select/selectTag.tsx
+++ b/site/src/components/antdv-token-previewer/component-demos/select/selectTag.tsx
@@ -6,6 +6,7 @@ import type { ComponentDemo } from '../../interface';
 import options from './data';
 
 const handleChange = (value: any) => {
+  // eslint-disable-next-line no-console
   console.log(`selected ${value}`);
 };
 
diff --git a/site/src/components/antdv-token-previewer/component-demos/select/warning.tsx b/site/src/components/antdv-token-previewer/component-demos/select/warning.tsx
index d1b4f9f7f..a7d977726 100644
--- a/site/src/components/antdv-token-previewer/component-demos/select/warning.tsx
+++ b/site/src/components/antdv-token-previewer/component-demos/select/warning.tsx
@@ -6,6 +6,7 @@ import type { ComponentDemo } from '../../interface';
 import options from './data';
 
 const handleChange = (value: any) => {
+  // eslint-disable-next-line no-console
   console.log(`selected ${value}`);
 };
 
diff --git a/site/src/components/antdv-token-previewer/component-demos/table/filterTable.tsx b/site/src/components/antdv-token-previewer/component-demos/table/filterTable.tsx
index 65c0c584b..4330545cf 100644
--- a/site/src/components/antdv-token-previewer/component-demos/table/filterTable.tsx
+++ b/site/src/components/antdv-token-previewer/component-demos/table/filterTable.tsx
@@ -90,6 +90,7 @@ const data = [
 ];
 
 const onChange: TableProps<TableData>['onChange'] = (pagination, filters, sorter, extra) => {
+  // eslint-disable-next-line no-console
   console.log('params', pagination, filters, sorter, extra);
 };
 
diff --git a/site/src/components/rice/CarbonAds.vue b/site/src/components/rice/CarbonAds.vue
index 14e3e0eb8..e43718c78 100644
--- a/site/src/components/rice/CarbonAds.vue
+++ b/site/src/components/rice/CarbonAds.vue
@@ -19,7 +19,7 @@ export default {
   },
   watch: {
     $route(e, t) {
-      let adId = '#carbonads';
+      const adId = '#carbonads';
       // if(isGitee) {
       //   adId = '#cf';
       // }
diff --git a/site/src/directives/clipboard/clipboard-action.js b/site/src/directives/clipboard/clipboard-action.js
index 679e1529d..bbc5e4135 100644
--- a/site/src/directives/clipboard/clipboard-action.js
+++ b/site/src/directives/clipboard/clipboard-action.js
@@ -63,7 +63,7 @@ class ClipboardAction {
     this.fakeElem.style.position = 'absolute';
     this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px';
     // Move element to the same position vertically
-    let yPosition = window.pageYOffset || document.documentElement.scrollTop;
+    const yPosition = window.pageYOffset || document.documentElement.scrollTop;
     this.fakeElem.style.top = `${yPosition}px`;
 
     this.fakeElem.setAttribute('readonly', '');
diff --git a/site/src/directives/clipboard/closest.js b/site/src/directives/clipboard/closest.js
index a8c5e435f..c16717ffe 100644
--- a/site/src/directives/clipboard/closest.js
+++ b/site/src/directives/clipboard/closest.js
@@ -1,10 +1,10 @@
-let DOCUMENT_NODE_TYPE = 9;
+const DOCUMENT_NODE_TYPE = 9;
 
 /**
  * A polyfill for Element.matches()
  */
 if (typeof Element !== 'undefined' && !Element.prototype.matches) {
-  let proto = Element.prototype;
+  const proto = Element.prototype;
 
   proto.matches =
     proto.matchesSelector ||
diff --git a/site/src/directives/clipboard/delegate.js b/site/src/directives/clipboard/delegate.js
index 0b120f643..0b9efe2c5 100644
--- a/site/src/directives/clipboard/delegate.js
+++ b/site/src/directives/clipboard/delegate.js
@@ -1,3 +1,5 @@
+/* eslint-disable prefer-spread */
+/* eslint-disable prefer-rest-params */
 import closest from './closest';
 
 /**
@@ -11,7 +13,7 @@ import closest from './closest';
  * @return {Object}
  */
 function _delegate(element, selector, type, callback, useCapture) {
-  let listenerFn = listener.apply(this, arguments);
+  const listenerFn = listener.apply(this, arguments);
 
   element.addEventListener(type, listenerFn, useCapture);
 
diff --git a/site/src/directives/clipboard/is.js b/site/src/directives/clipboard/is.js
index 99ad16e29..00f4ddcbc 100644
--- a/site/src/directives/clipboard/is.js
+++ b/site/src/directives/clipboard/is.js
@@ -15,7 +15,7 @@ export const node = function (value) {
  * @return {Boolean}
  */
 export const nodeList = function (value) {
-  let type = Object.prototype.toString.call(value);
+  const type = Object.prototype.toString.call(value);
 
   return (
     value !== undefined &&
@@ -42,7 +42,7 @@ export const string = function (value) {
  * @return {Boolean}
  */
 export const fn = function (value) {
-  let type = Object.prototype.toString.call(value);
+  const type = Object.prototype.toString.call(value);
 
   return type === '[object Function]';
 };
diff --git a/site/src/directives/clipboard/select.js b/site/src/directives/clipboard/select.js
index 20657522d..4902a6f21 100644
--- a/site/src/directives/clipboard/select.js
+++ b/site/src/directives/clipboard/select.js
@@ -6,7 +6,7 @@ function select(element) {
 
     selectedText = element.value;
   } else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
-    let isReadOnly = element.hasAttribute('readonly');
+    const isReadOnly = element.hasAttribute('readonly');
 
     if (!isReadOnly) {
       element.setAttribute('readonly', '');
@@ -25,8 +25,8 @@ function select(element) {
       element.focus();
     }
 
-    let selection = window.getSelection();
-    let range = document.createRange();
+    const selection = window.getSelection();
+    const range = document.createRange();
 
     range.selectNodeContents(element);
     selection.removeAllRanges();
diff --git a/site/src/directives/clipboard/tiny-emitter.js b/site/src/directives/clipboard/tiny-emitter.js
index c12c11da1..0f22f0f06 100644
--- a/site/src/directives/clipboard/tiny-emitter.js
+++ b/site/src/directives/clipboard/tiny-emitter.js
@@ -1,3 +1,4 @@
+/* eslint-disable prefer-rest-params */
 function E() {
   // Keep this empty so it's easier to inherit from
   // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
@@ -5,7 +6,7 @@ function E() {
 
 E.prototype = {
   on(name, callback, ctx) {
-    let e = this.e || (this.e = {});
+    const e = this.e || (this.e = {});
 
     (e[name] || (e[name] = [])).push({
       fn: callback,
@@ -16,7 +17,8 @@ E.prototype = {
   },
 
   once(name, callback, ctx) {
-    let self = this;
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this;
     function listener() {
       self.off(name, listener);
       callback.apply(ctx, arguments);
@@ -27,10 +29,10 @@ E.prototype = {
   },
 
   emit(name) {
-    let data = [].slice.call(arguments, 1);
-    let evtArr = ((this.e || (this.e = {}))[name] || []).slice();
+    const data = [].slice.call(arguments, 1);
+    const evtArr = ((this.e || (this.e = {}))[name] || []).slice();
     let i = 0;
-    let len = evtArr.length;
+    const len = evtArr.length;
 
     for (i; i < len; i++) {
       evtArr[i].fn.apply(evtArr[i].ctx, data);
@@ -40,9 +42,9 @@ E.prototype = {
   },
 
   off(name, callback) {
-    let e = this.e || (this.e = {});
-    let evts = e[name];
-    let liveEvents = [];
+    const e = this.e || (this.e = {});
+    const evts = e[name];
+    const liveEvents = [];
 
     if (evts && callback) {
       for (let i = 0, len = evts.length; i < len; i++) {
diff --git a/site/src/layouts/Demo.vue b/site/src/layouts/Demo.vue
index f41e0f1af..1e90ec4b0 100644
--- a/site/src/layouts/Demo.vue
+++ b/site/src/layouts/Demo.vue
@@ -13,7 +13,7 @@
     <slot />
     <!-- <GoogleAds v-if="showAd" :key="`goo-${route.path}`" /> -->
     <section class="markdown api-container" v-html="api"></section>
-    <Contributor :isZn="isZhCN" />
+    <Contributor :is-zn="isZhCN" />
   </article>
 </template>
 <script lang="ts">
diff --git a/site/src/theme/template/IconDisplay/index.jsx b/site/src/theme/template/IconDisplay/index.jsx
index 66c5dc380..bc6ba630d 100644
--- a/site/src/theme/template/IconDisplay/index.jsx
+++ b/site/src/theme/template/IconDisplay/index.jsx
@@ -40,7 +40,7 @@ const IconDisplay = defineComponent({
 
       return Object.keys(categories)
         .map(key => {
-          let iconList = categories[key];
+          const iconList = categories[key];
 
           return {
             category: key,
diff --git a/site/typings.d.ts b/site/typings.d.ts
index 7852412a5..7ceb46ad9 100644
--- a/site/typings.d.ts
+++ b/site/typings.d.ts
@@ -1,7 +1,7 @@
 declare module '*.vue' {
   import type { DefineComponent } from 'vue';
   // eslint-disable-next-line @typescript-eslint/ban-types
-  const component: DefineComponent<any, any, any> & { readonly pageDate?: PageData };
+  const component: DefineComponent<any, any, any>;
   export default component;
 }
 
diff --git a/tsconfig.json b/tsconfig.json
index 6307b62e6..d9d72d66c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,6 +13,7 @@
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "jsx": "preserve",
+    "jsxImportSource": "vue",
     "noUnusedParameters": true,
     "noUnusedLocals": true,
     "noImplicitAny": false,