feat: 添加eslint 和 prettierrc

2 months ago · 7ce29e1b34
14 changed files with 3944 additions and 2838 deletions
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "printWidth": 120,
+  "bracketSameLine": false,
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
+}
--- a/components.d.ts
+++ b/components.d.ts
@ -3,7 +3,7 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export {}
+export {};

 /* prettier-ignore */
 declare module 'vue' {
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@ -0,0 +1,28 @@
+// eslint.config.mjs
+import tsPlugin from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import vue from "eslint-plugin-vue";
+import vueParser from "vue-eslint-parser";
+
+export default [
+  {
+    files: ["**/*.ts", "**/*.vue"],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: tsParser, // 关键点：解析 `<script lang="ts">`
+        ecmaVersion: 2020,
+        sourceType: "module",
+        extraFileExtensions: [".vue"],
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tsPlugin,
+      vue,
+    },
+    rules: {
+      "vue/multi-word-component-names": "off",
+      "@typescript-eslint/no-unused-vars": "error",
+    },
+  },
+];
--- a/index.html
+++ b/index.html
@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -6,7 +6,10 @@
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint --ext .vue,.ts,.js src",
+    "lint:fix": "eslint --ext .vue,.ts,.js src --fix",
+    "format": "prettier --write \"src/**/*.{js,ts,vue,json,css,scss,md}\""
  },
  "dependencies": {
    "@tailwindcss/postcss": "^4.1.4",
@ -18,15 +21,29 @@
  },
  "devDependencies": {
    "@types/node": "^22.15.3",
+    "@typescript-eslint/eslint-plugin": "^8.31.1",
+    "@typescript-eslint/parser": "^8.31.1",
    "@vant/auto-import-resolver": "^1.3.0",
    "@vitejs/plugin-vue": "^5.2.2",
+    "@vue/eslint-config-standard": "^9.0.1",
    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.25.1",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-vue": "^10.1.0",
+    "globals": "^16.0.0",
    "postcss": "^8.5.3",
    "postcss-pxtorem": "^6.1.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier-plugin-tailwindcss": "^0.6.11",
    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.31.1",
    "unplugin-auto-import": "^19.1.2",
    "unplugin-vue-components": "^28.5.0",
    "vite": "^6.3.1",
+    "vue-eslint-parser": "^10.1.3",
    "vue-tsc": "^2.2.8"
  },
  "packageManager": "[email protected]+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
--- a/src/App.vue
+++ b/src/App.vue
@ -1,34 +1,21 @@
-<script setup lang="ts">
-import ThemeSwitcher from "@/components/ThemeSwitcher/index.vue";
-import { useThemeStore } from "@/stores/theme";
-const themeStore = useThemeStore();
-themeStore.initTheme();
-</script>
-
 <template>
  <div class="text-center text-red-300">欢迎来带我的vue3模板</div>
  <van-button>asdasd</van-button>
  <div>
-    <div class="pl-1 text-xs">dasd</div>
+    <div class="w-2 border-2 border-amber-100 pl-0.5 text-xs font-bold">dasd</div>
  </div>
  <div>
    <ThemeSwitcher />
  </div>
 </template>

-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
+<script setup lang="ts">
+import ThemeSwitcher from "@/components/ThemeSwitcher/index.vue";
+import { useThemeStore } from "@/stores/theme";
+import { ref } from "vue";

-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
+const themeStore = useThemeStore();
+themeStore.initTheme();
+const a = ref("das");
+console.log(a);
+</script>
--- a/src/components/ThemeSwitcher/index.vue
+++ b/src/components/ThemeSwitcher/index.vue
@ -1,21 +1,17 @@
 <template>
-    <div class="p-4 space-x-2">
-        <button @click="toggleDark" class="px-4 py-2 rounded bg-white dark:bg-black">
-            {{ isDark ? '亮色模式' : '暗黑模式' }}
-        </button>
+  <div class="space-x-2 p-4">
+    <button @click="toggleDark" class="rounded bg-white px-4 py-2 dark:bg-black">
+      {{ isDark ? "亮色模式" : "暗黑模式" }}
+    </button>

-        <button @click="setTheme('theme-red')" class="px-4 py-2 rounded bg-primary bg-mint-500 bg-primary">
-            红色主题
-        </button>
+    <button @click="setTheme('theme-red')" class="bg-primary bg-mint-500 bg-primary rounded px-4 py-2">红色主题</button>

-        <button @click="setTheme('theme-green')" class="px-4 py-2 rounded bg-primary">
-            绿色主题
-        </button>
-    </div>
+    <button @click="setTheme('theme-green')" class="bg-primary rounded px-4 py-2">绿色主题</button>
+  </div>
 </template>

 <script setup lang="ts">
-import { useThemeStore } from '@/stores/theme'
+import { useThemeStore } from "@/stores/theme";

-const { isDark, toggleDark, setTheme } = useThemeStore()
-</script>
+const { isDark, toggleDark, setTheme } = useThemeStore();
+</script>
--- a/src/main.ts
+++ b/src/main.ts
@ -1,6 +1,6 @@
-import { createApp } from "vue";
-import { createPinia } from "pinia";
 import "@/assets/main.css";
+import { createPinia } from "pinia";
+import { createApp } from "vue";
 import App from "./App.vue";

 const pinia = createPinia();
--- a/src/stores/theme.ts
+++ b/src/stores/theme.ts
@ -6,13 +6,8 @@ export const useThemeStore = defineStore("theme", () => {
  const themeClass = ref(""); // 主题色 class，比如 'theme-red'

  function initTheme() {
-    const systemPrefersDark = window.matchMedia(
-      "(prefers-color-scheme: dark)"
-    ).matches;
-    if (
-      localStorage.theme === "dark" ||
-      (!("theme" in localStorage) && systemPrefersDark)
-    ) {
+    const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    if (localStorage.theme === "dark" || (!("theme" in localStorage) && systemPrefersDark)) {
      isDark.value = true;
      document.documentElement.classList.add("dark");
    } else {
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,7 +1,4 @@
 {
  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,10 +1,10 @@
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
 import tailwindcss from "@tailwindcss/vite";
+import { VantResolver } from "@vant/auto-import-resolver";
+import vue from "@vitejs/plugin-vue";
 import path from "path";
 import AutoImport from "unplugin-auto-import/vite";
 import Components from "unplugin-vue-components/vite";
-import { VantResolver } from "@vant/auto-import-resolver";
+import { defineConfig } from "vite";

 // https://vite.dev/config/
 export default defineConfig({