diff --git a/.eslintrc.js b/.eslintrc.js
index c5cbba917..77ea9be7c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -28,6 +28,9 @@ module.exports = {
     }],
     'vue/html-self-closing': 'off',
     "vue/no-v-html": 'off',
+    'vue/singleline-html-element-content-newline': 'warn',
+    'vue/require-default-prop': 'warn',
+    'vue/require-prop-types': 'warn',
     'import/extensions': ['off']
 
   },
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 000000000..7774f34f5
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+npm run eslint
+bundle exec rubocop -a
+git add
diff --git a/.husky/pre-push b/.husky/pre-push
new file mode 100755
index 000000000..f0e139ad8
--- /dev/null
+++ b/.husky/pre-push
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+sh bin/validate_push
diff --git a/app/javascript/dashboard/components/Snackbar.vue b/app/javascript/dashboard/components/Snackbar.vue
index 62673e02a..d34702ab8 100644
--- a/app/javascript/dashboard/components/Snackbar.vue
+++ b/app/javascript/dashboard/components/Snackbar.vue
@@ -1,13 +1,14 @@
 <template>
   <div>
     <div class="ui-snackbar">
-      <div class="ui-snackbar-text">{{ message }}</div>
+      <div class="ui-snackbar-text">
+        {{ message }}
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-
 export default {
   props: {
     message: String,
@@ -22,9 +23,7 @@ export default {
       toggleAfterTimeout: false,
     };
   },
-  methods: {
-  },
-  mounted() {
-  },
+  mounted() {},
+  methods: {},
 };
 </script>
diff --git a/app/javascript/dashboard/components/ui/Switch.vue b/app/javascript/dashboard/components/ui/Switch.vue
index f28c84998..e1b27df8e 100644
--- a/app/javascript/dashboard/components/ui/Switch.vue
+++ b/app/javascript/dashboard/components/ui/Switch.vue
@@ -1,7 +1,13 @@
-
 <template>
   <label class="switch" :class="classObject">
-    <input class="switch-input" :name="name" :id="id" :disabled="disabled" v-model="value" type="checkbox">
+    <input
+      :id="id"
+      v-model="value"
+      class="switch-input"
+      :name="name"
+      :disabled="disabled"
+      type="checkbox"
+    />
     <div class="switch-paddle" :for="name">
       <span class="show-for-sr">on off</span>
     </div>
@@ -24,12 +30,6 @@ export default {
       value: null,
     };
   },
-  beforeMount() {
-    this.value = this.checked;
-  },
-  mounted() {
-    this.$emit('input', this.value = !!this.checked);
-  },
   computed: {
     classObject() {
       const { type, size, value } = this;
@@ -45,5 +45,11 @@ export default {
       this.$emit('input', val);
     },
   },
+  beforeMount() {
+    this.value = this.checked;
+  },
+  mounted() {
+    this.$emit('input', (this.value = !!this.checked));
+  },
 };
 </script>
diff --git a/app/javascript/dashboard/components/widgets/EmptyState.vue b/app/javascript/dashboard/components/widgets/EmptyState.vue
index 6bb8ecaed..a9fc17087 100644
--- a/app/javascript/dashboard/components/widgets/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/EmptyState.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="row empty-state">
-    <h3 class="title">{{ title }}</h3>
-    <p class="message">{{ message }}</p>
+    <h3 class="title">
+      {{ title }}
+    </h3>
+    <p class="message">
+      {{ message }}
+    </p>
     <slot />
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/LoadingState.vue b/app/javascript/dashboard/components/widgets/LoadingState.vue
index f8d33c961..6ec16fdb1 100644
--- a/app/javascript/dashboard/components/widgets/LoadingState.vue
+++ b/app/javascript/dashboard/components/widgets/LoadingState.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="row loading-state">
-    <h6 class="message">{{message}}<span class="spinner"></span></h6>
+    <h6 class="message">{{ message }}<span class="spinner"></span></h6>
   </div>
 </template>
 <script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
index 3d3735a1d..9999f3778 100644
--- a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
@@ -42,7 +42,8 @@
         </div>
         <div class="features-item">
           <h2 class="block-title">
-            <span class="emoji">👥</span>{{ $t('ONBOARDING.TEAM_MEMBERS.TITLE') }}
+            <span class="emoji">👥</span>
+            {{ $t('ONBOARDING.TEAM_MEMBERS.TITLE') }}
           </h2>
           <p class="intro-body">
             {{ $t('ONBOARDING.TEAM_MEMBERS.DESCRIPTION') }}
