diff --git a/dolphinscheduler-ui/.eslintignore b/dolphinscheduler-ui/.eslintignore
new file mode 100644
index 0000000000..cd1b8213b3
--- /dev/null
+++ b/dolphinscheduler-ui/.eslintignore
@@ -0,0 +1,7 @@
+/_test_/
+/build/
+/dist/
+/node/
+/node_modules/
+/target/
+/*.js
diff --git a/dolphinscheduler-ui/.eslintrc.yml b/dolphinscheduler-ui/.eslintrc.yml
index 8d4020f7c4..d0ef4970f1 100644
--- a/dolphinscheduler-ui/.eslintrc.yml
+++ b/dolphinscheduler-ui/.eslintrc.yml
@@ -26,9 +26,16 @@ globals:
   Atomics: readonly
   SharedArrayBuffer: readonly
   PUBLIC_PATH: readonly
+  $t: readonly
 parserOptions:
   ecmaVersion: 2018
   sourceType: module
 plugins:
   - vue
-rules: {}
+rules:
+  vue/script-indent: ['error', 2, { 'baseIndent': 1, 'switchCase': 1 }]
+  vue/no-unused-components: 'off'
+  no-mixed-operators: 'off'
+  prefer-const: 'off'
+overrides:
+  - { 'files': ['*.vue'], 'rules': { 'indent': 'off' }}
diff --git a/dolphinscheduler-ui/build/config.js b/dolphinscheduler-ui/build/config.js
index 11bbec550f..77de5b690e 100644
--- a/dolphinscheduler-ui/build/config.js
+++ b/dolphinscheduler-ui/build/config.js
@@ -125,6 +125,16 @@ const baseConfig = {
   },
   module: {
     rules: [
+      {
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [resolve('src')],
+        options: {
+          formatter: require('eslint-friendly-formatter'),
+          emitWarning: true
+        }
+      },
       {
         test: /\.vue$/,
         loader: 'vue-loader',
diff --git a/dolphinscheduler-ui/build/webpack.config.dev.js b/dolphinscheduler-ui/build/webpack.config.dev.js
index d443bf8366..ea250330ad 100644
--- a/dolphinscheduler-ui/build/webpack.config.dev.js
+++ b/dolphinscheduler-ui/build/webpack.config.dev.js
@@ -19,6 +19,8 @@ const merge = require('webpack-merge')
 const { assetsDir, baseConfig } = require('./config')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const ProgressPlugin = require('progress-bar-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
 const getEnv = require('env-parse').getEnv
 
 const config = merge.smart(baseConfig, {
@@ -33,6 +35,7 @@ const config = merge.smart(baseConfig, {
     port: getEnv('DEV_PORT', 8888),
     host: getEnv('DEV_HOST', 'localhost'),
     noInfo: false,
+    overlay: { warnings: false, errors: true },
     historyApiFallback: true,
     disableHostCheck: true,
     proxy: {
@@ -42,12 +45,12 @@ const config = merge.smart(baseConfig, {
         changeOrigin: true
       }
     },
-    progress: false,
-    quiet: false,
+    progress: true,
+    quiet: true,
     stats: {
       colors: true
     },
-    clientLogLevel: 'none'
+    clientLogLevel: 'warning'
   },
   plugins: [
     new ProgressPlugin(),
@@ -57,4 +60,36 @@ const config = merge.smart(baseConfig, {
   mode: 'development'
 })
 
-module.exports = config
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.devServer.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      config.devServer.port = port
+      // Add FriendlyErrorsPlugin
+      config.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${config.devServer.host}:${port}`],
+        },
+        onErrors: () => {
+          const notifier = require('node-notifier')
+          return (severity, errors) => {
+            if (severity !== 'error') return
+            const error = errors[0]
+            const filename = error.file && error.file.split('!').pop()
+            notifier.notify({
+              title: packageConfig.name,
+              message: severity + ': ' + error.name,
+              subtitle: filename || ''
+            })
+          }
+        }
+      }))
+      resolve(config)
+    }
+  })
+})
diff --git a/dolphinscheduler-ui/package.json b/dolphinscheduler-ui/package.json
index 8a9291c43d..a2cd72c7f1 100644
--- a/dolphinscheduler-ui/package.json
+++ b/dolphinscheduler-ui/package.json
@@ -8,7 +8,7 @@
     "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.dev.js",
     "clean": "rimraf dist",
     "start": "npm run dev",
-    "lint": "eslint ./src --fix",
+    "lint": "eslint ./src --ext .js,.vue --fix",
     "build:release": "npm run clean && cross-env NODE_ENV=production PUBLIC_PATH=/dolphinscheduler/ui webpack --config ./build/webpack.config.release.js"
   },
   "dependencies": {
@@ -55,18 +55,23 @@
     "env-parse": "^1.0.5",
     "eslint": "^6.8.0",
     "eslint-config-standard": "^14.1.1",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.2.0",
     "file-loader": "^5.0.2",
+    "friendly-errors-webpack-plugin": "^1.7.0",
     "globby": "^8.0.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.8.2",
+    "node-notifier": "^8.0.0",
     "node-sass": "^4.14.1",
     "pack": "^2.2.0",
+    "portfinder": "^1.0.28",
     "postcss-loader": "^3.0.0",
     "progress-bar-webpack-plugin": "^1.12.1",
     "rimraf": "^2.6.2",