diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 178ae537b88021e15fe81f18d14adf0f859e056a..78e240f3a2192c93a7452c800a75f09e595cd7d4 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -34,10 +34,10 @@
         language: system
         files: \.(py)$
 
-#-   repo: local
-#    hooks:
-#    -   id: eslint-format-checker
-#        name: eslint-format-checker
-#        description: Format files with ESLint.
-#        entry: bash ./.eslint_format.hook
-#        language: system
+-   repo: local
+    hooks:
+    -   id: eslint-format-checker
+        name: eslint-format-checker
+        description: Format files with ESLint.
+        entry: bash ./.eslint_format.hook
+        language: system
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index f66d7f66e2375ec8d6ba00d7791edbb6f86efb80..b579de16de63113b2511072632a53eb0b1a43a64 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -5,11 +5,20 @@ module.exports = {
     'plugin:vue/essential',
     'plugin:vue/strongly-recommended',
   ],
+  parserOptions: {
+    "sourceType": "module",
+  },
   rules: {
     // override/add rules settings here, such as:
     'vue/no-unused-vars': 'warn',
     'max-len': ["warn", 120],
     "vue/prop-name-casing": ["error"],
     'vue/script-indent': 'error',
+
+    // The following rules should apply eventually. Turn them off for now
+    // so we can have pre-commit running
+    'no-invalid-this': 'off',
+    'require-jsdoc': 'off',
+    'no-unused-vars': 'off',
   }
 }
diff --git a/frontend/src/audio/Audio.vue b/frontend/src/audio/Audio.vue
index e5ff7120e8a62c617cbde2fbf1cbfd51dc212914..f05d6d3c13594b3ca03ac5db5d9c1e84d6bc5632 100644
--- a/frontend/src/audio/Audio.vue
+++ b/frontend/src/audio/Audio.vue
@@ -31,7 +31,7 @@
 <script>
 
 import {getPluginAudioTags, getRuns} from '../service';
-import {debounce, flatten, uniq, isArray} from 'lodash';
+import {debounce, flatten, uniq} from 'lodash';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 
 import Config from './ui/Config';
diff --git a/frontend/src/audio/ui/AudioPanel.vue b/frontend/src/audio/ui/AudioPanel.vue
index bdd7bbd6cbd1dd483ec74b496d6327195ecd1d43..a1e40290ef25f2ac9028dae59b9bf08bf67d32f9 100644
--- a/frontend/src/audio/ui/AudioPanel.vue
+++ b/frontend/src/audio/ui/AudioPanel.vue
@@ -8,7 +8,7 @@
     <p>
       <span>Step:</span>
       <span>{{ audioData.step }}</span>
-      <span class="visual-del-audio-time">{{ audioData.wall_time | formatTime }}</span>
+      <span class="visual-del-audio-time">{{ audioData.wallTime | formatTime }}</span>
     </p>
     <v-slider
       :max="steps"
