linter

.eslintrc.yml

@@ -0,0 +1,4 @@
+extends:
+  - "plugin:vue/vue3-recommended"
+  - "plugin:vue/base"
+rules: {}

TODO

@@ -3,8 +3,9 @@ TODO
 
 ## ARCHI
 
-* [ ] composition API
+* [x] git version control awareness
 * [ ] eslint
+* [ ] composition API
 * [ ] WindyCss
 
 

package.json

@@ -3,7 +3,8 @@
   "version": "0.0.10",
   "scripts": {
     "dev": "vite",
-    "build": "vite build"
+    "build": "vite build",
+    "eslint": "eslint \"src/**/*.{js,ts,vue}\" --ignore-pattern \"*.d.ts\""
   },
   "dependencies": {
     "typescript": "4.x",
@@ -11,8 +12,12 @@
   },
   "devDependencies": {
     "@types/node": "^14.14.31",
+    "@typescript-eslint/eslint-plugin": "^4.15.2",
     "@vitejs/plugin-vue": "^1.1.5",
     "@vue/compiler-sfc": "3.x",
+    "@vue/eslint-plugin": "^4.2.0",
+    "eslint": "^7.21.0",
+    "eslint-plugin-vue": "^7.6.0",
     "vite": "^2.0.4"
   }
 }

src/App.vue

@@ -1,7 +1,10 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
+  <img
+    alt="Vue logo" 
+    src="./assets/logo.png"
+  >
   <HelloWorld :msg="title" />
-  <br />
+  <br>
   version: {{ version }}
 </template>
 

src/components/HelloWorld.vue

@@ -1,7 +1,11 @@
 <template>
   <h1>{{ msg }}</h1>
-  <button @click="count++">count is: {{ count }}</button>
-  <button @click="inc">inc</button>
+  <button @click="count++">
+    count is: {{ count }}
+  </button>
+  <button @click="inc">
+    inc
+  </button>
   <p>Hello World!</p>
 </template>
 
@@ -9,7 +13,10 @@
 export default {
   name: "HelloWorld",
   props: {
-    msg: String,
+    msg: {
+      type: String,
+      required: true
+    }
   },
   data() {
     return {

src/shims-vue.d.ts

@@ -1,9 +1,14 @@
+/*
+ this is a defintion typescript file
+ unvalid for eslint, ie: --ignore-pattern \"*.d.ts\" in package.json
+*/
+
 declare module "*.vue" {
   import { defineComponent } from "vue"
   const Component: ReturnType<typeof defineComponent>
   export default Component
 }
 
-/* declare const helps constant visibility in main.ts file */
+/* declare const which helps leveraging visibility of defined constants, loaded from `main.ts` file */
 declare const APP_VERSION: string
 declare const APP_TITLE: string