集成Prettier和Stylelint

.prettierignore

@@ -0,0 +1,5 @@
+
+*.min.js
+dist
+public
+node_modules

.stylelintignore

@@ -0,0 +1,5 @@
+
+*.min.js
+dist
+public
+node_modules

.stylelintrc.json

@@ -0,0 +1,47 @@
+{
+  "extends": [
+    "stylelint-config-recommended",
+    "stylelint-config-recommended-scss",
+    "stylelint-config-recommended-vue/scss",
+    "stylelint-config-html/vue",
+    "stylelint-config-recess-order"
+  ],
+  "plugins": ["stylelint-prettier"],
+  "overrides": [
+    {
+      "files": ["**/*.{vue,html}"],
+      "customSyntax": "postcss-html"
+    },
+    {
+      "files": ["**/*.{css,scss}"],
+      "customSyntax": "postcss-scss"
+    }
+  ],
+
+  "rules": {
+    "import-notation": "string",
+    "selector-class-pattern": null,
+    "custom-property-pattern": null,
+    "keyframes-name-pattern": null,
+    "no-descending-specificity": null,
+    "no-empty-source": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global", "export", "deep"]
+      }
+    ],
+    "property-no-unknown": [
+      true,
+      {
+        "ignoreProperties": []
+      }
+    ],
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": ["apply", "use", "forward"]
+      }
+    ]
+  }
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll.stylelint": true
+  },
+  "stylelint.validate": ["css", "scss", "vue", "html"]
+}

eslint.config.mjs

@@ -1,38 +1,75 @@
 import globals from "globals"; // 全局变量配置
-import pluginJs from "@eslint/js"; // JavaScript 的推荐配置
+import jsPlugin from "@eslint/js"; // JavaScript 推荐配置
-import tseslint from "typescript-eslint"; // TypeScript 配置
+import tsPlugin from "@typescript-eslint/eslint-plugin"; // TypeScript 插件
-import pluginVue from "eslint-plugin-vue"; // Vue 配置
+import tsParser from "@typescript-eslint/parser"; // TypeScript 解析器
+import vuePlugin from "eslint-plugin-vue"; // Vue 插件
+import prettierConfig from "eslint-config-prettier"; // 禁用 ESLint 冲突规则
+import pluginPrettier from "eslint-plugin-prettier"; // 引入 Prettier 插件
 
 export default [
-  {files: ["**/*.{js,mjs,cjs,ts,vue}"]}, // 校验的文件类型
+  // 1. 适用于所有文件的配置 (JavaScript、TypeScript、Vue)
-  {languageOptions: { globals: globals.browser }}, // 设置浏览器环境的全局变量
-  pluginJs.configs.recommended, // JavaScript 推荐配置
-  ...tseslint.configs.recommended, // TypeScript 推荐配置
-  ...pluginVue.configs["flat/essential"], // Vue 推荐配置
-  {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}}, // 对 .vue 文件使用 TypeScript 解析器
-  // 添加忽略的文件或目录
   {
-    ignores: [
+    files: ["**/*.{js,mjs,cjs,ts,vue}"], // 校验的文件类型
-      "/dist",
+    languageOptions: {
-      "/public",
+      globals: globals.browser, // 设置浏览器环境的全局变量
-      "/node_modules",
+    },
-      "**/*.min.js",
-      "**/*.config.mjs",
-      "**/*.tsbuildinfo",
-      "/src/manifest.json",
-    ]
   },
 
