diff --git a/.eslintrc.js b/.eslintrc.js
index 5d6c4a7f69..05dd917dff 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -88,12 +88,10 @@ module.exports = {
       2,
       {
         singleline: 20,
-        multiline: {
-          max: 1,
-          allowFirstLine: false,
-        },
+        multiline: 1,
       },
     ],
+    'vue/multi-word-component-names': 'off',
   },
   globals: {
     h: true,
diff --git a/package.json b/package.json
index 3ec2a5c538..5aab9f9f28 100644
--- a/package.json
+++ b/package.json
@@ -102,15 +102,15 @@
     "@types/markdown-it": "^10.0.2",
     "@types/node": "^14.0.0",
     "@types/postcss-load-config": "^2.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.1.0",
-    "@typescript-eslint/parser": "^4.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
     "@vitejs/plugin-vue": "^1.2.4",
     "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/babel-plugin-jsx": "^1.0.0",
     "@vue/cli-plugin-eslint": "^5.0.0-0",
     "@vue/compiler-sfc": "^3.1.0",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
+    "@vue/eslint-config-typescript": "^9.0.0",
     "@vue/test-utils": "^2.0.0-0",
     "@webpack-cli/serve": "^1.3.1",
     "acorn": "^8.0.0",
@@ -141,15 +141,15 @@
     "enquire-js": "^0.2.1",
     "esbuild": "~0.12.29",
     "escape-html": "^1.0.3",
-    "eslint": "^7.25.0",
+    "eslint": "^8.3.0",
     "eslint-config-prettier": "^8.0.0",
     "eslint-plugin-html": "^6.0.0",
     "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.3.6",
+    "eslint-plugin-jest": "^25.3.0",
     "eslint-plugin-markdown": "^2.0.0",
     "eslint-plugin-no-explicit-type-exports": "^0.12.0",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-vue": "^7.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.1.1",
     "fast-glob": "^3.2.7",
     "fetch-jsonp": "^1.1.3",
     "fs-extra": "^10.0.0",
@@ -213,7 +213,7 @@
     "through2": "^3.0.0",
     "ts-jest": "^26.4.1",
     "ts-loader": "^9.1.0",
-    "typescript": "~4.3.5",
+    "typescript": "~4.5.2",
     "umi-mock-middleware": "^1.0.0",
     "umi-request": "^1.3.5",
     "url-loader": "^3.0.0",
@@ -222,7 +222,7 @@
     "vue-antd-md-loader": "^1.2.1-beta.1",
     "vue-clipboard2": "0.3.3",
     "vue-draggable-resizable": "^2.1.0",
-    "vue-eslint-parser": "^7.0.0",
+    "vue-eslint-parser": "^8.0.0",
     "vue-i18n": "^9.1.7",
     "vue-infinite-scroll": "^2.0.2",
     "vue-jest": "^5.0.0-alpha.3",
diff --git a/plugin/docs/index.ts b/plugin/docs/index.ts
index 48af8a4365..4031c0b2e7 100644
--- a/plugin/docs/index.ts
+++ b/plugin/docs/index.ts
@@ -14,14 +14,17 @@ export default (options: Options = {}): Plugin => {
   const markdownToVue = createMarkdownToVueRenderFn(root, markdown);
   return {
     name: 'vueToMdToVue',
-    transform(code, id) {
+    async transform(code, id) {
       if (
         (id.endsWith('.vue') && id.indexOf('/demo/') > -1 && id.indexOf('index.vue') === -1) ||
         id.indexOf('/examples/App.vue') > -1
       ) {
         const res = vueToMarkdown(code, id);
         // transform .md files into vueSrc so plugin-vue can handle it
-        return { code: res.ignore ? res.vueSrc : markdownToVue(res.vueSrc, id).vueSrc, map: null };
+        return {
+          code: res.ignore ? res.vueSrc : (await markdownToVue(res.vueSrc, id)).vueSrc,
+          map: null,
+        };
       }
     },
   };
diff --git a/plugin/md/index.ts b/plugin/md/index.ts
index 94db87648f..b79a7b2d25 100644
--- a/plugin/md/index.ts
+++ b/plugin/md/index.ts
@@ -12,10 +12,10 @@ export default (options: Options = {}): Plugin => {
   const markdownToVue = createMarkdownToVueRenderFn(root, markdown);
   return {
     name: 'mdToVue',
-    transform(code, id) {
+    async transform(code, id) {
       if (id.endsWith('.md')) {
         // transform .md files into vueSrc so plugin-vue can handle it
-        return { code: markdownToVue(code, id).vueSrc, map: null };
+        return { code: (await markdownToVue(code, id)).vueSrc, map: null };
       }
     },
   };
diff --git a/plugin/md/markdownToVue.ts b/plugin/md/markdownToVue.ts
index f8a2c42d0b..ad82dfea72 100644
--- a/plugin/md/markdownToVue.ts
+++ b/plugin/md/markdownToVue.ts
@@ -23,10 +23,10 @@ interface MarkdownCompileResult {
 export function createMarkdownToVueRenderFn(
   root: string = process.cwd(),
   options: MarkdownOptions = {},
-): any {
+) {
   const md = createMarkdownRenderer(options);
 
-  return (src: string, file: string): MarkdownCompileResult => {
+  return async (src: string, file: string): Promise<MarkdownCompileResult> => {
     const relativePath = slash(path.relative(root, file));
 
     const cached = cache.get(src);
@@ -57,7 +57,7 @@ export function createMarkdownToVueRenderFn(
       lastUpdated: Math.round(fs.statSync(file).mtimeMs),
     };
     const newContent = data.vueCode
-      ? genComponentCode(md, data, pageData)
+      ? await genComponentCode(md, data, pageData)
       : `
 <template><article class="markdown">${html}</article></template>
 
@@ -69,7 +69,7 @@ ${fetchCode(content, 'style')}
 
     debug(`[render] ${file} in ${Date.now() - start}ms.`);
     const result = {
-      vueSrc: newContent?.trim(),
+      vueSrc: newContent.trim(),
       pageData,
     };
     cache.set(src, result);
@@ -77,7 +77,7 @@ ${fetchCode(content, 'style')}
   };
 }
 
-function genComponentCode(md: MarkdownRenderer, data: PageData, pageData: PageData) {
+async function genComponentCode(md: MarkdownRenderer, data: PageData, pageData: PageData) {
   const { vueCode, headers = [] } = data as MarkdownParsedData;
   const cn = headers.find(h => h.title === 'zh-CN')?.content;
   const us = headers.find(h => h.title === 'en-US')?.content;
@@ -91,7 +91,7 @@ ${vueCode?.trim()}
   const script = fetchCode(vueCode, 'script');
   const style = fetchCode(vueCode, 'style');
   const scriptContent = fetchCode(vueCode, 'scriptContent');
-  let jsCode = tsToJs(scriptContent)?.trim();
+  let jsCode = (await tsToJs(scriptContent)).trim();
   jsCode = jsCode
     ? `<script>
 ${jsCode}
diff --git a/plugin/md/utils/tsToJs.ts b/plugin/md/utils/tsToJs.ts
index b0ee312a32..e19801418d 100644
--- a/plugin/md/utils/tsToJs.ts
+++ b/plugin/md/utils/tsToJs.ts
@@ -1,12 +1,12 @@
 import { transformSync } from '@babel/core';
-import { CLIEngine } from 'eslint';
+import { ESLint } from 'eslint';
 import path from 'path';
-const engine = new CLIEngine({
+const engine = new ESLint({
   fix: true,
   useEslintrc: false,
   baseConfig: require(path.join(process.cwd(), '.eslintrc.js')),
 });
-const tsToJs = (content: string): string => {
+const tsToJs = async (content: string): Promise<string> => {
   if (!content) {
     return '';
   }
@@ -21,8 +21,8 @@ const tsToJs = (content: string): string => {
       ],
     ],
   });
-  const report = engine.executeOnText(code);
-  let output = report.results[0].output;
+  const report = await engine.lintText(code);
+  let output = report[0].output;
   output = output ? output.trim() : output;
   return output;
 };
diff --git a/site/scripts/genrateRoutes.js b/site/scripts/genrateRoutes.js
index ae42914be5..6458a72a90 100644
--- a/site/scripts/genrateRoutes.js
+++ b/site/scripts/genrateRoutes.js
@@ -3,7 +3,7 @@ const globby = require('globby');
 const fs = require('fs');
 const path = require('path');
 const matter = require('gray-matter');
-const { CLIEngine } = require('eslint');
+const { ESLint } = require('eslint');
 
 (async () => {
   const paths = await globby('components/*/index.*.md');
@@ -30,13 +30,13 @@ export default [
   )}
 ];`;
 
-  const engine = new CLIEngine({
+  const engine = new ESLint({
     fix: true,
     useEslintrc: false,
     baseConfig: require(path.join(process.cwd(), '.eslintrc.js')),
   });
 
-  const report = engine.executeOnText(TEMPLATE);
+  const report = await engine.lintText(TEMPLATE);
 
-  fs.writeFileSync('site/src/router/demoRoutes.js', report.results[0].output);
+  fs.writeFileSync('site/src/router/demoRoutes.js', report[0].output);
 })();