Eslint precommit (#368)

* Create pre-commit with ESLint

* add vue-eslint-parser

* Add prop-name-casing and script-indent to the eslint rule.

* Update Javascript and Vue files with the proper style

* Comment out ESlint pre-commit first to udpate styles

.eslint_format.hook

+#!/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/graph/ui/Chart.vue

@@ -7,22 +7,22 @@
 </template>
 <script>
     // libs
-    import echarts from 'echarts';
-    import {
+import echarts from 'echarts';
+import {
   dragMovelHandler,
   tansformElement,
   relativeMove,
-    } from './dragHelper';
-    // service
-    import {getPluginGraphsGraph} from '../../service';
+} from './dragHelper';
+// service
+import {getPluginGraphsGraph} from '../../service';
 
-    // https://github.com/taye/interact.js
-    import interact from 'interactjs';
+// https://github.com/taye/interact.js
+import interact from 'interactjs';
 
-    // for d3 drawing
-    import * as d3 from 'd3';
+// for d3 drawing
+import * as d3 from 'd3';
 
-    export default {
+export default {
   props: {
     'fitScreen': {
       type: Function,
@@ -271,7 +271,7 @@
       });
     },
   },
-    };
+};
 </script>
 <style lang="stylus">
     .node rect