Merge pull request #14 from IV1201-Group-2/feature/ci-cd

CI: ESLint and Prettier
IV1201-Group-2 · Feb 14, 2024 · b9ebe4c · b9ebe4c
2 parents 179f2e4 + 6e6eee7
commit b9ebe4c
Show file tree

Hide file tree

Showing 39 changed files with 2,148 additions and 1,856 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,11 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+
+indent_style = space
+tab_width = 2
+
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,15 +1,20 @@
 /* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
+require("@rushstack/eslint-patch/modern-module-resolution")
 
 module.exports = {
   root: true,
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier/skip-formatting'
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier/skip-formatting"
   ],
   parserOptions: {
-    ecmaVersion: 'latest'
+    ecmaVersion: "latest"
+  },
+  rules: {
+    "vue/valid-v-slot": ["error", {
+      "allowModifiers": true
+    }]
   }
 }
diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml
@@ -0,0 +1,26 @@
+name: check
+
+on:
+  push:
+    branches:
+      - "*"
+  pull_request:
+    branches:
+      - "*"
+
+jobs:
+  # Check code with eslint and prettier
+  check:
+    name: check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "21"
+      - name: Install dependencies
+        run: npm install
+      - name: ESLint
+        run: npm run lint-check
+      - name: Prettier
+        run: npm run format-check
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,8 +1,8 @@
 {
   "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
+  "semi": true,
   "tabWidth": 2,
-  "singleQuote": true,
-  "printWidth": 100,
+  "singleQuote": false,
+  "printWidth": 120,
   "trailingComma": "none"
-}
+}
diff --git a/README.md b/README.md
@@ -13,8 +13,8 @@ TypeScript cannot handle type information for `.vue` imports by default, so we r
 If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
 
 1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
 
 ## Customize configuration

diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -11,7 +11,9 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write src/"
+    "lint-check": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
+    "format": "prettier --write src/",
+    "format-check": "prettier --check src/"
   },
   "dependencies": {
     "jwt-decode": "^4.0.0",

diff --git a/src/App.vue b/src/App.vue
@@ -1,42 +1,41 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import { RouterLink, RouterView } from 'vue-router'
-import { storeToRefs } from 'pinia';
-import { useAuthStore } from './stores/auth';
+import { useI18n } from "vue-i18n";
+import { RouterLink, RouterView } from "vue-router";
+import { storeToRefs } from "pinia";
+import { useAuthStore } from "./stores/auth";
 const authStore = useAuthStore();
 const { isAuthenticated } = storeToRefs(authStore);
 const i18n = useI18n();
 
 function changeLocale(locale: string) {
-  i18n.locale.value = locale
+  i18n.locale.value = locale;
 }
-
 </script>
 
 <template>
   <header>
-      <nav>
-        <RouterLink v-if="isAuthenticated" @click="authStore.logout()" to="">{{ $t("navigation.logout") }}</RouterLink>
-        <RouterLink v-if="!isAuthenticated" to="/">{{ $t("navigation.login") }}</RouterLink>
-        <RouterLink v-if="!isAuthenticated" to="/register">{{ $t("navigation.register") }}</RouterLink>
-      </nav>
-      <v-btn>
-        <v-icon icon="mdi-translate" />
-        <v-menu activator="parent">
-            <v-list>
-              <v-list-item
-                v-for="language in i18n.availableLocales"
-                :key="language"
-                :value="language"
-                @click="() => changeLocale(language)">
-              
-                <v-list-item-title>
-                  {{ $t("languages." + language) }}
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-      </v-btn>
+    <nav>
+      <RouterLink v-if="isAuthenticated" @click="authStore.logout()" to="">{{ $t("navigation.logout") }}</RouterLink>
+      <RouterLink v-if="!isAuthenticated" to="/">{{ $t("navigation.login") }}</RouterLink>
+      <RouterLink v-if="!isAuthenticated" to="/register">{{ $t("navigation.register") }}</RouterLink>
+    </nav>
+    <v-btn>
+      <v-icon icon="mdi-translate" />
+      <v-menu activator="parent">
+        <v-list>
+          <v-list-item
+            v-for="language in i18n.availableLocales"
+            :key="language"
+            :value="language"
+            @click="() => changeLocale(language)"
+          >
+            <v-list-item-title>
+              {{ $t("languages." + language) }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-btn>
   </header>
 
   <RouterView />
@@ -69,10 +68,10 @@ nav a:first-of-type {
 
 @media (min-width: 1024px) {
   header {
-  display: flex;
-  flex-direction: row;
-  place-items: center;
-  justify-content: space-between;
+    display: flex;
+    flex-direction: row;
+    place-items: center;
+    justify-content: space-between;
   }
 
   .logo {
@@ -82,7 +81,6 @@ nav a:first-of-type {
   nav {
     text-align: left;
     font-size: 1rem;
-
   }
 }
 </style>
diff --git a/src/assets/base.css b/src/assets/base.css
@@ -70,14 +70,14 @@ body {
     Inter,
     -apple-system,
     BlinkMacSystemFont,
-    'Segoe UI',
+    "Segoe UI",
     Roboto,
     Oxygen,
     Ubuntu,
     Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
     sans-serif;
   font-size: 15px;
   text-rendering: optimizeLegibility;

diff --git a/src/assets/main.css b/src/assets/main.css
@@ -1,4 +1,4 @@
-@import './base.css';
+@import "./base.css";
 
 #app {
   max-width: 1280px;