告别代码屎山!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 原生支持更好。
二、 核心依赖安装:一步到位
首先,清理掉项目里的旧配置文件,然后在根目录执行这行“全家桶”安装命令:
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 完美兼容。
/* 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
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"useTabs": false,
"printWidth": 100,
"trailingComma": "all",
"endOfLine": "auto"
}
- 编辑器底层逻辑:
.editorconfig
让 IDEA 和 VS Code 在你打字的第一秒就明白:缩进只要两个空格。
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
"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 年繁重的业务中,能拥有一份优雅的代码底座。