[#58] Added ESLint & ran formatter

web/.eslintrc.yml

@@ -0,0 +1,15 @@
+env:
+    browser: true
+    es2021: true
+extends:
+    - 'plugin:vue/essential'
+    - standard
+parserOptions:
+    ecmaVersion: 12
+    parser: '@typescript-eslint/parser'
+    sourceType: module
+plugins:
+    - vue
+    - '@typescript-eslint'
+rules:
+    indent: ["error", 4]

web/package.json

@@ -4,15 +4,25 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "lint": "eslint \"src/**\"",
+    "format": "eslint --fix \"src/**\""
   },
   "dependencies": {
     "vue": "^3.0.5",
     "vue-router": "^4.0.6"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
     "@vitejs/plugin-vue": "^1.2.1",
     "@vue/compiler-sfc": "^3.0.5",
+    "eslint": "^7.25.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-vue": "^7.9.0",
     "typescript": "^4.1.3",
     "vite": "^2.2.1",
     "vue-tsc": "^0.0.25"

web/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <Nav />    
+    <Nav />
     <router-view />
 </template>
 
@@ -10,8 +10,8 @@ import Nav from './components/Nav.vue'
 export default defineComponent({
     name: 'App',
     components: {
-        Nav,
-    },
+        Nav
+    }
 })
 </script>
 

web/src/api/ivago.ts

@@ -3,11 +3,11 @@ export interface Street {
     city: string
 }
 
-export async function search(search_term: string): Promise<Street[]> {
-    var base_url = import.meta.env.VITE_ENDPOINT as string
+export async function search (search_term: string): Promise<Street[]> {
+    const base_url = import.meta.env.VITE_ENDPOINT as string
 
-    var r = await fetch(`${base_url}/ivago/search?` + new URLSearchParams({
-        q: search_term,
+    const r = await fetch(`${base_url}/ivago/search?` + new URLSearchParams({
+        q: search_term
     }))
 
     if (!r.ok) {

web/src/components/HelloWorld.vue

@@ -15,18 +15,18 @@ import { Street, Ivago } from '../api/ivago'
 
 export default defineComponent({
     name: 'HelloWorld',
-    data() {
+    data () {
         return {
-            street: "",
-            results: [] as Street[],
+            street: '',
+            results: [] as Street[]
         }
     },
     methods: {
-        onSubmit() {
+        onSubmit () {
             new Ivago(import.meta.env.VITE_ENDPOINT as string).search(this.$data.street)
                 .then(res => {
-                    this.$data.results = res;
-                });
+                    this.$data.results = res
+                })
         }
     }
 })

web/src/components/Home.vue

@@ -8,6 +8,6 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-    name: 'Home',
+    name: 'Home'
 })
 </script>

web/src/components/Ivago.vue

@@ -3,7 +3,7 @@
     <input v-model="query" v-on:keyup.enter="search" type="text" placeholder="Street..." />
     <div id="scroll-list">
         <ul v-if="msg === ''">
-            <li v-for="item in items">{{ item.name }}</li>
+            <li v-for="item in items">{{ item.name }} ({{ item.city }})</li>
         </ul>
         <p v-else>{{ msg }}</p>
     </div>
@@ -11,31 +11,31 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { Street, search } from '../api/ivago'
+import { Street, search as ivago_search } from '../api/ivago'
 
 export default defineComponent({
     name: 'Ivago',
-    data() {
+    data () {
         return {
             items: [] as Street[],
-            msg: "",
-            query: "",
+            msg: '',
+            query: ''
         }
     },
     methods: {
-        search() {
+        search () {
             this.items = []
-            this.msg = "Loading..."
+            this.msg = 'Loading...'
 
-            if (this.query === "") {
-                this.msg = ""
+            if (this.query === '') {
+                this.msg = ''
                 return
             }
 
-            search(this.query)
+            ivago_search(this.query)
                 .then((res: Street[]) => {
                     this.items = res
-                    this.msg = ""
+                    this.msg = ''
                 })
         }
     }

web/src/components/Nav.vue

@@ -11,7 +11,7 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-    name: 'Nav',
+    name: 'Nav'
 })
 
 </script>

web/src/main.ts

@@ -1,6 +1,6 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import router from './router';
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
 
 const app = createApp(App)
 app.use(router)

web/src/router.ts

@@ -1,21 +1,21 @@
-import { createWebHistory, createRouter } from "vue-router";
-import Home from './components/Home.vue';
-import Ivago from './components/Ivago.vue';
+import { createWebHistory, createRouter } from 'vue-router'
+import Home from './components/Home.vue'
+import Ivago from './components/Ivago.vue'
 
 const routes = [
     {
-        path: "/",
-        component: Home,
+        path: '/',
+        component: Home
     },
     {
-        path: "/ivago",
-        component: Ivago,
-    },
-];
+        path: '/ivago',
+        component: Ivago
+    }
+]
 
 const router = createRouter({
     history: createWebHistory(),
-    routes,
-});
+    routes
+})
 
-export default router;
+export default router