chore: add lint format

aaronlamz · Aug 31, 2024 · cc9a4b1 · cc9a4b1
1 parent 3b16129
commit cc9a4b1
Show file tree

Hide file tree

Showing 13 changed files with 1,190 additions and 188 deletions.
diff --git a/.eslint.js b/.eslint.js
@@ -0,0 +1,25 @@
+module.exports = {
+    root: true,
+    env: {
+      node: true,
+    },
+    extends: [
+      'eslint:recommended',
+      'plugin:vue/vue3-recommended',
+      'plugin:prettier/recommended',
+    ],
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+    },
+    rules: {
+      'vue/no-multiple-template-root': 'off', 
+      'prettier/prettier': [
+        'error',
+        {
+          singleQuote: true,
+          semi: true,
+        },
+      ],
+    },
+  };
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+    "semi": false,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "printWidth": 80
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
diff --git a/navpress.config.js b/navpress.config.js
@@ -1,77 +1,77 @@
 // config/index.js
 export default {
-  title: "我的开发导航",
-  description: "A simple static site generator with configurable navigation",
-  logo: "/navpress/images/logo.svg",
-  github: "https://github.com/aaronlamz/navpress",
-  base: "/navpress/",
+  title: '我的开发导航',
+  description: 'A simple static site generator with configurable navigation',
+  logo: '/navpress/images/logo.svg',
+  github: 'https://github.com/aaronlamz/navpress',
+  base: '/navpress/',
   meta: {
-    title: "My Navpress",
+    title: 'My Navpress',
     description:
-      "Navpress - a simple static site generator with configurable navigation",
-    keywords: "static site, generator, navpress, vue",
-    author: "aaronlamz",
+      'Navpress - a simple static site generator with configurable navigation',
+    keywords: 'static site, generator, navpress, vue',
+    author: 'aaronlamz',
   },
   sidebar: [
     {
-      text: "Web",
-      link: "/",
+      text: 'Web',
+      link: '/',
       items: [
         {
-          text: "前端",
-          link: "#group1",
+          text: '前端',
+          link: '#group1',
           items: [
-            { text: "Child 1", link: "https://example.com/child1" },
-            { text: "Child 2", link: "https://example.com/child2" },
-            { text: "Child 2", link: "https://example.com/child2" },
+            { text: 'Child 1', link: 'https://example.com/child1' },
+            { text: 'Child 2', link: 'https://example.com/child2' },
+            { text: 'Child 2', link: 'https://example.com/child2' },
           ],
         },
         {
-          text: "设计",
-          link: "#group2",
+          text: '设计',
+          link: '#group2',
           items: [
-            { text: "Child 3", link: "https://example.com/child3" },
-            { text: "Child 4", link: "https://example.com/child4" },
-            { text: "Child 2", link: "https://example.com/child2" },
+            { text: 'Child 3', link: 'https://example.com/child3' },
+            { text: 'Child 4', link: 'https://example.com/child4' },
+            { text: 'Child 2', link: 'https://example.com/child2' },
           ],
         },
       ],
     },
     {
-      text: "效率工具",
-      link: "/efficient",
+      text: '效率工具',
+      link: '/efficient',
       expanded: true,
       items: [
         {
-          text: "Group A",
-          link: "#groupA",
-          items: [{ text: "Child A1", link: "https://example.com/childA1" }],
+          text: 'Group A',
+          link: '#groupA',
+          items: [{ text: 'Child A1', link: 'https://example.com/childA1' }],
         },
       ],
     },
     {
-      text: "AI 资源",
-      link: "/ai",
+      text: 'AI 资源',
+      link: '/ai',
       expanded: true,
       items: [
         {
-          text: "Group A",
-          link: "#groupA",
-          items: [{ text: "Child A1", link: "https://example.com/childA1" }],
+          text: 'Group A',
+          link: '#groupA',
+          items: [{ text: 'Child A1', link: 'https://example.com/childA1' }],
         },
       ],
     },
     {
-      text: "副业有道",
-      link: "/second-job",
+      text: '副业有道',
+      link: '/second-job',
       expanded: true,
       items: [
         {
-          text: "Group A",
-          link: "#groupA",
-          items: [{ text: "Child", link: "https://example.com/childA1" }],
+          text: 'Group A',
+          link: '#groupA',
+          items: [{ text: 'Child', link: 'https://example.com/childA1' }],
         },
       ],
     },
   ],
-};
+}
diff --git a/package.json b/package.json
@@ -9,7 +9,9 @@
     "clean": "rm -rf dist",
     "dev": "vite",
     "build": "vite build && node ./src/node/prerender.cjs",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "lint": "eslint --ext .js,.vue src",
