feat: 新增全局 Eslint9x oxlint 代码校验, 新增 全量导入组件功能，新增自动全量导出脚本，使用 npm run aeac 即可实现

Author: 何嘉悦

.commitlintrc.cjs

@@ -25,7 +25,7 @@ module.exports = {
   prompt: {
     alias: { fd: 'docs: fix typos' },
     messages: {
-      type: "选择你要提交的类型 | Select the type of change that you're committing:",
+      type: '选择你要提交的类型 | Select the type of change that you\'re committing:',
       scope:
         '选择一个提交范围（可选）| Denote the SCOPE of this change (optional):',
       customScope: '请输入自定义的提交范围 | Denote the SCOPE of this change:',
@@ -113,4 +113,4 @@ module.exports = {
     defaultScope: '',
     defaultSubject: '',
   },
-};
+}

.npmrc

@@ -0,0 +1,4 @@
+auto-install-peers=true
+node-linker=hoisted
+# 强制校验类型完整性
+strict-peer-dependencies=true

.oxlint.toml

@@ -0,0 +1,9 @@
+# 启用 Vue3 专用规则
+enable = ["correctness", "suspicious", "vue"]
+
+# 自定义规则覆盖
+[correctness]
+noUnusedVariables = "error"
+
+[vue]
+noMissingKeysInVFor = "error"

.oxlintrc.json

@@ -0,0 +1,10 @@
+{
+  "ignorePatterns": ["**/node_modules/**"],
+  "rules": {
+    "no-alert": "error", // Emit an error message when a call to `alert()` is found
+    "oxc/approx-constant": "warn", // Show a warning when you write a number close to a known constant
+    "no-plusplus": "off" // Allow using the `++` and `--` operators
+  },
+  // Disable all default plugins
+  "plugins": []
+}

.vscode/settings.json

@@ -1,7 +1,58 @@
 {
-  "eslint.workingDirectories": [
-    {
-      "mode": "auto"
-    }
-  ]
+  // 开启扁平化配置
+  "eslint.useFlatConfig": true,
+
+  // 关闭默认的配置，我们这里默认不开启prettier格式化
+  "prettier.enable": false,
+  // 关闭默认格式化
+  "editor.formatOnSave": false,
+
+  // 保存自动修复
+  "editor.codeActionsOnSave": {
+    // 我们这里是指定自定义的修复
+    "source.fixAll.eslint": "explicit",
+    // 来源导入我们不需要给关闭掉
+    "source.organizeImports": "never",
+    // 使用 stylelint 来修复样式问题
+    "source.fixAll.stylelint": "explicit"
+  },
+
+  // 静默样式规则自动修复
+  "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 }
+  ],
+
+  // 在eslin中开启哪些语言的校验
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
+  ],
+  "oxc.enable": true
 }

README.md

@@ -56,13 +56,13 @@ npm install vue-element-plus-x
 
 ```vue
 <script>
-import { BubbleList, Sender } from "vue-element-plus-x";
+import { BubbleList, Sender } from 'vue-element-plus-x'
 const list = [
   {
-    content: "Hello, Element Plus X",
-    role: "user",
+    content: 'Hello, Element Plus X',
+    role: 'user',
   },
-];
+]
 </script>
 
 <template>

apps/docs/components/Bubble.md

@@ -26,16 +26,16 @@ npm i vue-element-plus-x
 在你的 Vue 3 项目中引入 `Bubble` 组件：
 
 ```vue
-<template>
-  <Bubble :content="yourContent" :typing="true" />
-</template>
-
 <script setup>
-import { Bubble } from "vue-element-plus-x";
-import { ref } from "vue";
+import { ref } from 'vue'
+import { Bubble } from 'vue-element-plus-x'
 
-const yourContent = ref("This is a bubble content.");
+const yourContent = ref('This is a bubble content.')
 </script>
+
+<template>
+  <Bubble :content="yourContent" :typing="true" />
+</template>
 ```
 
 ## 四、组件属性
@@ -67,7 +67,7 @@ const yourContent = ref("This is a bubble content.");
 <template>
   <Bubble>
     <template #avatar>
-      <img src="your-avatar-url" alt="Avatar" />
+      <img src="your-avatar-url" alt="Avatar">
     </template>
   </Bubble>
 </template>
@@ -137,8 +137,8 @@ const yourContent = ref("This is a bubble content.");
 
 ```vue
 <template>
-  <Bubble placement="start" :content="'Left bubble content'" />
-  <Bubble placement="end" :content="'Right bubble content'" />
+  <Bubble placement="start" content="Left bubble content" />
+  <Bubble placement="end" content="Right bubble content" />
 </template>
 ```
 
@@ -148,11 +148,11 @@ const yourContent = ref("This is a bubble content.");
 
 ```vue
 <template>
-  <Bubble shape="round" variant="shadow" :content="'Rounded shadow bubble'" />
+  <Bubble shape="round" variant="shadow" content="Rounded shadow bubble" />
   <Bubble
     shape="corner"
     variant="outlined"
-    :content="'Cornered outlined bubble'"
+    content="Cornered outlined bubble"
   />
 </template>
 ```
@@ -165,7 +165,7 @@ const yourContent = ref("This is a bubble content.");
 <template>
   <Bubble
     :typing="{ speed: 3, suffix: '>' }"
-    :content="'Typing with custom settings'"
+    content="Typing with custom settings"
   />
 </template>
 ```
@@ -176,7 +176,7 @@ const yourContent = ref("This is a bubble content.");
 
 ```vue
 <template>
-  <Bubble :loading="true" :content="'Loading...'" />
+  <Bubble :loading="true" content="Loading..." />
   <Bubble :loading="true">
     <template #loading>
       <div>Custom loading spinner...</div>

apps/docs/components/BubbleList.md

@@ -26,30 +26,30 @@ npm i vue-element-plus-x
 在你的 Vue 3 项目中引入 `BubbleList` 组件：
 
 ```vue
-<template>
-  <BubbleList :list="list" :max-height="'600px'">
-    <template #avatar="{ item }">
-      <img :src="item.avatarUrl" alt="Avatar" />
-    </template>
-  </BubbleList>
-</template>
-
 <script setup>
-import { BubbleList } from "vue-element-plus-x";
-import { ref } from "vue";
+import { ref } from 'vue'
+import { BubbleList } from 'vue-element-plus-x'
 
 const list = ref([
   {
-    content: "Hello!",
-    placement: "start",
+    content: 'Hello!',
+    placement: 'start',
     loading: false,
-    shape: "round",
-    variant: "filled",
+    shape: 'round',
+    variant: 'filled',
     isMarkdown: false,
     typing: false,
   },
-]);
+])
 </script>
+
+<template>
+  <BubbleList :list="list" max-height="600px">
+    <template #avatar="{ item }">
+      <img :src="item.avatarUrl" alt="Avatar">
+    </template>
+  </BubbleList>
+</template>
 ```
 
 ## 四、组件属性
@@ -73,7 +73,7 @@ const list = ref([
 
 ```vue
 <template #avatar="{ item }">
-  <img :src="item.avatarUrl" alt="Avatar" />
+  <img :src="item.avatarUrl" alt="Avatar">
 </template>
 ```