如何在 Vue3 和 UniApp 项目中配置前端工程化工具链。内容包括 ESLint 9 的扁平化配置方法、Prettier 代码格式化设置、Husky 与 lint-staged 实现 Git 提交前自动检查、EditorConfig 统一编辑器规范以及 Stylelint 处理样式文件检查。文章提供了具体的命令行操作、配置文件示例及关键规则调整建议，帮助开发者建立统一的代码规范和自动化流程。
使用以下命令创建配置：
pnpm create @eslint/config@latest
UniApp 项目自动生成 eslint.config.mjs，Vue3 项目生成 eslint.config.js。这是 ESLint v9 的扁平配置（Flat Config）格式，取代了旧的 .eslintrc.*。
import js from "@eslint/js"
import globals from "globals"
import tseslint from "typescript-eslint"
import pluginVue from "eslint-plugin-vue"
import { defineConfig } from "eslint/config"
export default defineConfig([
{
files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"],
plugins: { js },
extends: ["js/recommended"],
languageOptions: {
globals: globals.browser
}
},
tseslint.configs.recommended,
pluginVue.configs["flat/essential"],
{
files: ["**/*.vue"],
languageOptions: {
parserOptions: {
parser: tseslint.parser
}
}
}
])
eslint.config.mjs：强制 ESM，必须用 import。eslint.config.cjs：强制 CommonJS，必须用 require。eslint.config.js：根据 package.json 中的 "type" 字段决定是 ESM 还是 CommonJS。大部分配置可参考官方文档「Configuration Files」。TypeScript 解析器需额外配置 typescript-eslint。
在 eslint-plugin-vue 中，存在「要求组件名始终为多字」的规则，可根据需求关闭：
export default defineConfig([
// ...其他配置
pluginVue.configs['flat/essential'],
{
rules: {
'vue/multi-word-component-names': 'off'
}
}
])
新版 eslint.config.js 中，.eslintignore 被完全忽略，必须改用配置中的 ignores 字段或 globalIgnores。
Vue 示例：
import { defineConfig, globalIgnores } from "eslint/config"
export default defineConfig([
globalIgnores(["node_modules/", "pnpm-lock.yaml", "**/*.css", "**/*.d.ts"])
])
UniApp 示例：
import { defineConfig, globalIgnores } from "eslint/config"
export default defineConfig([
globalIgnores(["node_modules/", "src/uni_modules/", "dist/", "pnpm-lock.yaml", "**/*.css", "**/*.d.ts"])
])
通过安装编辑器插件，可在 IDE 中自动检测代码规范。
ESLint 侧重代码质量，Prettier 侧重代码风格统一。
pnpm add -D prettier --save-exact
--save-exact 用于精确保存版本号，避免自动升级导致环境不一致。
推荐使用 prettier.config.js：
const config = {
trailingComma: 'none',
tabWidth: 2,
semi: false,
singleQuote: true,
printWidth: 80,
endOfLine: 'lf'
}
export default config
创建 .prettierignore 文件：
node_modules/
pnpm-lock.yaml
src/uni_modules/*
dist/*
wailsjs
pnpm dlx prettier --write .
ESLint 包含代码风格规则，可能与 Prettier 冲突。使用这两个包来解决冲突并统一工具链。
pnpm add -D eslint-plugin-prettier eslint-config-prettier
将 eslint-plugin-prettier 放在配置最后，确保它能覆盖其他规则：
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
export default defineConfig([
// 其他配置
eslintPluginPrettierRecommended
])
在 VSCode 中选择 Prettier 作为默认格式化程序，并开启保存时格式化文件。
Husky 用于管理 Git Hooks，Lint-staged 用于在提交前仅检查变更文件，提升性能。
pnpm add -D husky
pnpm exec husky init
在 .husky/pre-commit 文件中添加脚本。
pnpm add -D lint-staged
创建 lint-staged.config.js：
import { ESLint } from 'eslint'
const removeIgnoredFiles = async (files) => {
const eslint = new ESLint()
const ignoredFiles = await Promise.all(
files.map((file) => eslint.isPathIgnored(file))
)
const filteredFiles = files.filter((_, i) => !ignoredFiles[i])
return filteredFiles.join(' ')
}
export default {
'*': async (files) => {
const filesToLint = await removeIgnoredFiles(files)
return [`eslint ${filesToLint} --max-warnings=0`]
}
}
在 .husky/pre-commit 文件中写入：
pnpm exec lint-staged
EditorConfig 用于定义编辑器基础规范。
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
[*.md]
trim_trailing_whitespace = false
[*.json]
indent_size = 2
Stylelint 用于 CSS/SCSS 等样式文件的检查。
pnpm add -D stylelint
pnpm add -D stylelint-config-standard-scss
pnpm add -D postcss-html stylelint-config-recommended-vue postcss-scss
pnpm add -D stylelint-order stylelint-config-recess-order
pnpm add -D stylelint-config-prettier
创建 stylelint.config.js：
/** @type {import('stylelint').config} */
export default {
extends: [
'stylelint-config-standard-scss',
'stylelint-config-recommended-vue/scss',
'stylelint-config-recess-order',
'stylelint-config-prettier'
],
ignoreFiles: [
"node_modules/**"
]
}
创建 .stylelintignore：
/node_modules/**
安装对应的 Stylelint 插件以在编辑器中自动检测样式问题。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online