feat: Setup eslint (with aribnb rules), prettier, and pre commit hook (…

…DARPA-ASKEM#5)

.editorconfig

@@ -9,5 +9,11 @@ end_of_line = lf
 insert_final_newline = true
 charset = utf-8
 trim_trailing_whitespace = true
-indent_style = space
+indent_style = tab
 indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{cmd,bat}]
+end_of_line = crlf

.eslintignore

@@ -0,0 +1,4 @@
+**/.eslintrc.cjs
+**/dist
+**/assets
+**/node_modules

.eslintrc.cjs

@@ -0,0 +1,11 @@
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-essential',
+    '@vue/eslint-config-airbnb-with-typescript',
+    'prettier' // Turns off the formatting rules from the linter since formatting is handled by prettier
+  ],
+  parser: 'vue-eslint-parser'
+};

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -0,0 +1,3 @@
+**/dist
+**/assets
+**/node_modules

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "singleQuote": true,
+    "printWidth": 100,
+    "trailingComma": "none"
+}

package.json

@@ -7,6 +7,27 @@
   ],
   "scripts": {
     "build": "yarn workspaces foreach --parallel --interlaced --verbose --topological run build",
-    "dev": "yarn workspaces foreach --parallel --interlaced --verbose run dev"
+    "dev": "yarn workspaces foreach --parallel --interlaced --verbose run dev",
+    "lint": "eslint . --ext .ts,.vue --fix",
+    "prettier": "prettier './**/*.{vue,ts}' --write",
+    "format": "yarn lint && yarn prettier"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.vue": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "devDependencies": {
+    "@vue/eslint-config-airbnb-with-typescript": "^7.0.0",
+    "eslint": "^8.23.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-vue": "^9.4.0",
+    "husky": "^8.0.1",
+    "prettier": "^2.7.1"
   }
 }

packages/client/package.json

@@ -12,6 +12,7 @@
     "vue": "^3.2.37"
   },
   "devDependencies": {
+    "@rushstack/eslint-patch": "^1.1.4",
     "@vitejs/plugin-vue": "^3.0.3",
     "typescript": "^4.6.4",
     "vite": "^3.0.7",

packages/client/src/App.vue

@@ -1,31 +1,31 @@
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import HelloWorld from '@/components/HelloWorld.vue'
+import HelloWorld from '@/components/HelloWorld.vue';
 </script>
 
 <template>
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
+	<div>
+		<a href="https://vitejs.dev" target="_blank" rel="noopener noreferrer">
+			<img src="/vite.svg" class="logo" alt="Vite logo" />
+		</a>
+		<a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">
+			<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+		</a>
+	</div>
+	<HelloWorld msg="Vite + Vue" />
 </template>
 
 <style scoped>
 .logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
+	height: 6em;
+	padding: 1.5em;
+	will-change: filter;
 }
 .logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+	filter: drop-shadow(0 0 2em #646cffaa);
 }
 .logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
+	filter: drop-shadow(0 0 2em #42b883aa);
 }
 </style>

packages/client/src/components/HelloWorld.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { MyType, add } from 'shared';
+import { MyType, add } from 'shared'; // eslint-disable-line
 
 defineProps<{ msg: string }>();
 
@@ -9,33 +9,38 @@ const myThing = ref<MyType>({ name: 'Terarium' });
 </script>
 
 <template>
-  <h1>{{ msg }}</h1>
-  <h2>{{ myThing.name }}</h2>
+	<h1>{{ msg }}</h1>
+	<h2>{{ myThing.name }}</h2>
 
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
+	<div class="card">
+		<button type="button" @click="count++">count is {{ count }}</button>
+		<p>
+			Edit
+			<code>components/HelloWorld.vue</code> to test HMR
+		</p>
+	</div>
 
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+	<p>
+		Check out
+		<a
+			href="https://vuejs.org/guide/quick-start.html#local"
+			target="_blank"
+			rel="noopener noreferrer"
+			>create-vue</a
+		>, the official Vue + Vite starter
+	</p>
+	<p>
+		Install
+		<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener noreferrer"
+			>Volar</a
+		>
+		in your IDE for a better DX
+	</p>
+	<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
 </template>
 
 <style scoped>
 .read-the-docs {
-  color: #888;
+	color: #888;
 }
 </style>

packages/client/src/main.ts

@@ -1,5 +1,5 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
+import { createApp } from 'vue';
+import './style.css';
+import App from './App.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');

packages/client/src/vite-env.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+	import type { DefineComponent } from 'vue';
+
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
 }

packages/client/vite.config.ts

@@ -1,27 +1,25 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import path from 'path'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
 
 // See: https://vitejs.dev/config/
 // See: https://vitejs.dev/config/server-options.html#server-proxy
 export default defineConfig({
-  // Syntax sugar for specifying imports
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src')
-    }
-  },
-  // Server proxy - change here to connect to API server (e.g. staging environment)
-  server: {
-    proxy: {
-      '/api': {
-        target: 'http://localhost:3000/api',
-        changeOrigin: true,
-        rewrite: (path) => {
-          return path.replace(/^\/api/, '');
-        }
-      }
-    }
-  },
-  plugins: [vue()]
-})
+	// Syntax sugar for specifying imports
+	resolve: {
+		alias: {
+			'@': path.resolve(__dirname, './src')
+		}
+	},
+	// Server proxy - change here to connect to API server (e.g. staging environment)
+	server: {
+		proxy: {
+			'/api': {
+				target: 'http://localhost:3000/api',
+				changeOrigin: true,
+				rewrite: (_path) => _path.replace(/^\/api/, '')
+			}
+		}
+	},
+	plugins: [vue()]
+});