@@ -31,7 +31,24 @@ import {getPluginAudioAudio} from '../../service';
 const intervalTime = 30;
 
 export default {
-  props: ['tagInfo', 'runs', 'running', 'runsItems'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    tagInfo: {
+      type: Object,
+      required: true,
+    },
+    runs: {
+      type: Array,
+      required: true,
+    },
+    running: {
+      type: Boolean,
+      required: true,
+    },
+  },
   computed: {
     steps() {
       let data = this.data || [];
@@ -85,13 +102,13 @@ export default {
     currentIndex: function(index) {
       if (this.data && this.data[index]) {
         let currentAudioInfo = this.data ? this.data[index] : {};
-        let {query, step, wall_time} = currentAudioInfo;
-        let url = '/data/plugin/audio/individualAudio?ts=' + wall_time;
+        let {query, step, wallTime} = currentAudioInfo;
+        let url = '/data/plugin/audio/individualAudio?ts=' + wallTime;
         let audioSrc = [url, query].join('&');
         this.audioData = {
           audioSrc,
           step,
-          wall_time,
+          wallTime,
         };
       }
     },
diff --git a/frontend/src/audio/ui/AudioPanelContainer.vue b/frontend/src/audio/ui/AudioPanelContainer.vue
index d23ccaf021977fa28ad9b6499f7cc40dae03476a..68b6ea4cbde24d42b50ca1a08ea633a2d1a217b6 100644
--- a/frontend/src/audio/ui/AudioPanelContainer.vue
+++ b/frontend/src/audio/ui/AudioPanelContainer.vue
@@ -29,7 +29,24 @@ import AudioPanel from './AudioPanel';
 import {cloneDeep, flatten} from 'lodash';
 
 export default {
-  props: ['config', 'runsItems', 'tagList', 'title'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    tagList: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
   components: {
     'ui-audio': AudioPanel,
     'ui-expand-panel': ExpandPanel,
diff --git a/frontend/src/audio/ui/Config.vue b/frontend/src/audio/ui/Config.vue
index 1de48329ac04f9e3138732aec547dd99ce1f2a6c..bc9511c7688f076c94b61f33193fd06b98de201a 100644
--- a/frontend/src/audio/ui/Config.vue
+++ b/frontend/src/audio/ui/Config.vue
@@ -33,8 +33,14 @@
 
 export default {
   props: {
-    runsItems: Array,
-    config: Object,
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
diff --git a/frontend/src/common/component/AppMenu.vue b/frontend/src/common/component/AppMenu.vue
index 52d173ab77b0224dadfa5066810b04b697d3d400..98c60aedec9404622f6555039cc4247c55192daf 100644
--- a/frontend/src/common/component/AppMenu.vue
+++ b/frontend/src/common/component/AppMenu.vue
@@ -22,7 +22,12 @@
 
 <script>
 export default {
-  props: ['initialRoute'],
+  props: {
+    initialRoute: {
+      type: String,
+      required: true,
+    },
+  },
   name: 'AppMenu',
   data() {
     return {
diff --git a/frontend/src/common/component/ExpandPanel.vue b/frontend/src/common/component/ExpandPanel.vue
index d2d1e8a176278d6100620cadadad4e63f0cd3e61..f00da6b92faafa6e394286147273266299088b36 100644
--- a/frontend/src/common/component/ExpandPanel.vue
+++ b/frontend/src/common/component/ExpandPanel.vue
@@ -23,8 +23,14 @@
 <script>
 export default {
   props: {
-    title: String,
-    info: Number,
+    title: {
+      type: String,
+      required: true,
+    },
+    info: {
+      type: Number,
+      required: true,
+    },
   },
   computed: {
     iconName() {
diff --git a/frontend/src/graph/ui/Config.vue b/frontend/src/graph/ui/Config.vue
index 373c235d37c37a5dd6487b75c5126f8a4a435360..3e1b27d24b6286f9dc1c02f2924d354142a38795 100644
--- a/frontend/src/graph/ui/Config.vue
+++ b/frontend/src/graph/ui/Config.vue
@@ -54,7 +54,16 @@
 <script>
 
 export default {
-  props: ['config', 'curNode'],
+  props: {
+    curNode: {
+      type: Object,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+  },
   methods: {
     handleFitScreen() {
       this.$emit('fitScreen');
diff --git a/frontend/src/high-dimensional/HighDimensional.vue b/frontend/src/high-dimensional/HighDimensional.vue
index 4f4b704e654f112f7440e0098430a294cd710ef9..6eb7bcef2a42701c57c9d507f77e95fcdd7d9bfe 100644
--- a/frontend/src/high-dimensional/HighDimensional.vue
+++ b/frontend/src/high-dimensional/HighDimensional.vue
@@ -6,7 +6,7 @@
         :display-word-label="config.displayWordLabel"
         :search-text="config.searchText"
         :dimension="config.dimension"
-        :embedding_data="embedding_data"
+        :embedding-data="embeddingData"
       />
     </div>
     <div class="visual-dl-page-right">
@@ -40,7 +40,7 @@ export default {
         reduction: 'tsne',
         running: true,
       },
-      embedding_data: [],
+      embeddingData: [],
     };
   },
   created() {
@@ -65,14 +65,14 @@ export default {
         reduction: this.config.reduction,
       };
       getHighDimensionalDatasets(params).then(({errno, data}) => {
-        let vector_data = data.embedding;
+        let vectorData = data.embedding;
         let labels = data.labels;
 
-        for ( let i = 0; i < vector_data.length; i ++) {
-          vector_data[i].push(labels[i]);
+        for ( let i = 0; i < vectorData.length; i ++) {
+          vectorData[i].push(labels[i]);
         }
 
-        this.embedding_data = vector_data;
+        this.embeddingData = vectorData;
       });
     },
   },
diff --git a/frontend/src/high-dimensional/ui/Chart.vue b/frontend/src/high-dimensional/ui/Chart.vue
index 6d64a5f700b8db8343ba6b565559cf5bec93b39f..c1fd88e8d5e8b5ccd5f8fcdd347d81d496d0fee1 100644
--- a/frontend/src/high-dimensional/ui/Chart.vue
+++ b/frontend/src/high-dimensional/ui/Chart.vue
@@ -14,7 +14,28 @@ import echarts from 'echarts';
 import 'echarts-gl';
 
 export default {
-  props: ['config', 'displayWordLabel', 'searchText', 'embedding_data', 'dimension'],
+  props: {
+    embeddingData: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    displayWordLabel: {
+      type: Boolean,
+      required: true,
+    },
+    searchText: {
+      type: String,
+      required: true,
+    },
+    dimension: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       width: 900,
@@ -36,7 +57,7 @@ export default {
     this.setDisplayWordLabel();
   },
   watch: {
-    embedding_data: function(val) {
+    embeddingData: function(val) {
       this.myChart.hideLoading();
       this.myChart.setOption({
         series: [{
@@ -62,7 +83,7 @@ export default {
     },
     searchText: function(val) {
       // Filter the data that has the hasPrefix
-      let matched_words = [];
+      let matchedWords = [];
       if (val != '') {
         val = val.toLowerCase();
 
@@ -71,7 +92,7 @@ export default {
           return (typeof word == 'string' && word.toLowerCase().startsWith(val));
         }
 
-        matched_words = this.embedding_data.filter(hasPrefix);
+        matchedWords = this.embeddingData.filter(hasPrefix);
       }
 
       // Update the matched series data
@@ -79,7 +100,7 @@ export default {
         series: [{
           // Grab the 'matched' series data
           name: 'matched',
-          data: matched_words,
+          data: matchedWords,
         }],
       });
     },
@@ -91,14 +112,13 @@ export default {
       this.myChart = echarts.init(el);
     },
     set2DChartOptions() {
-      let typeD = 'normal';
       let option = {
         xAxis: {},
         yAxis: {},
         series: [{
                    name: 'all',
                    symbolSize: 10,
-                   data: this.embedding_data,
+                   data: this.embeddingData,
                    type: 'scatter',
                  },
                  {
@@ -137,7 +157,7 @@ export default {
         xAxis3D: {},
         zAxis3D: {},
         dataset: {
-          source: this.embedding_data,
+          source: this.embeddingData,
         },
         series: [
           {
diff --git a/frontend/src/high-dimensional/ui/Config.vue b/frontend/src/high-dimensional/ui/Config.vue
index 391316e023e867dbcef12c3f0a85c4f055d0ed28..288e24ad7de0dc10080eedbce7e3051025400cae 100644
--- a/frontend/src/high-dimensional/ui/Config.vue
+++ b/frontend/src/high-dimensional/ui/Config.vue
@@ -55,8 +55,10 @@
 
 export default {
   props: {
-    runsItems: Array,
-    config: Object,
+    config: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
diff --git a/frontend/src/histogram/ui/Chart.vue b/frontend/src/histogram/ui/Chart.vue
index 77b2721eb242c8871597ce1d8807e13b04d2ac20..878d718a1b6497ed683d1d31a52aec971d2d4150 100644
--- a/frontend/src/histogram/ui/Chart.vue
+++ b/frontend/src/histogram/ui/Chart.vue
@@ -40,7 +40,28 @@ const p = Math.max(0, precisionRound(0.01, 1.01) - 1);
 const yValueFormat = format('.' + p + 'e');
 
 export default {
-  props: ['tagInfo', 'runs', 'chartType', 'running', 'runsItems'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    tagInfo: {
+      type: Object,
+      required: true,
+    },
+    runs: {
+      type: Array,
+      required: true,
+    },
+    running: {
+      type: Boolean,
+      required: true,
+    },
+    chartType: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       originData: [],
diff --git a/frontend/src/histogram/ui/ChartPage.vue b/frontend/src/histogram/ui/ChartPage.vue
index 3fb5691f4ecd4c0fb314f9ac66c334ba43d8188b..509deea992272a9e5a3ae584510a35804e23b93b 100644
--- a/frontend/src/histogram/ui/ChartPage.vue
+++ b/frontend/src/histogram/ui/ChartPage.vue
@@ -31,8 +31,24 @@ import Chart from './Chart';
 import {cloneDeep, flatten} from 'lodash';
 
 export default {
-  props: ['config', 'runsItems', 'tagList', 'title'],
-
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    tagList: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
   components: {
     'ui-chart': Chart,
     'ui-expand-panel': ExpandPanel,
diff --git a/frontend/src/histogram/ui/Config.vue b/frontend/src/histogram/ui/Config.vue
index 46938bdeacb9f08c846fded1b00ccef291bff0b4..a28c74decef4aed0d1c3bde3328d2327aaa5c837 100644
--- a/frontend/src/histogram/ui/Config.vue
+++ b/frontend/src/histogram/ui/Config.vue
@@ -42,7 +42,16 @@
 </template>
 <script>
 export default {
-  props: ['config', 'runsItems'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+  },
   data() {
     return {
       chartTypeItems: [
diff --git a/frontend/src/images/Images.vue b/frontend/src/images/Images.vue
index 0ebe081c7ef73d1fb6ec81b9e55b3ea87ba29707..c7e04f561d951416c3d897232ea8bcd039feecd6 100644
--- a/frontend/src/images/Images.vue
+++ b/frontend/src/images/Images.vue
@@ -31,7 +31,7 @@
 <script>
 
 import {getPluginImagesTags, getRuns} from '../service';
-import {debounce, flatten, uniq, isArray} from 'lodash';
+import {debounce, flatten, uniq} from 'lodash';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 
 import Config from './ui/Config';
@@ -112,7 +112,6 @@ export default {
       });
     },
     filteredConfig() {
-      let tansformArr = ['isActualImageSize'];
       let config = this.config || {};
       let filteredConfig = {};
       Object.keys(config).forEach((key) => {
diff --git a/frontend/src/images/ui/ChartPage.vue b/frontend/src/images/ui/ChartPage.vue
index b4687390f43860e7faddbed5860d802974901094..7939080b9e396644e7d247a970981ae6de58e264 100644
--- a/frontend/src/images/ui/ChartPage.vue
+++ b/frontend/src/images/ui/ChartPage.vue
@@ -30,7 +30,24 @@ import Image from './Image';
 import {cloneDeep, flatten} from 'lodash';
 
 export default {
-  props: ['config', 'runsItems', 'tagList', 'title'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    tagList: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
   components: {
     'ui-image': Image,
     'ui-expand-panel': ExpandPanel,
diff --git a/frontend/src/images/ui/Config.vue b/frontend/src/images/ui/Config.vue
index b9d84d8f8d63a5eb10e3bad6874fb747d8355886..480b1c33d0aea19840d2d60735856de03a13a95a 100644
--- a/frontend/src/images/ui/Config.vue
+++ b/frontend/src/images/ui/Config.vue
@@ -38,8 +38,14 @@
 
 export default {
   props: {
-    runsItems: Array,
-    config: Object,
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
diff --git a/frontend/src/images/ui/Image.vue b/frontend/src/images/ui/Image.vue
index 24b38828c38dc806aa8666277fd20fc8cb94ce1e..9d998d55906b5c74072f712c66557669121842c8 100644
--- a/frontend/src/images/ui/Image.vue
+++ b/frontend/src/images/ui/Image.vue
@@ -8,7 +8,7 @@
     <p>
       <span>Step:</span>
       <span>{{ imgData.step }}</span>
-      <span class="visual-del-image-time">{{ imgData.wall_time | formatTime }}</span>
+      <span class="visual-del-image-time">{{ imgData.wallTime | formatTime }}</span>
     </p>
     <v-slider
       :max="steps"
@@ -32,7 +32,28 @@ const defaultImgHeight = 300;
 const intervalTime = 30;
 
 export default {
-  props: ['tagInfo', 'isActualImageSize', 'runs', 'running', 'runsItems'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    tagInfo: {
+      type: Object,
+      required: true,
+    },
+    runs: {
+      type: Array,
+      required: true,
+    },
+    running: {
+      type: Boolean,
+      required: true,
+    },
+    isActualImageSize: {
+      type: Boolean,
+      required: true,
+    },
+  },
   computed: {
     steps() {
       let data = this.data || [];
@@ -95,15 +116,15 @@ export default {
       /* eslint-disable fecs-camelcase */
       if (this.data && this.data[index]) {
         let currentImgInfo = this.data ? this.data[index] : {};
-        let {height, width, query, step, wall_time} = currentImgInfo;
-        let url = '/data/plugin/images/individualImage?ts=' + wall_time;
+        let {height, width, query, step, wallTime} = currentImgInfo;
+        let url = '/data/plugin/images/individualImage?ts=' + wallTime;
         let imgSrc = [url, query].join('&');
         this.imgData = {
           imgSrc,
           height,
           width,
           step,
-          wall_time,
+          wallTime,
         };
       }
       /* eslint-enable fecs-camelcase */
diff --git a/frontend/src/scalars/Scalars.vue b/frontend/src/scalars/Scalars.vue
index d61b9ee0cb18c8bbc29dbf2340109b075b66fe9e..163b3b44c2d26a4b349d0e39d43ec81270bd554c 100644
--- a/frontend/src/scalars/Scalars.vue
+++ b/frontend/src/scalars/Scalars.vue
@@ -30,7 +30,7 @@
 
 <script>
 import {getPluginScalarsTags, getRuns} from '../service';
-import {debounce, flatten, uniq, isArray} from 'lodash';
+import {debounce, flatten, uniq} from 'lodash';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 
 import Config from './ui/Config';
diff --git a/frontend/src/scalars/ui/Chart.vue b/frontend/src/scalars/ui/Chart.vue
index 2a84f2cc6087d1b387d075793bcddcf32ba7e807..29a3ca39c677c960f3bb386763b7d174de4b6dfa 100644
--- a/frontend/src/scalars/ui/Chart.vue
+++ b/frontend/src/scalars/ui/Chart.vue
@@ -102,8 +102,40 @@ const maxQuantile = 0.95;
 const intervalTime = 15;
 
 export default {
-  props: ['tagInfo', 'groupNameReg', 'smoothing', 'horizontal', 'sortingMethod', 'outlier', 'runs',
-          'running', 'runsItems'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    tagInfo: {
+      type: Object,
+      required: true,
+    },
+    runs: {
+      type: Array,
+      required: true,
+    },
+    running: {
+      type: Boolean,
+      required: true,
+    },
+    smoothing: {
+      type: Number,
+      required: true,
+    },
+    horizontal: {
+      type: String,
+      required: true,
+    },
+    sortingMethod: {
+      type: String,
+      required: true,
+    },
+    outlier: {
+      type: Boolean,
+      required: true,
+    },
+  },
   computed: {
     computedStyle() {
       return 'height:' + this.height + 'px;'
@@ -366,7 +398,7 @@ export default {
     /**
      * @desc 1、add smooth data depend on smoothingWeight. see https://en.wikipedia.org/wiki/Moving_average for detail
      *       2、add relative data
-     * @param {Object} echarts series Object
+     * @param {Object} seriesData: echarts series Object
      * @param {number} smoothingWeight smooth weight, between 0 ~ 1
      */
     transformData(seriesData, smoothingWeight) {
@@ -645,7 +677,8 @@ export default {
 
       let headerHtml = '<tr style="font-size:14px;">';
       headerHtml += Object.keys(transformedData[0]).map((key) => {
-        return '<td style="padding: 0 4px; font-family: \'Merriweather Sans\'; font-weight: bold; width:' + widthPropMap[key] + 'px;">' + key + '</td>';
+        return '<td style="padding: 0 4px; font-family: \'Merriweather Sans\'; font-weight: bold; width:' +
+          widthPropMap[key] + 'px;">' + key + '</td>';
       }).join('');
       headerHtml += '</tr>';
 
diff --git a/frontend/src/scalars/ui/ChartPage.vue b/frontend/src/scalars/ui/ChartPage.vue
index 5f07af457054ea62ccf41bc15431c0a30d9ad6b9..bf69e2783ce9d2b0c605eeb446875c8e22291702 100644
--- a/frontend/src/scalars/ui/ChartPage.vue
+++ b/frontend/src/scalars/ui/ChartPage.vue
@@ -10,7 +10,6 @@
           v-for="(tagInfo, index) in filteredTagList"
           :key="index"
           :tag-info="tagInfo"
-          :group-name-reg="config.groupNameReg"
           :smoothing="config.smoothing"
           :horizontal="config.horizontal"
           :sorting-method="config.sortingMethod"
@@ -37,9 +36,25 @@ export default {
   components: {
     'ui-chart': Chart,
     'ui-expand-panel': ExpandPanel,
-    // 'ui-pagination': Pagination
   },
-  props: ['config', 'runsItems', 'tagList', 'title'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    tagList: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
   computed: {
     filteredRunsList() {
       let tagList = this.tagList || [];
diff --git a/frontend/src/scalars/ui/Config.vue b/frontend/src/scalars/ui/Config.vue
index 61db1c5767aac48abee2d968c4c36d061bc3d166..fbe716aed821fc855fd5c926e996ca9e126969b0 100644
--- a/frontend/src/scalars/ui/Config.vue
+++ b/frontend/src/scalars/ui/Config.vue
@@ -77,8 +77,14 @@
 
 export default {
   props: {
-    runsItems: Array,
-    config: Object,
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
diff --git a/frontend/src/texts/Texts.vue b/frontend/src/texts/Texts.vue
index 0b70479d341e7f997aad9f0ce182118126d0b6df..cf699b3838c2ba6e679f100fe352729efe87b51d 100644
--- a/frontend/src/texts/Texts.vue
+++ b/frontend/src/texts/Texts.vue
@@ -31,7 +31,7 @@
 <script>
 
 import {getPluginTextsTags, getRuns} from '../service';
-import {debounce, flatten, uniq, isArray} from 'lodash';
+import {debounce, flatten, uniq} from 'lodash';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 
 import Config from './ui/Config';
diff --git a/frontend/src/texts/ui/Chart.vue b/frontend/src/texts/ui/Chart.vue
index 0a8c7aedc7a697ab4afb651e5fe787843db79e11..7b6e64d02955b9b471790c7b1193a8f25ae71fc0 100644
--- a/frontend/src/texts/ui/Chart.vue
+++ b/frontend/src/texts/ui/Chart.vue
@@ -8,7 +8,7 @@
     <p>
       <span>Step:</span>
       <span>{{ textData.step }}</span>
-      <span class="visual-del-text-time">{{ textData.wall_time | formatTime }}</span>
+      <span class="visual-del-text-time">{{ textData.wallTime | formatTime }}</span>
     </p>
     <v-slider
       :max="steps"
@@ -28,7 +28,24 @@ import {getPluginTextsTexts} from '../../service';
 const intervalTime = 30;
 
 export default {
-  props: ['tagInfo', 'runs', 'running', 'runsItems'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    tagInfo: {
+      type: Object,
+      required: true,
+    },
+    runs: {
+      type: Array,
+      required: true,
+    },
+    running: {
+      type: Boolean,
+      required: true,
+    },
+  },
   computed: {
     steps() {
       let data = this.data || [];
@@ -82,13 +99,13 @@ export default {
     currentIndex: function(index) {
       if (this.data && this.data[index]) {
         let currentTextInfo = this.data ? this.data[index] : {};
-        let wall_time = currentTextInfo[0];
+        let wallTime = currentTextInfo[0];
         let step = currentTextInfo[1];
         let message = currentTextInfo[2];
 
         this.textData = {
           step,
-          wall_time,
+          wallTime,
           message,
         };
       }
diff --git a/frontend/src/texts/ui/ChartPage.vue b/frontend/src/texts/ui/ChartPage.vue
index 403460e6ed029363d880f7ffdb75759c5ac81e91..80c8f5540c370c3492309fbf8f191fe03af1b71d 100644
--- a/frontend/src/texts/ui/ChartPage.vue
+++ b/frontend/src/texts/ui/ChartPage.vue
@@ -35,7 +35,24 @@ export default {
     'ui-chart': Chart,
     'ui-expand-panel': ExpandPanel,
   },
-  props: ['config', 'runsItems', 'tagList', 'title'],
+  props: {
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    tagList: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
   computed: {
     filteredRunsList() {
       let tagList = this.tagList || [];
diff --git a/frontend/src/texts/ui/Config.vue b/frontend/src/texts/ui/Config.vue
index 1531e5f884e65e07a8abf8bb31517b664157a165..a18843359398af68ca33080c737872608986a23c 100644
--- a/frontend/src/texts/ui/Config.vue
+++ b/frontend/src/texts/ui/Config.vue
@@ -35,8 +35,14 @@
 
 export default {
   props: {
-    runsItems: Array,
-    config: Object,
+    runsItems: {
+      type: Array,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {