update: eslint

docs/.eslintrc.cjs

@@ -1,15 +0,0 @@
-/* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
-
-module.exports = {
-  root: true,
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier/skip-formatting'
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest'
-  }
-}

docs/.prettierrc.json

@@ -1,8 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
-  "tabWidth": 2,
-  "singleQuote": true,
-  "printWidth": 100,
-  "trailingComma": "none"
-}

docs/eslint.config.mjs

@@ -0,0 +1,9 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu(
+  {
+    vue: true,
+    typescript: true,
+    ignores: ['*.js'],
+  },
+)

docs/package.json

@@ -1,39 +1,35 @@
 {
   "name": "demo",
+  "type": "module",
   "version": "0.0.0",
   "private": true,
-  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write src/"
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "chinese-days": "^1.2.4",
-    "highlight.js": "^11.9.0",
+    "chinese-days": "^1.3.1",
+    "highlight.js": "^11.10.0",
     "markdown-it": "^14.1.0",
-    "vue": "^3.4.21"
+    "vue": "^3.4.38"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.8.0",
+    "@antfu/eslint-config": "^2.27.1",
     "@tsconfig/node20": "^20.1.4",
-    "@types/markdown-it": "^14.1.1",
-    "@types/node": "^20.12.5",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^13.0.0",
+    "@types/markdown-it": "^14.1.2",
+    "@types/node": "^22.5.0",
+    "@vitejs/plugin-vue": "^5.1.2",
     "@vue/tsconfig": "^0.5.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.23.0",
-    "npm-run-all2": "^6.1.2",
-    "prettier": "^3.2.5",
-    "typescript": "~5.4.0",
-    "vite": "^5.2.8",
-    "vite-plugin-vue-devtools": "^7.0.25",
-    "vue-tsc": "^2.0.11"
+    "eslint": "^9.9.1",
+    "npm-run-all2": "^6.2.2",
+    "typescript": "~5.5.4",
+    "vite": "^5.4.2",
+    "vite-plugin-vue-devtools": "^7.3.9",
+    "vue-tsc": "^2.0.29"
   }
 }

docs/src/App.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-import Calendar from './components/CalendarComp.vue';
-import Docs from './components/DocsComp.vue';
+import { ref } from 'vue'
+import Calendar from './components/CalendarComp.vue'
+import Docs from './components/DocsComp.vue'
 
-let lang = ref<'zh' | 'en'>('zh');
+const lang = ref<'zh' | 'en'>('zh')
 </script>
 
 <template>

docs/src/components/CalendarComp.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
-import { getLunarDate, getDayDetail, isInLieu, getSolarTermsInRange } from 'chinese-days'
+import { computed, ref } from 'vue'
+import { getDayDetail, getLunarDate, getSolarTermsInRange, isInLieu } from 'chinese-days'
 
 const props = withDefaults(
   defineProps<{
@@ -9,17 +9,17 @@ const props = withDefaults(
   }>(),
   {
     lang: 'en',
-    startOfWeek: 1
-  }
+    startOfWeek: 1,
+  },
 )
 
 const currentDate = ref(new Date())
 const currentMonth = ref(currentDate.value.getMonth())
 const currentYear = ref(currentDate.value.getFullYear())
 const daysOfWeek = computed(() =>
-  props.lang == 'zh'
+  props.lang === 'zh'
     ? ['日', '一', '二', '三', '四', '五', '六']
-    : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+    : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
 )
 const monthNames = [
   'January',
@@ -33,7 +33,7 @@ const monthNames = [
   'September',
   'October',
   'November',
-  'December'
+  'December',
 ]
 
 const daysInMonth = computed(() => {
@@ -67,62 +67,64 @@ const daysInMonth = computed(() => {
   return days
 })
 
-const prevMonth = () => {
+function prevMonth() {
   if (currentMonth.value === 0) {
     currentMonth.value = 11
     currentYear.value--
-  } else {
+  }
+  else {
     currentMonth.value--
   }
 }
 
-const nextMonth = () => {
+function nextMonth() {
   if (currentMonth.value === 11) {
     currentMonth.value = 0
     currentYear.value++
-  } else {
+  }
+  else {
     currentMonth.value++
   }
 }
 
-const isToday = (date: Date) => {
+function isToday(date: Date) {
   const today = new Date()
   return (
-    date.getDate() === today.getDate() &&
-    date.getMonth() === today.getMonth() &&
-    date.getFullYear() === today.getFullYear()
-  )
-}
-
-const isSelected = (date: Date) => {
-  return (
-    date.getDate() === selectedDate.value?.date.getDate() &&
-    date.getMonth() === selectedDate.value?.date.getMonth() &&
-    date.getFullYear() === selectedDate.value?.date.getFullYear()
+    date.getDate() === today.getDate()
+    && date.getMonth() === today.getMonth()
+    && date.getFullYear() === today.getFullYear()
   )
 }
 
-const getDayInfo = (date: Date) => {
+function getDayInfo(date: Date) {
   const dayDetail = getDayDetail(date)
   const holidayName = dayDetail.name.split(',')[1]
   return {
-    disable: currentMonth.value != date.getMonth(),
+    disable: currentMonth.value !== date.getMonth(),
     isToday: isToday(date),
     isInLieu: isInLieu(date),
     solarTerm: getSolarTermsInRange(date)[0],
     ...getLunarDate(date),
     ...dayDetail,
     holidayName,
-    date
+    date,
   }
 }
 
-const daysInfo = computed(() => daysInMonth.value.map((date: Date) => getDayInfo(date)))
-
 const selectedDate = ref(getDayInfo(new Date()))
-const selectDate = (date: any) => {
+function selectDate(date: any) {
   selectedDate.value = date
 }
+
+function isSelected(date: Date) {
+  return (
+    date.getDate() === selectedDate.value?.date.getDate()
+    && date.getMonth() === selectedDate.value?.date.getMonth()
+    && date.getFullYear() === selectedDate.value?.date.getFullYear()
+  )
+}
+
+const daysInfo = computed(() => daysInMonth.value.map((date: Date) => getDayInfo(date)))
 </script>
 
 <template>
@@ -139,18 +141,26 @@ const selectDate = (date: any) => {
           <path
             d="M684.29 799.276L393.929 513.019 684.29 226.762c37.685-37.153 38.003-97.625 0.707-134.384-37.297-36.758-98.646-36.435-136.331 0.718l-357.43 352.378c-0.155 0.153-0.297 0.314-0.451 0.468-0.084 0.082-0.172 0.157-0.256 0.239-18.357 18.092-27.581 41.929-27.743 65.902-0.004 0.311-0.017 0.623-0.018 0.934 0.001 0.316 0.014 0.632 0.018 0.948 0.165 23.97 9.389 47.803 27.743 65.892 0.083 0.082 0.171 0.157 0.255 0.239 0.154 0.154 0.296 0.315 0.452 0.468l357.43 352.378c37.685 37.153 99.034 37.476 136.331 0.718 37.297-36.758 36.979-97.231-0.707-134.384z"
             fill="currentColor"
-          ></path>
+          />
         </svg>
       </button>
-      <h2 v-if="lang == 'zh'">
+      <h2 v-if="lang === 'zh'">
         <select v-model="currentYear">
-          <option v-for="(y, index) in 201" :key="index" :value="1900 + index">{{ 1900 + index }}</option>
-        </select> 年 
+          <option v-for="(y, index) in 201" :key="index" :value="1900 + index">
+            {{ 1900 + index }}
+          </option>
+        </select>
+        年
         <select v-model="currentMonth">
-          <option v-for="(month, index) in 12" :key="index" :value="index">{{ month < 10 ? `0${month}` : month }}</option>
-        </select> 月
+          <option v-for="(month, index) in 12" :key="index" :value="index">
+            {{ month < 10 ? `0${month}` : month }}
+          </option>
+        </select>
+        月
+      </h2>
+      <h2 v-else>
+        {{ monthNames[currentMonth] }} {{ currentYear }}
       </h2>
-      <h2 v-else>{{ monthNames[currentMonth] }} {{ currentYear }}</h2>
       <button @click="nextMonth">
         <svg
           class="r"
@@ -163,35 +173,37 @@ const selectDate = (date: any) => {
           <path
             d="M684.29 799.276L393.929 513.019 684.29 226.762c37.685-37.153 38.003-97.625 0.707-134.384-37.297-36.758-98.646-36.435-136.331 0.718l-357.43 352.378c-0.155 0.153-0.297 0.314-0.451 0.468-0.084 0.082-0.172 0.157-0.256 0.239-18.357 18.092-27.581 41.929-27.743 65.902-0.004 0.311-0.017 0.623-0.018 0.934 0.001 0.316 0.014 0.632 0.018 0.948 0.165 23.97 9.389 47.803 27.743 65.892 0.083 0.082 0.171 0.157 0.255 0.239 0.154 0.154 0.296 0.315 0.452 0.468l357.43 352.378c37.685 37.153 99.034 37.476 136.331 0.718 37.297-36.758 36.979-97.231-0.707-134.384z"
             fill="currentColor"
-          ></path>
+          />
         </svg>
       </button>
     </header>
     <div class="calendar-grid">
-      <div class="calendar-day" v-for="(day, i) in 7" :key="day">
+      <div v-for="(day, i) in 7" :key="day" class="calendar-day">
         {{ daysOfWeek[daysInfo[i].date.getDay()] }}
       </div>
       <div
-        class="calendar-cell"
-        @click="selectDate(day)"
         v-for="(day, index) in daysInfo"
         :key="index"
+        class="calendar-cell"
         :class="{
           today: day.isToday,
           disable: day.disable,
           holiday: day.holidayName,
           inlieu: day.isInLieu,
           work: day.holidayName && day.work,
-          solar: day.solarTerm?.index == 1,
-          selected: isSelected(day.date)
+          solar: day.solarTerm?.index === 1,
+          selected: isSelected(day.date),
         }"
+        @click="selectDate(day)"
       >
-        <span v-if="day.isToday" class="today-dot">{{ lang == 'en' ? 'Today' : '今' }}</span>
+        <span v-if="day.isToday" class="today-dot">{{ lang === 'en' ? 'Today' : '今' }}</span>
         <span v-if="day.holidayName" class="holiday-dot">{{
           day.work ? '班' : day.isInLieu ? '调' : '休'
         }}</span>
         <span class="day">{{ day.date.getDate() }}</span>
-        <span class="desc">{{ day.solarTerm?.index == 1 ? day.solarTerm?.name : day.holidayName || day.lunarDayCN }}</span>
+        <span class="desc">{{
+          day.solarTerm?.index === 1 ? day.solarTerm?.name : day.holidayName || day.lunarDayCN
+        }}</span>
       </div>
     </div>
   </div>
@@ -203,14 +215,25 @@ const selectDate = (date: any) => {
         {{ selectedDate.lunarMonCN }}{{ selectedDate.lunarDayCN }}
       </p>
       <p>
-        {{ selectedDate.yearCyl }}{{ selectedDate.zodiac }}年
-        {{ selectedDate.monCyl }}月
+        {{ selectedDate.yearCyl }}{{ selectedDate.zodiac }}年 {{ selectedDate.monCyl }}月
         {{ selectedDate.dayCyl }}日
       </p>
     </div>
     <div class="right">
-      <p>{{ selectedDate.isToday ? '今天是' : '此日是' }} <span>{{ selectedDate.solarTerm?.name }}</span> 节气的第 <span>{{selectedDate.solarTerm?.index}}</span> 天。</p>
-      <p>{{ selectedDate.work ? '又是需要工作的一天！😥' : selectedDate.isInLieu ? '虽然调休，但要补班还回来的！🤬' : '休息啦~😃' }}</p>
+      <p>
+        {{ selectedDate.isToday ? '今天是' : '此日是' }}
+        <span>{{ selectedDate.solarTerm?.name }}</span> 节气的第
+        <span>{{ selectedDate.solarTerm?.index }}</span> 天。
+      </p>
+      <p>
+        {{
+          selectedDate.work
+            ? '又是需要工作的一天！😥'
+            : selectedDate.isInLieu
+              ? '虽然调休，但要补班还回来的！🤬'
+              : '休息啦~😃'
+        }}
+      </p>
     </div>
   </div>
 </template>
@@ -250,7 +273,7 @@ body {
     justify-content: space-between;
     align-items: center;
     margin-bottom: calc(20px + var(--calendar-padding));
-  
+
     button {
       display: flex;
       flex-flow: column nowrap;
@@ -465,7 +488,8 @@ body {
   }
 
   @media screen and (max-width: 560px) {
-    .left, .right {
+    .left,
+    .right {
       p {
         font-size: 12px;
         &:first-child {

docs/src/components/DocsComp.vue

@@ -5,28 +5,27 @@ import hljs from 'highlight.js'
 import 'highlight.js/styles/atom-one-light.css'
 
 const md: markdownit = markdownit({
-  highlight: function (str: string, lang: string) {
+  highlight(str: string, lang: string) {
     if (lang && hljs.getLanguage(lang)) {
       try {
-        return (
-          '<pre><code class="hljs">' +
-          hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
-          '</code></pre>'
-        )
-      } catch (__) {
+        return `<pre><code class="hljs">${
+          hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
+        }</code></pre>`
+      }
+      catch {
         // do nothing
       }
     }
 
-    return '<pre><code class="hljs">' + md.utils.escapeHtml(str) + '</code></pre>'
-  }
+    return `<pre><code class="hljs">${md.utils.escapeHtml(str)}</code></pre>`
+  },
 })
 
 const html = ref('')
 fetch('//cdn.jsdelivr.net/npm/chinese-days/README.md')
   .then((response) => {
     if (!response.ok) {
-      throw new Error('Network response was not ok ' + response.statusText)
+      throw new Error(`Network response was not ok ${response.statusText}`)
     }
     return response.text()
   })
@@ -40,7 +39,7 @@ fetch('//cdn.jsdelivr.net/npm/chinese-days/README.md')
 </script>
 
 <template>
-  <div class="markdown-body" v-html="html"></div>
+  <div class="markdown-body" v-html="html" />
 </template>
 
 <style>
@@ -78,7 +77,8 @@ fetch('//cdn.jsdelivr.net/npm/chinese-days/README.md')
     text-decoration: underline;
     display: inline;
   }
-  ol, ul {
+  ol,
+  ul {
     padding-left: 20px;
   }
   li {

docs/tsconfig.app.json

@@ -1,7 +1,5 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
@@ -10,5 +8,7 @@
     "paths": {
       "@/*": ["./src/*"]
     }
-  }
+  },
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"]
 }

docs/tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "files": [],
   "references": [
     {
       "path": "./tsconfig.node.json"
@@ -7,5 +6,6 @@
     {
       "path": "./tsconfig.app.json"
     }
-  ]
+  ],
+  "files": []
 }

docs/tsconfig.node.json

@@ -1,19 +1,19 @@
 {
   "extends": "@tsconfig/node20/tsconfig.json",
-  "include": [
-    "vite.config.*",
-    "vitest.config.*",
-    "cypress.config.*",
-    "nightwatch.conf.*",
-    "playwright.config.*"
-  ],
   "compilerOptions": {
     "composite": true,
-    "noEmit": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 
     "module": "ESNext",
     "moduleResolution": "Bundler",
-    "types": ["node"]
-  }
+    "types": ["node"],
+    "noEmit": true
+  },
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ]
 }

docs/vite.config.ts

@@ -1,4 +1,4 @@
-import { fileURLToPath, URL } from 'node:url'
+import { URL, fileURLToPath } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -12,7 +12,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
 })