refactor: 🎨 lint it all

.github/workflows/docs.yml

@@ -17,7 +17,7 @@ permissions:
   deployments: write
 
 concurrency:
-  group: 'pages'
+  group: pages
   cancel-in-progress: true
 
 jobs:
@@ -36,15 +36,15 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 22
-          cache: 'pnpm'
+          cache: pnpm
       - name: Install dependencies
         run: pnpm i --prefer-offline
       - name: Build sodesu
         run: pnpm build
       - name: Build page
         run: pnpm docs:build
         env:
-          DOCS_BASE: '/sodesu/'
+          DOCS_BASE: /sodesu/
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v5

.vscode/settings.json

@@ -1,6 +1,53 @@
 {
-  "editor.formatOnSave": true,
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "css.customData": ["./css-data.json"]
+  "css.customData": ["./css-data.json"],
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "json5",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
+  ]
 }

docs/.vitepress/config.ts

@@ -1,6 +1,7 @@
+import process from 'node:process';
+import mk from '@traptitech/markdown-it-katex';
 import { withPwa } from '@vite-pwa/vitepress';
 import { defineConfig } from 'vitepress';
-import mk from '@traptitech/markdown-it-katex';
 
 export default withPwa(
   defineConfig({

docs/.vitepress/theme/RegisterSW.vue

@@ -1,13 +1,26 @@
+<template>
+  <template v-if="offlineReady">
+    <div class="pwa-toast" role="alertdialog" aria-labelledby="pwa-message">
+      <div id="pwa-message" class="mb-3">
+        App ready to work offline
+      </div>
+      <button type="button" class="pwa-cancel" @click="close">
+        Close
+      </button>
+    </div>
+  </template>
+</template>
+
 <script setup lang="ts">
 import { onBeforeMount, ref } from 'vue';
 
 const offlineReady = ref(false);
-const onOfflineReady = () => {
+function onOfflineReady() {
   offlineReady.value = true;
-};
-const close = async () => {
+}
+async function close() {
   offlineReady.value = false;
-};
+}
 
 onBeforeMount(async () => {
   const { registerSW } = await import('virtual:pwa-register');
@@ -24,15 +37,6 @@ onBeforeMount(async () => {
 });
 </script>
 
-<template>
-  <template v-if="offlineReady">
-    <div class="pwa-toast" role="alertdialog" aria-labelledby="pwa-message">
-      <div id="pwa-message" class="mb-3">App ready to work offline</div>
-      <button type="button" class="pwa-cancel" @click="close">Close</button>
-    </div>
-  </template>
-</template>
-
 <style>
 .pwa-toast {
   position: fixed;

docs/.vitepress/theme/ReloadPrompt.vue

@@ -1,18 +1,39 @@
+<template>
+  <template v-if="offlineReady || needRefresh">
+    <div class="pwa-toast" role="alertdialog" aria-labelledby="pwa-message">
+      <div id="pwa-message" class="mb-3">
+        {{
+          offlineReady
+            ? 'App ready to work offline'
+            : 'New content available, click the reload button to update.'
+        }}
+      </div>
+      <button v-if="needRefresh" type="button" class="pwa-refresh" @click="updateServiceWorker?.()">
+        Reload
+      </button>
+      <button type="button" class="pwa-cancel" @click="close">
+        Close
+      </button>
+    </div>
+  </template>
+</template>
+
 <script setup lang="ts">
 import { onBeforeMount, ref } from 'vue';
+
 const offlineReady = ref(false);
 const needRefresh = ref(false);
 let updateServiceWorker: (() => Promise<void>) | undefined;
-const onOfflineReady = () => {
+function onOfflineReady() {
   offlineReady.value = true;
-};
-const onNeedRefresh = () => {
+}
+function onNeedRefresh() {
   needRefresh.value = true;
-};
-const close = async () => {
+}
+async function close() {
   offlineReady.value = false;
   needRefresh.value = false;
-};
+}
 onBeforeMount(async () => {
   const { registerSW } = await import('virtual:pwa-register');
   updateServiceWorker = registerSW({
@@ -30,23 +51,6 @@ onBeforeMount(async () => {
 });
 </script>
 
-<template>
-  <template v-if="offlineReady || needRefresh">
-    <div class="pwa-toast" role="alertdialog" aria-labelledby="pwa-message">
-      <div id="pwa-message" class="mb-3">
-        {{
-          offlineReady
-            ? 'App ready to work offline'
-            : 'New content available, click the reload button to update.'
-        }}
-      </div>
-      <button v-if="needRefresh" type="button" class="pwa-refresh" @click="updateServiceWorker?.()">
-        Reload
-      </button>
-      <button type="button" class="pwa-cancel" @click="close">Close</button>
-    </div>
-  </template>
-</template>
 <style>
 .pwa-toast {
   position: fixed;

docs/.vitepress/theme/SodesuComment.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vp-doc">
-    <hr />
+    <hr>
     <blockquote>
       友情提示：评论区仅作评论展示，如有问题咨询请去
       <a href="https://github.com/BeiyanYunyi/sodesu/discussions" target="_blank">
@@ -13,9 +13,10 @@
     <div id="sodesu-comment" />
   </div>
 </template>
+
 <script setup>
-import '../../../dist/sodesu.css';
 import { onMounted } from 'vue';
+import '../../../dist/sodesu.css';
 
 onMounted(async () => {
   const [Sodesu, remarkRenderer] = await Promise.all([
@@ -31,6 +32,7 @@ onMounted(async () => {
   });
 });
 </script>
+
 <style scoped>
 #sodesu-comment {
   max-width: 1280px;

docs/.vitepress/theme/SodesuLayout.vue

@@ -13,17 +13,19 @@
       <link
         rel="stylesheet"
         href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css"
-      />
+      >
     </template>
   </Layout>
 </template>
+
 <script setup lang="ts">
 import DefaultTheme from 'vitepress/theme';
 import RegisterSW from './RegisterSW.vue';
 import SodesuComment from './SodesuComment.vue';
 
 const { Layout } = DefaultTheme;
 </script>
+
 <style scoped>
 .home-container {
   margin-top: 1rem;

docs/guide/getting-started.md

@@ -74,9 +74,9 @@ import 'sodesu-comment/sodesu.css';
 或者，如果你的项目已经在使用 UnoCSS，那么你可以将它配置一下：
 
 ```js
-import { defineConfig, presetWind } from 'unocss';
 import presetSodesu from 'sodesu-comment/preset';
 import safeList from 'sodesu-comment/safeList';
+import { defineConfig, presetWind } from 'unocss';
 
 export default defineConfig({
   presets: [presetWind(), presetSodesu()],
@@ -89,8 +89,8 @@ export default defineConfig({
 如果你用的不是 Astro，那么你或许可以使用类似这样的配置，只要确保 `include` 能覆盖到位于 `node_modules` 里的 `sodesu` 源码就可以了：
 
 ```js
-import { defineConfig, presetWind } from 'unocss';
 import presetSodesu from 'sodesu-comment/preset';
+import { defineConfig, presetWind } from 'unocss';
 
 export default defineConfig({
   presets: [presetWind(), presetSodesu()],

docs/special-features.md

@@ -32,7 +32,7 @@ import Sodesu from 'sodesu-comment';
 Sodesu.init({
   el: '#comment-container',
   // ...
-  renderPreview: async (text) => myProcessor(text), // 需要返回 Promise
+  renderPreview: async text => myProcessor(text), // 需要返回 Promise
 });
 ```
 

docs/trade-offs.md

@@ -11,10 +11,7 @@ Sodesu 与 Waline 官方前端的设计目的并不相同。我写 Sodesu 的初
 Waline 后端使用 Prism 将 markdown 中的代码块进行高亮处理，而 Sodesu 的样式中并未包括 Prism。为了让 Sodesu 正确呈现代码样式（而非一片灰），你需要在前端额外引入 Prism 的样式。经测试，在所有官方主题中，`prism-tomorrow` 主题的效果是最好的。示例引入方式如下：
 
 ```html
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css"
-/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css" />
 ```
 
 ::: info

eslint.config.js

@@ -0,0 +1,18 @@
+import antfu from '@antfu/eslint-config';
+
+export default antfu({
+  formatters: true,
+  unocss: true,
+  solid: true,
+  vue: {
+    overrides: {
+      'vue/block-order': [
+        'error',
+        {
+          order: ['template', 'script', 'style'],
+        },
+      ],
+    },
+  },
+  stylistic: { semi: true },
+});

index.html

@@ -11,8 +11,10 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     阅读量: <span id="/" class="waline-pageview-count"></span> 评论数:
     <span id="/" class="waline-comment-count"></span>页面阅读量 1：
-    <span class="waline-pageview-count" data-path="/guide/features/pageview.html"></span>页面阅读量
-    2：<span class="waline-pageview-count" data-path="/guide/features/i18n.html"></span>
+    <span class="waline-pageview-count" data-path="/guide/features/pageview.html"></span>页面阅读量 2：<span
+      class="waline-pageview-count"
+      data-path="/guide/features/i18n.html"
+    ></span>
     <div id="root"></div>
     <script type="module">
       import Sodesu from '/src/index.tsx';
@@ -22,17 +24,13 @@
         el: '#root',
         serverURL: 'https://walinejs.comment.lithub.cc',
         dark: 'auto',
-        path:
-          window.location.pathname === '/' ? '/' : window.location.pathname.replace(/\/$/, '.html'),
+        path: window.location.pathname === '/' ? '/' : window.location.pathname.replace(/\/$/, '.html'),
         pageview: true,
         comment: true,
         commentClassName: 'prose',
         renderPreview: remarkRenderer,
       });
     </script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css"
-    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css" />
   </body>
 </html>