+    "format": "prettier --write \"src/**/*.{js,vue,ts,json,css,scss,md}\""
   },
   "bin": {
     "navpress": "./bin/navpress.cjs"
@@ -18,7 +20,9 @@
     "type": "git",
     "url": "git+https://github.com/aaronlamz/nav-generator.git"
   },
-  "keywords": ["navpress"],
+  "keywords": [
+    "navpress"
+  ],
   "author": "aaronlamz",
   "engines": {
     "node": ">=18"
@@ -40,5 +44,23 @@
     "vue": "^3.4.33",
     "vue-router": "^4.4.0"
   },
-  "devDependencies": {}
-}
+  "devDependencies": {
+    "eslint": "^9.9.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.27.0",
+    "husky": "^9.1.5",
+    "lint-staged": "^15.2.9",
+    "prettier": "^3.3.3"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,vue,ts,json,css,scss,md}": [
+      "prettier --write"
+    ]
+  }
+}
diff --git a/src/App.vue b/src/App.vue
@@ -2,8 +2,13 @@
   <div id="app" class="dark:bg-gray-900 min-h-screen flex flex-col">
     <Navbar :nav="$config.nav" />
     <div class="main-container flex flex-1 overflow-hidden">
-      <Sidebar :sidebar="$config.sidebar" class="sidebar-container bg-gray-100 dark:bg-gray-800" />
-      <div class="content-container flex-1 overflow-y-auto p-6 dark:bg-gray-900">
+      <Sidebar
+        :sidebar="$config.sidebar"
+        class="sidebar-container bg-gray-100 dark:bg-gray-800"
+      />
+      <div
+        class="content-container flex-1 overflow-y-auto p-6 dark:bg-gray-900"
+      >
         <router-view />
         <FooterComponent />
       </div>
@@ -14,17 +19,17 @@
 <script>
 import Navbar from './components/Navbar.vue'
 import Sidebar from './components/Sidebar.vue'
-import FooterComponent from './components/FooterComponent.vue';
+import FooterComponent from './components/FooterComponent.vue'
 
 export default {
   components: {
     Navbar,
     Sidebar,
-    FooterComponent
+    FooterComponent,
   },
   data() {
     return {}
-  }
+  },
 }
 </script>
 
@@ -44,10 +49,12 @@ export default {
 
 .main-container {
   margin-top: 4rem; /* 设置与导航栏相同的高度，确保内容不被遮挡 */
-  height: calc(100vh - 4rem); /* 确保内容区域的总高度为视口高度减去导航栏的高度 */
+  height: calc(
+    100vh - 4rem
+  ); /* 确保内容区域的总高度为视口高度减去导航栏的高度 */
   display: flex;
 }
-.min-container-height{
+.min-container-height {
   min-height: calc(100vh - 8rem);
 }
 
@@ -66,4 +73,4 @@ export default {
 .dark .content-container {
   background-color: #1a202c;
 }
-</style>
+</style>
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
@@ -1,23 +1,33 @@
 <template>
-    <footer class="bg-gray-100 dark:bg-gray-800 text-center py-4 mt-4">
-      <span class="text-gray-500 dark:text-gray-400">
-        Powered by
-        <a href="https://github.com/aaronlamz/navpress" target="_blank" class="text-blue-500 hover:text-blue-700"> Navpress</a>
-      </span>
-      <a href="https://github.com/aaronlamz/navpress" target="_blank" class="inline-flex items-center ml-2">
-        <i class="fab fa-github text-gray-500 hover:text-gray-700 w-5 h-5"></i>
-      </a>
-    </footer>
-  </template>
-
-  <script>
-  export default {
-    name: 'FooterComponent',
-  };
-  </script>
-
-  <style scoped>
-  footer {
-    margin-top: auto;
-  }
-  </style>
+  <footer class="bg-gray-100 dark:bg-gray-800 text-center py-4 mt-4">
+    <span class="text-gray-500 dark:text-gray-400">
+      Powered by
+      <a
+        href="https://github.com/aaronlamz/navpress"
+        target="_blank"
+        class="text-blue-500 hover:text-blue-700"
+      >
+        Navpress</a
+      >
+    </span>
+    <a
+      href="https://github.com/aaronlamz/navpress"
+      target="_blank"
+      class="inline-flex items-center ml-2"
+    >
+      <i class="fab fa-github text-gray-500 hover:text-gray-700 w-5 h-5"></i>
+    </a>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'FooterComponent',
+}
+</script>
+
+<style scoped>
+footer {
+  margin-top: auto;
+}
+</style>