-  // 添加规则配置
+  // 2. 插件推荐的配置
+  jsPlugin.configs.recommended, // JavaScript 推荐配置
+  tsPlugin.configs.recommended, // TypeScript 推荐配置
+  vuePlugin.configs["flat/essential"], // Vue 推荐配置
+
+  // 3. Prettier 插件配置
+  prettierConfig, // 禁用 ESLint 中与 Prettier 冲突的规则
+  pluginPrettier.configs.recommended, // 启用 Prettier 插件
+
+  // 4. 对 .vue 文件的特殊处理，使用 TypeScript 解析器
+  {
+    files: ["**/*.vue"],
+    languageOptions: {
+      parserOptions: {
+        parser: tsParser, // 解析器指定为 TypeScript
+      },
+    },
+  },
+
+  // 5. 忽略不需要校验的文件和目录
+  {
+    ignores: [
+      "/dist", // 忽略打包生成的文件夹
+      "/public", // 忽略 public 文件夹
+      "/node_modules", // 忽略依赖模块文件夹
+      "**/*.min.js", // 忽略压缩后的 JS 文件
+      "**/*.config.mjs", // 忽略配置文件
+      "**/*.tsbuildinfo", // 忽略 TypeScript 构建信息文件
+      "/src/manifest.json", // 忽略 manifest 文件
+    ],
+  },
+
+  // 6. 自定义 ESLint 规则配置
   {
     rules: {
-      "vue/multi-word-component-names": "off", // 关闭多单词名称检查
+      // Prettier 规则
-      "@typescript-eslint/ban-types": "off",
+      "prettier/prettier": "error", // // 将 Prettier 的格式化错误标记为 ESLint 错误
-      "@typescript-eslint/no-empty-interface": "off", 
+      // 通用规则
-      "@typescript-eslint/no-empty-object-type": "off",
+      quotes: ["error", "double"], // 强制使用双引号
-      "@typescript-eslint/no-explicit-any": "off",
+      "quote-props": ["error", "always"], // 强制对象的属性名使用引号
-      "quotes": ["error", "double"], // 强制使用双引号
+      semi: ["error", "always"], // 要求使用分号
-      "quote-props": ["error", "always"] // 强制对象的属性名使用引号
+      indent: ["error", 2], // 使用两个空格进行缩进
-    }
+      "no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行
+      "no-trailing-spaces": "error", // 不允许行尾有空格
+
+      // TypeScript 规则
+      "@typescript-eslint/ban-types": "off", // 禁用 ban-types 规则
+      "@typescript-eslint/no-empty-interface": "off", // 禁用 no-empty-interface 规则，允许空接口声明
+      "@typescript-eslint/no-explicit-any": "off", // 禁用 no-explicit-any 规则，允许使用 any 类型
+      "@typescript-eslint/explicit-function-return-type": "off", // 不强制要求函数必须明确返回类型
+
+      // Vue 规则
+      "vue/multi-word-component-names": "off", // 关闭多单词组件名称的限制
+      "vue/html-indent": ["error", 2], // Vue 模板中的 HTML 缩进使用两个空格
+      "vue/no-v-html": "off", // 允许使用 v-html (根据实际项目需要)
+    },
   },
 ];

package.json

@@ -41,7 +41,8 @@
     "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
     "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
     "type-check": "vue-tsc --noEmit",
-    "lint:eslint": "eslint --fix ./src"
+    "lint:eslint": "eslint --fix ./src",
+    "lint:stylelint": "stylelint  \"**/*.{css,scss,vue,html}\" --fix"
   },
   "dependencies": {
     "@dcloudio/uni-app": "3.0.0-4020420240722002",
@@ -71,11 +72,24 @@
     "@eslint/js": "^9.10.0",
     "@vue/runtime-core": "^3.4.21",
     "eslint": "^9.10.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-vue": "^9.28.0",
     "globals": "^15.9.0",
+    "postcss": "^8.4.47",
+    "postcss-html": "^1.7.0",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^3.3.3",
+    "stylelint": "^16.9.0",
+    "stylelint-config-html": "^1.1.0",
+    "stylelint-config-recess-order": "^5.1.0",
+    "stylelint-config-recommended": "^14.0.1",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-config-recommended-vue": "^1.5.0",
+    "stylelint-prettier": "^5.0.2",
     "typescript": "^4.9.4",
     "typescript-eslint": "^8.6.0",
     "vite": "5.2.8",
     "vue-tsc": "^1.0.24"
-  },
+  }
 }

prettier.config.mjs

@@ -0,0 +1,8 @@
+export default {
+  printWidth: 100, // 每行最多字符数量，超出换行(默认80)
+  tabWidth: 2, // 缩进空格数，默认2个空格
+  useTabs: false, // 指定缩进方式，空格或tab，默认false，即使用空格
+  semi: true, // 使用分号
+  singleQuote: false, // 使用单引号 (true:单引号;false:双引号)
+  trailingComma: 'all', // 末尾使用逗号
+};

src/App.vue

@@ -4,10 +4,21 @@ onLaunch(() => {
   console.log("App Launch");
 });
 onShow(() => {
-  console.log("App Show");
+  const number = "123";
-});
+  console.log(
-onHide(() => {
+    "App Show111111111111111111111111111111111111111111111111111111111111123231233333333331111111",
+  );
   console.log("App Hide");
 });
 </script>
-<style></style>
+<style lang="scss">
+.search {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100vh;
+  background-color: #f5f5f5;
+  paddings: 123;
+}
+</style>

src/pages/index/index.vue

@@ -8,8 +8,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref } from "vue";
-const title = ref('Hello')
+const title = ref("Hello");
 </script>
 
 <style>
@@ -21,12 +21,12 @@ const title = ref('Hello')
 }
 
 .logo {
-  height: 200rpx;
   width: 200rpx;
+  height: 200rpx;
   margin-top: 200rpx;
-  margin-left: auto;
   margin-right: auto;
   margin-bottom: 50rpx;
+  margin-left: auto;
 }
 
 .text-area {