Merge pull request #130 from webgems/features/prettier

Add ESLint and prettier

.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  extends: [
+    'eslint:recommended',
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/recommended',
+    // 'plugin:prettier/recommended'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    'semi': ['error', 'never'],
+    'no-console': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'quotes': ['error', 'single', { 'avoidEscape': true }],
+    'comma-dangle': ['error', 'always-multiline'],
+    'vue/require-default-prop': 'off',
+  }
+}

components/Card.vue

@@ -10,7 +10,11 @@
 
 <script>
 export default {
-  props: ['resource', 'isActive', 'createCopyUrl'],
+  props: {
+    resource: Object,
+    isActive: Boolean,
+    createCopyUrl: Function, 
+  },
 }
 </script>
 

components/Logo.vue

@@ -7,10 +7,10 @@
 <script>
 export default {
   methods: {
-    goToHome(){
+    goToHome() {
-      this.$router.push("/")
+      this.$router.push('/')
-    }
+    },
-  }
+  },
 }
 </script>
 
@@ -26,16 +26,14 @@ export default {
     cursor: pointer;
   }
   .gem {
-	  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDggNDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiMwRDQ3QTEiIHBvaW50cz0iMzMsMTcgNDMsMTcgMjQsNDIgIi8+PHBvbHlnb24gZmlsbD0iIzg0RkZGRiIgcG9pbnRzPSI1LDE3IDE1LDUgMTUsMTcgIi8+PHBvbHlnb24gZmlsbD0iIzE5NzZEMiIgcG9pbnRzPSIzMyw1IDMzLDE3IDQzLDE3ICIvPjxnPjxwb2x5Z29uIGZpbGw9IiMwMDkxRUEiIHBvaW50cz0iMTUsMTcgMjMuOTk2LDQyLjE0OSAzMywxNyAiLz48cG9seWdvbiBmaWxsPSIjMDA5MUVBIiBwb2ludHM9IjE1LDUgMjQsNSAxNSwxNyAiLz48cG9seWdvbiBmaWxsPSIjMDA5MUVBIiBwb2ludHM9IjI0LDUgMzMsMTcgMzMsNSAiLz48L2c+PGc+PHBvbHlnb24gZmlsbD0iIzAwQjBGRiIgcG9pbnRzPSIzMywxNyAxNSwxNyAyNCw1ICIvPjxwb2x5Z29uIGZpbGw9IiMwMEIwRkYiIHBvaW50cz0iMzMsMTcgMzgsMTUgNDMsMTcgMzgsMTkgIi8+PC9nPjxnPjxwb2x5Z29uIGZpbGw9IiMwMEU1RkYiIHBvaW50cz0iMTUsMTcgNSwxNyAyMy45OTYsNDIuMTQ5ICIvPjxwb2x5Z29uIGZpbGw9IiMwMEU1RkYiIHBvaW50cz0iMTUsMTcgMjQsMTUgMzMsMTcgMjQsMTkgIi8+PC9nPjxwb2x5Z29uIGZpbGw9IiNFMEY3RkEiIHBvaW50cz0iNSwxNyAxMCwxNSAxNSwxNyAxMCwxOSAiLz48L3N2Zz4=);
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDggNDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiMwRDQ3QTEiIHBvaW50cz0iMzMsMTcgNDMsMTcgMjQsNDIgIi8+PHBvbHlnb24gZmlsbD0iIzg0RkZGRiIgcG9pbnRzPSI1LDE3IDE1LDUgMTUsMTcgIi8+PHBvbHlnb24gZmlsbD0iIzE5NzZEMiIgcG9pbnRzPSIzMyw1IDMzLDE3IDQzLDE3ICIvPjxnPjxwb2x5Z29uIGZpbGw9IiMwMDkxRUEiIHBvaW50cz0iMTUsMTcgMjMuOTk2LDQyLjE0OSAzMywxNyAiLz48cG9seWdvbiBmaWxsPSIjMDA5MUVBIiBwb2ludHM9IjE1LDUgMjQsNSAxNSwxNyAiLz48cG9seWdvbiBmaWxsPSIjMDA5MUVBIiBwb2ludHM9IjI0LDUgMzMsMTcgMzMsNSAiLz48L2c+PGc+PHBvbHlnb24gZmlsbD0iIzAwQjBGRiIgcG9pbnRzPSIzMywxNyAxNSwxNyAyNCw1ICIvPjxwb2x5Z29uIGZpbGw9IiMwMEIwRkYiIHBvaW50cz0iMzMsMTcgMzgsMTUgNDMsMTcgMzgsMTkgIi8+PC9nPjxnPjxwb2x5Z29uIGZpbGw9IiMwMEU1RkYiIHBvaW50cz0iMTUsMTcgNSwxNyAyMy45OTYsNDIuMTQ5ICIvPjxwb2x5Z29uIGZpbGw9IiMwMEU1RkYiIHBvaW50cz0iMTUsMTcgMjQsMTUgMzMsMTcgMjQsMTkgIi8+PC9nPjxwb2x5Z29uIGZpbGw9IiNFMEY3RkEiIHBvaW50cz0iNSwxNyAxMCwxNSAxNSwxNyAxMCwxOSAiLz48L3N2Zz4=);
     background-size: cover;
