diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index b27a5d35e8a492375785a3815c1fa286ba9c5bd8..4d5f57da5ae131372c8ed031316786d3ba6e7fb0 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 4884d06c67c6d3b0a5f990f81662b11482b41884..61a733b446c04a78ef0ddc0ae046140ace760245 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 f4d23fd9628697995c9afaafec0bab2831127206..0ad61dc71cc5b23bde80afda2af4afa712fe36ee 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 1de8e9a6ec75376c000feafc81f056cb4fad7243..52074f02dc72fd692e3332e7daec5dbdce370f0b 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 33ad091d26d8a9dc95ebdf616e217d985ec215b8..12a703d900da8159c30e75acbd2c4d87ae177f62 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 ed24571cf586ea3201bdba45a306d15a836d3653..f0904004d1a3f78f40f77f7270534eea56146e80 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 46763a85de67e27106e65f1e9814728d2ee68a44..e099d064ff9ca51d0225f2368ddab4091eb10b11 100644
--- a/src/components/List.vue
+++ b/src/components/List.vue
@@ -24,4 +24,3 @@ defineProps<{
     </h3>
   </div>
 </template>
-