Eslint precommit

.eslint_format.hook

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+# if there are no staged changes, we can exit immediately
+# this is fast and prevents issues when popping a stash we didn't create
+STAGED_CHANGES=`git diff-index --cached HEAD --name-only --diff-filter ACMR`
+
+if [ -z "$STAGED_CHANGES" ]; then
+    exit 0
+fi
+
+# Capture the path to the eslint
+cd frontend
+ESLINT_EXECUTABLE=$(npm bin)/eslint
+cd ..
+
+# Test against with both .js and .vue files
+git diff --cached --name-only --diff-filter ACMR | egrep '.(js|vue)$' | xargs $ESLINT_EXECUTABLE --fix
+RESULT=$?
+
+[ $RESULT -ne 0 ] && exit 1
+exit 0

.pre-commit-config.yaml

@@ -33,3 +33,11 @@
         entry: flake8
         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

frontend/.eslintrc.js

@@ -9,5 +9,7 @@ module.exports = {
     // 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',
   }
 }

frontend/package.json

@@ -73,6 +73,7 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "url-loader": "^0.5.8",
+    "vue-eslint-parser": "^2.0.3",
     "vue-jest": "^1.0.2",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",

frontend/src/App.vue

@@ -11,22 +11,22 @@
 import AppMenu from './common/component/AppMenu';
 
 export default {
-    name: 'App',
-    components: {
-		AppMenu,
-    },
-    data() {
-        return {
-            initialRoute: 'scalars',
-        };
-    },
-    created() {
-        if (location.hash && location.hash != '#/') {
-            this.initialRoute = /(\#\/)(\w*)([?|&]{0,1})/.exec(location.hash)[2];
-        } else {
-            location.hash = '#/scalars';
-        }
-    },
+  name: 'App',
+  components: {
+    AppMenu,
+  },
+  data() {
+    return {
+      initialRoute: 'scalars',
+    };
+  },
+  created() {
+    if (location.hash && location.hash != '#/') {
+      this.initialRoute = /(\#\/)(\w*)([?|&]{0,1})/.exec(location.hash)[2];
+    } else {
+      location.hash = '#/scalars';
+    }
+  },
 };
 </script>
 

frontend/src/audio/Audio.vue

@@ -38,127 +38,127 @@ import Config from './ui/Config';
 import AudioPanelContainer from './ui/AudioPanelContainer';
 
 export default {
-    name: 'Images',
-    components: {
-        'ui-config': Config,
-        'ui-audio-container': AudioPanelContainer,
-    },
-    data() {
+  name: 'Images',
+  components: {
+    'ui-config': Config,
+    'ui-audio-container': AudioPanelContainer,
+  },
+  data() {
+    return {
+      runsArray: [],
+      tags: [],
+      config: {
+        groupNameReg: '.*',
+        isActualImageSize: false,
+        runs: [],
+        running: true,
+      },
+      filteredTagsList: [],
+    };
+  },
+  computed: {
+    runsItems() {
+      let runsArray = this.runsArray || [];
+      return runsArray.map((item) => {
         return {
-            runsArray: [],
-            tags: [],
-            config: {
-                groupNameReg: '.*',
-                isActualImageSize: false,
-                runs: [],
-                running: true,
-            },
-            filteredTagsList: [],
+          name: item,
+          value: item,
         };
+      });
     },
-    computed: {
-        runsItems() {
-            let runsArray = this.runsArray || [];
-            return runsArray.map((item) => {
-                return {
-                    name: item,
-                    value: item,
-                };
-            });
-        },
-        tagsList() {
-            let tags = this.tags;
-
-            let runs = Object.keys(tags);
-            let tagsArray = runs.map((run) => Object.keys(tags[run]));
-            let allUniqTags = uniq(flatten(tagsArray));
+    tagsList() {
+      let tags = this.tags;
 
-            // get the data for every chart
-            return allUniqTags.map((tag) => {
-                let tagList = runs.map((run) => {
-                    return {
-                        run,
-                        tag: tags[run][tag],
-                    };
-                }).filter((item) => item.tag !== undefined);
-                return {
-                    tagList,
-                    tag,
-                    group: tag.split('/')[0],
-                };
-            });
-        },
-        groupedTags() {
-            let tagsList = this.tagsList || [];
-            // put data in group
-            let groupData = {};
-            tagsList.forEach((item) => {
-                let group = item.group;
-                if (groupData[group] === undefined) {
-                    groupData[group] = [];
-                    groupData[group].push(item);
-                } else {
-                    groupData[group].push(item);
-                }
-            });
+      let runs = Object.keys(tags);
+      let tagsArray = runs.map((run) => Object.keys(tags[run]));
+      let allUniqTags = uniq(flatten(tagsArray));
 
-            // to array
-            let groups = Object.keys(groupData);
-            return groups.map((group) => {
-                return {
-                    group,
-                    tags: groupData[group],
-                };
-            });
-        },
-        filteredConfig() {
-            let config = this.config || {};
-            let filteredConfig = {};
-            Object.keys(config).forEach((key) => {
-                let val = config[key];
-                filteredConfig[key] = val;
-            });
-            return filteredConfig;
-        },
+      // get the data for every chart
+      return allUniqTags.map((tag) => {
+        let tagList = runs.map((run) => {
+          return {
+            run,
+            tag: tags[run][tag],
+          };
+        }).filter((item) => item.tag !== undefined);
+        return {
+          tagList,
+          tag,
+          group: tag.split('/')[0],
+        };
+      });
     },
-    created() {
-        getPluginAudioTags().then(({errno, data}) => {
-            this.tags = data;
-
-            // filter when inited
-            let groupNameReg = this.config.groupNameReg;
-            this.filterTagsList(groupNameReg);
-        });
+    groupedTags() {
+      let tagsList = this.tagsList || [];
+      // put data in group
+      let groupData = {};
+      tagsList.forEach((item) => {
+        let group = item.group;
+        if (groupData[group] === undefined) {
+          groupData[group] = [];
+          groupData[group].push(item);
+        } else {
+          groupData[group].push(item);
+        }
+      });
 
-        getRuns().then(({errno, data}) => {
-            this.runsArray = data;
-            this.config.runs = data;
-        });
+      // to array
+      let groups = Object.keys(groupData);
+      return groups.map((group) => {
+        return {
+          group,
+          tags: groupData[group],
+        };
+      });
     },
-    mounted() {
-	    autoAdjustHeight();
+    filteredConfig() {
+      let config = this.config || {};
+      let filteredConfig = {};
+      Object.keys(config).forEach((key) => {
+        let val = config[key];
+        filteredConfig[key] = val;
+      });
+      return filteredConfig;
     },
-    watch: {
-        'config.groupNameReg': function(val) {
-            this.throttledFilterTagsList();
-        },
+  },
+  created() {
+    getPluginAudioTags().then(({errno, data}) => {
+      this.tags = data;
+
+      // filter when inited
+      let groupNameReg = this.config.groupNameReg;
+      this.filterTagsList(groupNameReg);
+    });
+
+    getRuns().then(({errno, data}) => {
+      this.runsArray = data;
+      this.config.runs = data;
+    });
+  },
+  mounted() {
+    autoAdjustHeight();
+  },
+  watch: {
+    'config.groupNameReg': function(val) {
+      this.throttledFilterTagsList();
     },
-    methods: {
-        filterTagsList(groupNameReg) {
-            if (!groupNameReg) {
-                this.filteredTagsList = [];
-                return;
-            }
-            let tagsList = this.tagsList || [];
-            let regExp = new RegExp(groupNameReg);
-            this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag));
-        },
-        throttledFilterTagsList: _.debounce(
-            function() {
-                this.filterTagsList(this.config.groupNameReg);
-            }, 300
-        ),
+  },
+  methods: {
+    filterTagsList(groupNameReg) {
+      if (!groupNameReg) {
+        this.filteredTagsList = [];
+        return;
+      }
+      let tagsList = this.tagsList || [];
+      let regExp = new RegExp(groupNameReg);
+      this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag));
     },
+    throttledFilterTagsList: _.debounce(
+      function() {
+        this.filterTagsList(this.config.groupNameReg);
+      }, 300
+    ),
+  },
 };
 
 </script>

frontend/src/audio/index.js

@@ -3,7 +3,7 @@ import {router} from 'san-router';
 import Audio from './Audio';
 
 router.add({
-    target: '#content',
-    rule: '/audio',
-    Component: Audio,
+  target: '#content',
+  rule: '/audio',
+  Component: Audio,
 });