-    width:35px;
+    width: 35px;
-    height:35px;
+    height: 35px;
   }
   p {
-    margin: 0 0 0 .3rem;
+    margin: 0 0 0 0.3rem;
     font-size: 14px;
   }
 }
-
-
 </style>

components/Sidebar.vue

@@ -10,28 +10,28 @@
 </template>
 
 <script>
-import { mapMutations } from "vuex";
+import { mapMutations } from 'vuex'
 
 export default {
   data() {
     return {
-      categories: [{ slug: "", title: "" }]
+      categories: [{ slug: '', title: '' }],
-    };
+    }
   },
   computed: {
     areCardsVisible() {
       return this.$store.getters['Sidebar/areCardsVisible']
-    }
+    },
   },
   created() {
     this.categories = this.$store.getters['data/resources'].map(({ title, slug }) => ({ title, slug }))
   },
   methods: {
     ...mapMutations({
-      toggleCardsVisible: "Sidebar/toggleCardsVisible"
+      toggleCardsVisible: 'Sidebar/toggleCardsVisible',
-    })
+    }),
-  }
+  },
-};
+}
 </script>
 
 <style lang="scss" scoped>

components/TableRow.vue

@@ -5,15 +5,19 @@
     td.tableRow--links
       tr
         td
-          a.tableRow--reference(@click='createCopyUrl(resource)') Copy
+          a.tableRow--reference(@click="createCopyUrl(resource)") Copy
         td
           a.tableRow--target(:href="resource.url" :target='resource.title' rel='noreferrer') Open
 </template>
 
 <script>
 export default {
-  props: ['resource', 'isActive', 'createCopyUrl'],
+  props: {
-};
+    resource: Object,
+    isActive: Boolean,
+    createCopyUrl: Function,
+  },
+}
 </script>
 
 

layouts/default.vue

@@ -17,8 +17,8 @@ export default {
     Github,
     Logo,
     Search,
-    Sidebar
+    Sidebar,
-  }
+  },
 }
 </script>
 

nuxt.config.js

@@ -18,18 +18,34 @@ export default {
       { rel:'manifest', href:'/site.webmanifest' },
       { rel:'icon', type:'image/png', sizes:'16x16', href:'/favicon-16x16.png' },
       { rel:'icon', type:'image/png', sizes:'32x32', href:'/favicon-32x32.png' },
-      { rel:'apple-touch-icon', sizes:'76x76', href:'/apple-touch-icon.png' }
+      { rel:'apple-touch-icon', sizes:'76x76', href:'/apple-touch-icon.png' },
     ],
     link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-    ]
+    ],
   },
 
   /*
   ** Generate dynamic routes
   */
   generate: {
-    routes: resources.map(category => category.slug)
+    routes: resources.map(category => category.slug),
+  },
+
+  /**
+   * Configure ESLint to run on save with hot reloading
+   */
+  build: {
+    extend(config, ctx) {
+      if (ctx.isDev && ctx.isClient) {
+        config.module.rules.push({
+          enforce: 'pre',
+          test: /\.(js|vue)$/,
+          loader: 'eslint-loader',
+          exclude: /(node_modules)/,
+        })
+      }
+    },
   },
 
   /*
@@ -38,12 +54,12 @@ export default {
   loading: { color: '#fff' },
 
   plugins: [
-    '~/plugins/i18n.js'
+    '~/plugins/i18n.js',
   ],
   /*
   ** Nuxt.js modules
   */
   modules: [
     'nuxt-clipboard2',
-  ]
+  ],
 }

package.json

