Try adding linting and formatting to pipeline

.gitlab-ci.yml

 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

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
 ```

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."
+  );
 });

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",

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

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>

src/components/List.vue

@@ -24,4 +24,3 @@ defineProps<{
     </h3>
   </div>
 </template>
-