Add linters and pre-commit hook

.eslintrc.js

@@ -0,0 +1,37 @@
+module.exports = {
+  "extends": ["airbnb/base", "prettier"],
+  "plugins": [
+    "prettier", "babel", "html"
+  ],
+  "rules": {
+    "prettier/prettier": ["error"],
+    "camelcase": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/prefer-default-export": "off",
+    "import/no-named-as-default": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "jsx-a11y/label-has-for": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    'import/no-unresolved': "off",
+  },
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "config/webpack/resolve.js"
+      }
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "jest": true
+  },
+  "parser": "babel-eslint",
+  "globals": {
+    "__WEBPACK_ENV__": true,
+    "__PUSHER__": true,
+    "__FB_APP_ID__": true
+  }
+}

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

.rubocop.yml

@@ -0,0 +1,4 @@
+Metrics/LineLength:
+  Max: 150
+Documentation:
+  Enabled: false

app/javascript/packs/application.js

@@ -37,7 +37,7 @@ Vue.component('multiselect', Multiselect);
 Vue.component('woot-switch', WootSwitch);
 Vue.component('woot-wizard', WootWizard);
 
-Object.keys(i18n).forEach((lang) => {
+Object.keys(i18n).forEach(lang => {
   Vue.locale(lang, i18n[lang]);
 });
 
@@ -49,12 +49,12 @@ commonHelpers();
 window.WootConstants = constants;
 window.axios = createAxios(axios);
 window.bus = new Vue();
-window.onload = function () {
+window.onload = () => {
   window.WOOT = new Vue({
     router,
     store,
     template: '<App/>',
     components: { App },
   }).$mount('#app');
-}
+};
 window.pusher = vuePusher.init();

config/webpack/environment.js

@@ -1,39 +1,37 @@
-const { environment } = require('@rails/webpacker')
-const { VueLoaderPlugin } = require('vue-loader')
-const vue = require('./loaders/vue')
-const path = require('path')
-const webpack = require('webpack')
+const { environment } = require('@rails/webpacker');
+const { VueLoaderPlugin } = require('vue-loader');
+const webpack = require('webpack');
+const resolve = require('./resolve');
+const vue = require('./loaders/vue');
 
-environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
-environment.loaders.prepend('vue', vue)
+environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
+environment.loaders.prepend('vue', vue);
 environment.loaders.append('audio', {
   test: /\.(mp3)(\?.*)?$/,
   loader: 'url-loader',
   query: {
     limit: 10000,
-    name: 'audio/[name].[ext]'
+    name: 'audio/[name].[ext]',
   },
-})
-
-const resolve = {
-  alias: {
-    'vue$': 'vue/dist/vue.common.js',
-    'src': path.resolve('./app/javascript/src'),
-    'assets': path.resolve('./app/javascript/src/assets'),
-    'components': path.resolve('./app/javascript/src/components')
-  },
-};
+});
 
 environment.config.merge({ resolve });
 
-const { pusher_cluster: cluster, pusher_key: token, fb_app_id: fbAppID } = process.env
+const {
+  pusher_cluster: cluster,
+  pusher_key: token,
+  fb_app_id: fbAppID,
+} = process.env;
 
-environment.plugins.prepend('DefinePlugin', new webpack.DefinePlugin({
-  __PUSHER__: {
-    token: `"${token}"`,
-    cluster: `"${cluster}"`,
-  },
-  __FB_ID__: `"${fbAppID}"`,
-}))
+environment.plugins.prepend(
+  'DefinePlugin',
+  new webpack.DefinePlugin({
+    __PUSHER__: {
+      token: `"${token}"`,
+      cluster: `"${cluster}"`,
+    },
+    __FB_ID__: `"${fbAppID}"`,
+  })
+);
 
-module.exports = environment
+module.exports = environment;

config/webpack/resolve.js

@@ -0,0 +1,13 @@
+const path = require('path');
+
+const resolve = {
+  extensions: ['', '.js', '.vue'],
+  alias: {
+    vue$: 'vue/dist/vue.common.js',
+    src: path.resolve('./app/javascript/src'),
+    assets: path.resolve('./app/javascript/src/assets'),
+    components: path.resolve('./app/javascript/src/components'),
+  },
+};
+
+module.exports = resolve;

package.json

@@ -1,5 +1,6 @@
 {
   "name": "@chatwoot/chatwoot",
+  "license": "MIT",
   "dependencies": {
     "@rails/webpacker": "^4.0.7",
     "axios": "^0.19.0",
@@ -35,11 +36,41 @@
     "vuex-router-sync": "~4.1.2"
   },
   "devDependencies": {
+    "babel-eslint": "^10.0.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "babel-preset-env": "^1.7.0",
+    "eslint": "^5.13.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^4.0.0",
+    "eslint-import-resolver-webpack": "^0.11.1",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-html": "^6.0.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-vue": "^5.2.3",
+    "husky": ">=1",
+    "jest": "^24.8.0",
+    "lint-staged": ">=8",
+    "prettier": "^1.16.4",
     "webpack-dev-server": "^3.7.2"
   },
-  "license": "MIT"
+  "engines": {
+    "node": ">=10.x",
+    "npm": ">=6.x",
+    "yarn": ">=1.x"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,vue}": [
+      "eslint --fix",
+      "git add"
+    ]
+  }
 }