From fd244c596f8a0e7717280af55b70f196becc084a Mon Sep 17 00:00:00 2001
From: Artur Carvalho <artur.carvalho@uni.lu>
Date: Mon, 23 Jan 2023 15:17:46 +0100
Subject: [PATCH] Try adding linting and formatting to pipeline

---
 .gitlab-ci.yml            | 7 +++++++
 README.md                 | 7 ++++---
 e2e/vue.spec.ts           | 4 +++-
 package.json              | 3 ++-
 postcss.config.js         | 2 +-
 src/components/Echart.vue | 6 ++----
 src/components/List.vue   | 1 -
 7 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index b27a5d3..4d5f57d 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,5 +1,6 @@
 stages:
   - build
+  - lint # and format
   - test
 
 build app:
@@ -19,6 +20,12 @@ unit tests:
     - npm ci
     - npm run test:unit
 
+lint and format:
+  - image: cimg/openjdk:17.0-node
+  - script:
+    - npm run format
+    - npm run lint
+
 # https://playwright.dev/docs/ci#gitlab-ci
 # e2e tests:
 #   stage: test
diff --git a/README.md b/README.md
index 4884d06..61a733b 100644
--- 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
@@ -64,8 +64,9 @@ npm run test:e2e -- tests/example.spec.ts
 npm run test:e2e -- --debug
 ```
 
-### Lint with [ESLint](https://eslint.org/)
+### Lint with [ESLint](https://eslint.org/) and format with prettier
 
 ```sh
 npm run lint
+npm run format
 ```
diff --git a/e2e/vue.spec.ts b/e2e/vue.spec.ts
index f4d23fd..0ad61dc 100644
--- a/e2e/vue.spec.ts
+++ b/e2e/vue.spec.ts
@@ -4,5 +4,7 @@ import { test, expect } from "@playwright/test";
 // https://playwright.dev/docs/intro
 test("visits the app root url", async ({ page }) => {
   await page.goto("/");
-  await expect(page.locator("#app > div > main")).toHaveText("This is a Vue playground.");
+  await expect(page.locator("#app > div > main")).toHaveText(
+    "This is a Vue playground."
+  );
 });
diff --git a/package.json b/package.json
index 1de8e9a..52074f0 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
     "test:e2e": "playwright test",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --check ."
   },
   "dependencies": {
     "@tanstack/vue-table": "^8.7.6",
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091..12a703d 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/src/components/Echart.vue b/src/components/Echart.vue
index ed24571..f090400 100644
--- a/src/components/Echart.vue
+++ b/src/components/Echart.vue
@@ -65,9 +65,7 @@ const option = ref({
 
 <style scoped>
 .chart {
-
-    height: 200px;
-    width: 400px;
-  /* height: 100vh; */
+  height: 200px;
+  width: 400px;
 }
 </style>
diff --git a/src/components/List.vue b/src/components/List.vue
index 46763a8..e099d06 100644
--- a/src/components/List.vue
+++ b/src/components/List.vue
@@ -24,4 +24,3 @@ defineProps<{
     </h3>
   </div>
 </template>
-
-- 
GitLab