@@ -8,7 +8,9 @@
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
-    "generate": "nuxt generate"
+    "generate": "nuxt generate",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
   },
   "dependencies": {
     "cross-env": "^5.2.0",
@@ -18,8 +20,15 @@
   },
   "devDependencies": {
     "autoprefixer": "^8.6.4",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.5.1",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-loader": "^3.0.2",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-vue": "^5.2.3",
     "node-sass": "^4.12.0",
     "nodemon": "^1.18.9",
+    "prettier": "^1.18.2",
     "pug": "^2.0.3",
     "pug-plain-loader": "^1.0.0",
     "sass-loader": "^7.1.0",

pages/_category.vue

@@ -10,16 +10,17 @@
 </template>
 
 <script>
-import Card from "../components/Card";
+import Card from '../components/Card'
-import TableRow from "../components/TableRow";
+import TableRow from '../components/TableRow'
 
 export default {
+  components: { Card, TableRow },
   data() {
     return {
       categoryRouteTitle: this.$route.params.category,
       index: '',
       activeCard: '',
-    };
+    }
   },
   computed: {
     areCardsVisible() {
@@ -29,6 +30,9 @@ export default {
       return this.$store.getters['data/sortByTitle'](this.categoryRouteTitle)
     },
   },
+  created() {
+    this.activeCard = this.$route.query.card || ''
+  },
   methods: {
     setActiveCard(index) {
       this.activeCard = index
@@ -40,15 +44,11 @@ export default {
         this.setActiveCard(cleanTitle)
         this.$router.push(path)
       } catch (e) {
-        console.error(e);
+        console.error(e)
       }
-    }
+    },
   },
-  created() {
+}
-    this.activeCard = this.$route.query.card || ''
-  },
-  components: { Card, TableRow }
-};
 </script>
 
 <style lang="scss" scoped>

plugins/i18n.js

@@ -11,8 +11,8 @@ export default ({ app, store }) => {
     fallbackLocale: 'en',
     messages: {
       'en': require('~/locales/en.json'),
-      'fr': require('~/locales/fr.json')
+      'fr': require('~/locales/fr.json'),
-    }
+    },
   })
 
   app.i18n.path = (link) => {

postcss.config.js

@@ -1,7 +1,5 @@
-const join = require('path').join
-
 module.exports = {
   plugins: [
-    require('autoprefixer')
+    require('autoprefixer'),
-  ]
+  ],
 }

store/Sidebar.js

@@ -1,14 +1,14 @@
 export const state = () => ({
-  areCardsVisible: true
+  areCardsVisible: true,
 })
 
 export const getters = {
-  areCardsVisible: state => state.areCardsVisible
+  areCardsVisible: state => state.areCardsVisible,
 }
 
 export const mutations = {
   toggleCardsVisible(state) {
     if (process.browser) localStorage.setItem('areCardsVisible', !state.areCardsVisible)
     state.areCardsVisible = !state.areCardsVisible
-  }
+  },
 }

store/data.js

@@ -5,20 +5,20 @@ if (!Array.prototype.flat) {
 	Object.defineProperty(Array.prototype, 'flat', {
 		configurable: true,
 		value: function flat () {
-			var depth = isNaN(arguments[0]) ? 1 : Number(arguments[0]);
+			var depth = isNaN(arguments[0]) ? 1 : Number(arguments[0])
 
 			return depth ? Array.prototype.reduce.call(this, function (acc, cur) {
 				if (Array.isArray(cur)) {
-					acc.push.apply(acc, flat.call(cur, depth - 1));
+					acc.push.apply(acc, flat.call(cur, depth - 1))
 				} else {
-					acc.push(cur);
+					acc.push(cur)
 				}
 
-				return acc;
+				return acc
-			}, []) : Array.prototype.slice.call(this);
+			}, []) : Array.prototype.slice.call(this)
 		},
-		writable: true
+		writable: true,
-	});
+	})
 }
 
 /**
@@ -39,14 +39,14 @@ export const state = () => ({
 				cleanTitle,
 				path: `${category.slug}?card=${cleanTitle}`,
 			}
-		})
+		}),
 	})),
   // List of all tags, duplicates removed
   tags: [...new Set(
 		resources
 			.map(resource => resource.resources).flat()
 			.map(resource => resource.tags).flat()
-	)]
+	)],
 })
 
 export const getters = {
@@ -64,9 +64,9 @@ export const getters = {
 		const clone = [...category.resources]
 		return {
 			...category,
-			resources: clone.sort(compareTitles)
+			resources: clone.sort(compareTitles),
 		}
-	}
+	},
 }
 
 const compareTitles = (x, y) => {

store/store.js

@@ -1,6 +1,6 @@
 export const state = () => ({
   locales: ['en', 'fr', 'de'],
-  locale: 'en'
+  locale: 'en',
 })
 
 export const mutations = {
@@ -8,5 +8,5 @@ export const mutations = {
     if (state.locales.indexOf(locale) !== -1) {
       state.locale = locale
     }
-  }
+  },
 }