@@ -55,7 +56,7 @@
           <h2 class="block-title">
             <span class="emoji">📥</span>{{ $t('ONBOARDING.INBOXES.TITLE') }}
           </h2>
-          <p class="intro-body ">
+          <p class="intro-body">
             {{ $t('ONBOARDING.INBOXES.DESCRIPTION') }}
           </p>
           <router-link :to="newInboxURL" class="onboarding--link">
@@ -66,7 +67,7 @@
           <h2 class="block-title">
             <span class="emoji">🏷</span>{{ $t('ONBOARDING.LABELS.TITLE') }}
           </h2>
-          <p class="intro-body ">
+          <p class="intro-body">
             {{ $t('ONBOARDING.LABELS.DESCRIPTION') }}
           </p>
           <router-link :to="newLabelsURL" class="onboarding--link">
diff --git a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
index 705d15ad8..768d9c119 100644
--- a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
+++ b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
@@ -10,10 +10,9 @@
         variant="hollow"
         size="tiny"
         @click="onAvatarDelete"
-        >{{
-          this.$t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT')
-        }}</woot-button
       >
+        {{ this.$t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT') }}
+      </woot-button>
     </div>
     <label>
       <input
@@ -26,7 +25,6 @@
       <slot></slot>
     </label>
   </div>
-
 </template>
 
 <script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index 36d7d6be6..083b51246 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -9,4 +9,4 @@
     </woot-button>
   </div>
 </template>
-<script>
+<script></script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
index 339ded821..b6d13fcc0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
@@ -81,7 +81,6 @@ import { required } from 'vuelidate/lib/validators';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader';
 
-
 export default {
   components: {
     PageHeader,
@@ -114,15 +113,18 @@ export default {
       }
 
       try {
-        const lineChannel = await this.$store.dispatch('inboxes/createChannel', {
-          name: this.channelName,
-          channel: {
-            type: 'line',
-            line_channel_id: this.lineChannelId,
-            line_channel_secret: this.lineChannelSecret,
-            line_channel_token: this.lineChannelToken,
-          },
-        });
+        const lineChannel = await this.$store.dispatch(
+          'inboxes/createChannel',
+          {
+            name: this.channelName,
+            channel: {
+              type: 'line',
+              line_channel_id: this.lineChannelId,
+              line_channel_secret: this.lineChannelSecret,
+              line_channel_token: this.lineChannelToken,
+            },
+          }
+        );
 
         router.replace({
           name: 'settings_inboxes_add_agents',
@@ -132,7 +134,9 @@ export default {
           },
         });
       } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.ADD.LINE_CHANNEL.API.ERROR_MESSAGE'));
+        this.showAlert(
+          this.$t('INBOX_MGMT.ADD.LINE_CHANNEL.API.ERROR_MESSAGE')
+        );
       }
     },
   },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
index 5b5c9f09c..cc4d18f1a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
@@ -4,7 +4,7 @@
       :header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
     />
-		<twilio type="sms"></twilio>
+    <twilio type="sms"></twilio>
   </div>
 </template>
 
@@ -15,7 +15,7 @@ import Twilio from './Twilio';
 export default {
   components: {
     PageHeader,
-		Twilio,
+    Twilio,
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
index 27c10ecdc..bbf92b43d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
@@ -313,6 +313,7 @@ export default {
               this.hasEnabledPushPermissions = true;
             }
           })
+          // eslint-disable-next-line no-console
           .catch(error => console.log(error))
       );
     },
diff --git a/app/javascript/dashboard/routes/login/Login.vue b/app/javascript/dashboard/routes/login/Login.vue
index a56a02ad6..c31bd5479 100644
--- a/app/javascript/dashboard/routes/login/Login.vue
+++ b/app/javascript/dashboard/routes/login/Login.vue
@@ -149,13 +149,17 @@ export default {
           }
 
           if (response && response.status === 401) {
-						const { errors } = response.data;
-						const hasAuthErrorMsg = errors && errors.length && errors[0] && typeof errors[0] === 'string';
+            const { errors } = response.data;
+            const hasAuthErrorMsg =
+              errors &&
+              errors.length &&
+              errors[0] &&
+              typeof errors[0] === 'string';
             if (hasAuthErrorMsg) {
               this.showAlert(errors[0]);
             } else {
-							this.showAlert(this.$t('LOGIN.API.UNAUTH'));
-						} 
+              this.showAlert(this.$t('LOGIN.API.UNAUTH'));
+            }
             return;
           }
           this.showAlert(this.$t('LOGIN.API.ERROR_MESSAGE'));
