告别代码屎山！UniApp + Vue3 自动化规范：ESLint 9+ 扁平化配置全指南

配置初衷是为了保证，团队开发中的代码规范问题。以下是全部配置过程，我的项目是npm创建的，并非hbuilder创建的。如果你的项目的hbuilder创建的，需要执行下 npm init -y。

配置后想要达到的效果：

保证缩进统一性
vue组件多个属性可以自动换行。
在代码里用了 uni.showToast，ESLint 却疯狂报错 uni is not defined。

2025 年，ESLint 迎来了史上最大变革------Flat Config（扁平化配置） 时代。今天，我们就用一套最硬核的方案，把 Vue3、TypeScript、SCSS 和 Git 自动化 全部打通！

一、为什么 2025 年要用 ESLint 9+ ？

传统的 .eslintrc.js 采用的是"层级继承"逻辑，配置多了就像迷宫。而 ESLint 9+ 的 Flat Config (eslint.config.mjs) 采用纯 JavaScript 数组对象，逻辑更扁平、加载更快速、对 ESM 原生支持更好。

二、核心依赖安装：一步到位

首先，清理掉项目里的旧配置文件，然后在根目录执行这行"全家桶"安装命令：

bash 复制代码

npm install eslint @eslint/js typescript-eslint eslint-plugin-vue globals eslint-config-prettier eslint-plugin-prettier prettier husky lint-staged --save-dev

三、配置实战：三剑客齐聚

魔法启动：生成 ESLint 9 配置文件

新版 ESLint 推荐通过交互式命令生成基础框架，但针对 UniApp，我们建议直接创建 eslint.config.mjs 以获得极致控制力。

核心逻辑：

2 空格缩进：强迫症的福音。
属性换行：组件属性 > 3 个自动起新行。
多语言全开：JS / TS / Vue / CSS / SCSS 完美兼容。

php 复制代码

/* eslint.config.mjs */
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import pluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import globals from 'globals';

export default tseslint.config(
  // 【1】配置忽略名单：不检查编译后的代码
  { ignores: ['dist/**', 'unpackage/**', 'node_modules/**', 'static/**'] },

  // 【2】JS 基础规则 & UniApp 全局变量支持
  js.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: {
        ...globals.browser, ...globals.node,
        uni: 'readonly', wx: 'readonly', plus: 'readonly' // 解决 uni 报错
      },
    },
  },

  // 【3】TypeScript 强类型支持
  ...tseslint.configs.recommended,

  // 【4】Vue 3 核心规范（属性换行策略）
  ...pluginVue.configs['flat/recommended'],
  {
    files: ['**/*.vue'],
    languageOptions: {
      parserOptions: { parser: tseslint.parser } // Vue 模板内支持 TS
    },
    rules: {
      'vue/multi-word-component-names': 'off', // 适配 UniApp 页面名
      'vue/html-indent': ['error', 2],         // 模板强制 2 空格
      'vue/max-attributes-per-line': ['error', {
        singleline: { max: 3 }, // 超过 3 个属性就换行
        multiline: { max: 1 }   // 多行模式下每行只能有一个属性
      }],
      'vue/first-attribute-linebreak': ['error', {
        singleline: 'beside', multiline: 'below'
      }]
    }
  },

  // 【5】Prettier 冲突处理：必须放在数组最后一行！
  pluginPrettierRecommended,
);

视觉统领：.prettierrc

json 复制代码

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 100,
  "trailingComma": "all",
  "endOfLine": "auto"
}

编辑器底层逻辑：.editorconfig

让 IDEA 和 VS Code 在你打字的第一秒就明白：缩进只要两个空格。

ini 复制代码

root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true

四、极速体验：让工具为你打工

IDEA / WebStorm 深度联动

别再手动敲 Ctrl+Alt+L 了！

进入 Settings -> ESLint ，勾选 Run eslint --fix on save。
进入 Settings -> Prettier ，勾选 Run on save 。
IDEA 2024+ 会完美识别你的 eslint.config.mjs。

Git 提交自动"洗地" (Husky + lint-staged)

想要代码仓库永远干干净净？在 package.json 中加入这道闸门：

json

json 复制代码

"lint-staged": {
  "*.{js,ts,vue}": ["eslint --fix", "prettier --write"],
  "*.{css,scss,json,md}": ["prettier --write"]
}

执行 npx husky init 并将 .husky/pre-commit 改为 npx lint-staged。现在，任何不符合规则的代码都别想溜进 Git 仓库！

五、结语

规范不是为了限制自由，而是为了让开发者在 2025 年繁重的业务中，能拥有一份优雅的代码底座。

告别代码屎山！UniApp + Vue3 自动化规范：ESLint 9+ 扁平化配置全指南

一、 为什么 2025 年要用 ESLint 9+ ？

二、 核心依赖安装：一步到位

三、 配置实战：三剑客齐聚

五、 结语

一、为什么 2025 年要用 ESLint 9+ ？

二、核心依赖安装：一步到位

三、配置实战：三剑客齐聚

五、结语