hello-uniapp ESLint 与 Prettier 配置实战20 分钟让代码告别混乱【免费下载链接】hello-uniappuni-app框架演示示例项目地址: https://gitcode.com/gh_mirrors/he/hello-uniapphello-uniapp 是 uni-app 框架的官方示例工程一套代码即可同时发布到 App、H5 与微信、支付宝等各大小程序。本文以 hello-uniapp 为实验田带你从零配好 ESLint 与 Prettier装依赖、写两份配置、把命令接进 npm最后用一条命令确认全链路已经打通。整个流程 20 分钟照着敲就行。先从一场小事故说起改两行代码冒出 300 行 diff想象一个真实场景你接手 hello-uniapp 项目打算给某个页面加一个按钮。改完提交PR 里瞬间多出 300 行 diff——不是你写错了什么而是你用的缩进是 4 个空格、同事用的是 Tab你写字符串用双引号、项目里全是单引号。reviewer 看得头大你也改得委屈。更麻烦的是这类风格之争每次提交都会重演真正的逻辑改动反而淹没在格式噪音里。这场混乱的根源其实有解让工具去管长相让人专注逻辑。你要引入的就是两位搭档——Prettier只负责格式化。缩进、引号、分号、换行它说了算让你永远不用纠结这段该不该换行。ESLint负责查错。未定义的变量、写错的语法、忘了清理的 console.log它都会用红波浪线提示你。两者分工不同Prettier 管好不好看ESLint 管对不对。配合起来就是一套完整的代码规范防线。第一步一条命令装齐四件套打开终端进入 hello-uniapp 项目根目录如果你还没把项目拉到本地先用git clone https://gitcode.com/gh_mirrors/he/hello-uniapp克隆一份然后执行npm install eslint prettier eslint-plugin-vue vue/eslint-config-prettier --save-dev这四件套各司其职依赖包作用eslint代码检查引擎负责发现错误和不合规写法prettier代码格式化工具负责统一代码风格eslint-plugin-vue让 ESLint 能读懂.vue单文件组件并提供 Vue 官方推荐规则vue/eslint-config-prettier官方和事佬自动关掉 ESLint 里与 Prettier 冲突的格式规则新手常见坑很多教程会额外让你装eslint-config-prettier其实vue/eslint-config-prettier内部已经包含了它装一个就够了装多了反而可能版本打架。装完后项目package.json的devDependencies里会多出这四个包。可以运行npx eslint --version验证能看到版本号就说明装成功了。第二步先定规矩——写 .prettierrc 对齐项目现有风格我习惯先配 Prettier因为它是地基先定好代码长什么样再让 ESLint 照着这个标准去查。在项目根目录新建.prettierrc文件写入{ useTabs: true, tabWidth: 2, singleQuote: true, semi: false, trailingComma: none, printWidth: 100, bracketSpacing: true, endOfLine: lf }每个配置项都值得你花 30 秒读懂useTabs: true用 Tab 缩进。hello-uniapp 官方示例代码本身就是 Tab 风格随便打开pages/API/toast/toast.vue看一眼就能确认格式化工具的任务是向项目既有风格靠拢而不是反过来。singleQuote: true字符串统一用单引号这是 Vue 生态的主流习惯。semi: false行尾不加分号。如果你所在的团队习惯加分号改成true即可这是唯一一个纯看团队偏好的选项。trailingComma: none对象和数组末尾不追加多余逗号老项目兼容性更好。printWidth: 100单行超过 100 个字符才换行比默认的 80 更贴合移动端项目一行塞得下的实际。endOfLine: lf统一换行符。这个容易踩坑——Windows 下默认可能是crlf会导致整个文件被判定为有改动用lf可以避免跨平台提交时出现整文件 diff。易错点.prettierrc是纯 JSON 文件不能写注释。配置项的含义请对照上面的说明理解不要试图把中文注释直接塞进 JSON那会让工具直接报解析错误。第三步再写检查员——.eslintrc.js 里的 uni-app 专属细节规矩定好了现在请出检查员。在项目根目录新建.eslintrc.jsmodule.exports { root: true, env: { browser: true, es6: true, node: true }, extends: [plugin:vue/essential, vue/prettier], globals: { uni: readonly, uniCloud: readonly, getApp: readonly, getCurrentPages: readonly }, parserOptions: { parser: babel-eslint, ecmaVersion: 2020, sourceType: module }, overrides: [ { files: [*.nvue], parser: vue-eslint-parser } ], rules: { no-console: process.env.NODE_ENV production ? error : off, no-debugger: process.env.NODE_ENV production ? error : off } }这份配置里有几处是 uni-app 项目特有的别照搬普通 Vue 项目的模板globals里的uni这是 uni-app 的灵魂。uni.showToast、uni.request这些全局 API 在 ES 标准里并不存在不声明的话 ESLint 会把它们全部报成未定义变量。同理getApp、getCurrentPages、uniCloud也要一并声明。overrides里的*.nvuehello-uniapp 里不少页面是.nvue后缀比如pages/API/map/map.nvue。.nvue本质是 Vue 单文件组件但要告诉 ESLint 用vue-eslint-parser解析 Vue 语法的专用解析器去解析它否则检查时会直接报解析错误。parser: babel-eslint它的作用是让 ESLint 理解尚未被主流浏览器完全支持的现代 JavaScript 语法可选链、空值合并等避免语法明明没问题却报错的假阳性。易错点hello-uniapp 大量使用// #ifdef MP-ALIPAY、// #ifndef H5这类条件编译注释用来区分各平台代码。Prettier 默认不会动注释ESLint 也不会误报但你在配置规则时不要添加任何删除注释类的规则否则会误伤这些平台开关。第四步把命令接进 package.json实现 hello-uniapp 一键格式化配置写好了总不能每次都手敲一长串命令。把检查与格式化能力封装成 npm 脚本才是真正的一键体验。打开package.json在scripts节点里添加scripts: { lint: eslint --ext .js,.vue,.nvue pages common components store App.vue main.js, lint:fix: eslint --ext .js,.vue,.nvue pages common components store App.vue main.js --fix, format: prettier --write ., format:check: prettier --check . }四条命令的用途一目了然npm run lint只检查不修改看看当前代码有多少违纪项。npm run lint:fix能自动修的直接修掉比如多余空格、未用变量修不了的列出位置让你手动处理。npm run format一键格式化全项目这才是真正的hello-uniapp 一键格式化。npm run format:checkCI 或提交前检查用只报告哪些文件不合规而不改动文件。新手常见坑网上很多教程的 lint 脚本写的是eslint --ext .js,.vue src但 hello-uniapp根本没有 src 目录——它的源码直接散落在根目录的pages/、common/、components/、store/下App.vue 和 main.js 也在根目录。照搬 src 写法命令会静默地什么都没检查还自以为配好了。这也是为什么我上面把目录名写得明明白白。别忘了配套两个忽略文件让工具假装看不见不需要管的东西。新建.eslintignorenode_modules/ unpackage/ dist/ static/ uni_modules/ wxcomponents/再新建.prettierignorenode_modules/ unpackage/ dist/ static/ uni_modules/ wxcomponents/ hybrid/理由很简单node_modules是依赖、unpackage是构建产物、uni_modules和wxcomponents是第三方组件里面有大量手写压缩代码格式化反而会制造噪音、static里是压缩过的 JS 和字体文件。这些都是不该动的区域。进阶提交代码前自动拦截可选配置到这里日常开发已经够用了。但如果团队不止你一个人建议再加一道提交前自动检查的防线——每次git commit前自动跑一遍规范检查不合格就不让你提交。npm install husky lint-staged --save-dev npx husky install npx husky add .husky/pre-commit npx lint-staged然后在package.json里加一段lint-staged: { *.{js,vue,nvue}: [eslint --fix, prettier --write] }这样每次提交只会检查你本次改动的文件这就是lint-staged的含金量全项目几百个文件不会拖慢提交速度。小团队可以先跳过这步等项目大了再补上也不迟。怎么确认真的配好了三连验证配置完成不等于配置成功。用下面三步花两分钟确认整条链路是通的第一验跑一遍检查。npm run lint如果项目原本就规范会看到类似✖ 0 problems的输出如果报出错误说明 ESLint 已经上岗了这正是它该干的活。第二验故意制造混乱再一键修复。打开pages/API/toast/toast.vue把某一行代码的缩进改成 8 个空格、双引号保存然后运行npm run format再打开文件你会看到缩进和引号已经被自动归位。此时在终端执行git diff能清楚地看到恢复原状的记录——格式化工具真实生效了。第三验精确到单文件的合规证明。npx prettier --check pages/API/toast/toast.vue如果输出All matched files use Prettier code style!恭喜你的 hello-uniapp 代码规范环境正式上线。最后如果你用 VS Code 写代码强烈建议在设置里加这三行让保存即格式化{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, editor.codeActionsOnSave: { source.fixAll.eslint: true } }避坑速查表uni-app ESLint 配置最容易翻车的 5 个细节坑表现解法没声明uni全局变量满屏 uni is not defined在globals里声明uni: readonlylint 脚本照搬src路径命令运行成功但什么都没查改为pages common components store App.vue main.js.nvue文件报解析错误Parsing error在overrides中为*.nvue指定vue-eslint-parser条件编译注释被规则误伤平台差异代码被建议删除不要启用任何删除注释类规则Prettier 把第三方组件格式化了几百个文件同时被改动在 ignore 文件里排除uni_modules、wxcomponents、static配置规范工具这件事最大的收益不是代码变整齐这个结果而是以后再也不用在这件事上花时间——争论消失了review 变快了新同事上手也不会再贡献300 行格式 diff。现在去打开你的 hello-uniapp跑一次npm run format然后看看终端里那句让人安心的成功输出吧。代码整洁心情也跟着整洁 ✨【免费下载链接】hello-uniappuni-app框架演示示例项目地址: https://gitcode.com/gh_mirrors/he/hello-uniapp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考