diff --git a/app/javascript/dashboard/store/modules/conversations/index.js b/app/javascript/dashboard/store/modules/conversations/index.js
index 07475266c..c8519c253 100644
--- a/app/javascript/dashboard/store/modules/conversations/index.js
+++ b/app/javascript/dashboard/store/modules/conversations/index.js
@@ -68,10 +68,7 @@ export const mutations = {
     Vue.set(chat.meta, 'team', team);
   },
 
-  [types.UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES](
-    _state,
-    custom_attributes
-  ) {
+  [types.UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES](_state, custom_attributes) {
     const [chat] = getSelectedChatConversation(_state);
     Vue.set(chat, 'custom_attributes', custom_attributes);
   },
@@ -165,10 +162,7 @@ export const mutations = {
     Vue.set(chat.meta, 'assignee', payload.assignee);
   },
 
-  [types.UPDATE_CONVERSATION_CONTACT](
-    _state,
-    { conversationId, ...payload }
-  ) {
+  [types.UPDATE_CONVERSATION_CONTACT](_state, { conversationId, ...payload }) {
     const [chat] = _state.allConversations.filter(c => c.id === conversationId);
     if (chat) {
       Vue.set(chat.meta, 'sender', payload);
@@ -179,10 +173,7 @@ export const mutations = {
     _state.currentInbox = inboxId ? parseInt(inboxId, 10) : null;
   },
 
-  [types.SET_CONVERSATION_CAN_REPLY](
-    _state,
-    { conversationId, canReply }
-  ) {
+  [types.SET_CONVERSATION_CAN_REPLY](_state, { conversationId, canReply }) {
     const [chat] = _state.allConversations.filter(c => c.id === conversationId);
     if (chat) {
       Vue.set(chat, 'can_reply', canReply);
diff --git a/app/javascript/shared/components/GreetingsEditor.vue b/app/javascript/shared/components/GreetingsEditor.vue
index 21054f318..86eef8a8c 100644
--- a/app/javascript/shared/components/GreetingsEditor.vue
+++ b/app/javascript/shared/components/GreetingsEditor.vue
@@ -56,7 +56,7 @@ export default {
     };
   },
   watch: {
-    value: function (newValue) {
+    value: function(newValue) {
       this.greetingsMessage = newValue;
     },
   },
diff --git a/app/javascript/shared/components/TextArea.vue b/app/javascript/shared/components/TextArea.vue
index 8d87abc7c..9ab6536bd 100644
--- a/app/javascript/shared/components/TextArea.vue
+++ b/app/javascript/shared/components/TextArea.vue
@@ -23,8 +23,7 @@
         outline-none
       "
       :class="{
-        'border-black-200 hover:border-black-300 focus:border-black-300':
-          !error,
+        'border-black-200 hover:border-black-300 focus:border-black-300': !error,
         'border-red-200 hover:border-red-300 focus:border-red-300': error,
       }"
       :placeholder="placeholder"
diff --git a/package.json b/package.json
index ea76748df..5e193551d 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "1.22.1",
   "license": "MIT",
   "scripts": {
-    "eslint": "eslint app/javascript --fix",
+    "eslint": "eslint app/**/*.{js,vue} --fix",
     "pretest": "rimraf .jest-cache",
     "test": "jest  -w 1 --no-cache",
     "test:watch": "jest -w 1 --watch --no-cache",
@@ -13,7 +13,8 @@
     "start:dev-overmind": "overmind start -f ./Procfile.dev",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "ruby:prettier": "bundle exec rubocop -a"
+    "ruby:prettier": "bundle exec rubocop -a",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@braid/vue-formulate": "^2.5.2",
@@ -100,7 +101,7 @@
     "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-vue": "^6.2.2",
     "expect-more-jest": "^2.4.2",
-    "husky": "6.0.0",
+    "husky": "^7.0.0",
     "jest": "26.6.3",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
@@ -129,7 +130,7 @@
     ]
   },
   "lint-staged": {
-    "*.{js,vue}": [
+    "app/**/*.{js,vue}": [
       "eslint --fix",
       "git add"
     ],
diff --git a/yarn.lock b/yarn.lock
index a0a662bac..d1bed0704 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7828,10 +7828,10 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-husky@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-6.0.0.tgz#810f11869adf51604c32ea577edbc377d7f9319e"
-  integrity sha512-SQS2gDTB7tBN486QSoKPKQItZw97BMOd+Kdb6ghfpBc0yXyzrddI0oDV5MkDAbuB4X2mO3/nj60TRMcYxwzZeQ==
+husky@^7.0.0:
+  version "7.0.4"
+  resolved "https://registry.npmjs.org/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535"
+  integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==
 
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"