企业官网建设流程全解析

hello-uniapp 代码规范终极指南：十分钟装好 ESLint 与 Prettier

【免费下载链接】hello-uniappuni-app框架演示示例项目地址: https://gitcode.com/gh_mirrors/he/hello-uniapp

hello-uniapp 是 uni-app 框架的官方演示示例工程，一套代码就能同时发行到 iOS、Android、H5 与各大小程序平台。这篇文章不跟你谈大道理，而是直接带你在这套工程里落地一条「ESLint 检查 + Prettier 格式化」的代码规范工作流，让团队协作从"各写各的"变成"人人一致"。

先看一个让你血压升高的场景

想象一下这样的周一：你 pull 下最新代码准备合并分支，结果 diff 面板里密密麻麻全是红色删除线和绿色新增行。仔细一看，既没改逻辑也没动接口，纯粹是因为——新同事用了 4 空格缩进，而你习惯 2 空格；他字符串喜欢双引号，你偏偏钟爱单引号；他写完代码随手一敲回车，行尾多出一堆空白。

于是，一次本该 5 分钟搞定的代码评审，变成了"这行到底是谁改的"考古现场。更糟的是，这种格式纠纷会在每一次合并分支、每一次 pull request 里反复上演，直到有人拍桌子：能不能统一一下格式？

答案当然能。与其靠人肉 review 一遍遍提醒，不如让工具替你把关。这就是本文要做的：给 hello-uniapp 配上 ESLint 与 Prettier，用一条命令、一个保存动作，终结所有格式之争。

先搞清楚两位主角的分工

很多人把 ESLint 和 Prettier 混为一谈，其实它们是两种性格完全不同的工具：

• ESLint 像代码的体检医生，负责"查病"：有没有定义了变量却没用、有没有在 Vue 模板里写错指令、有没有遗留 console 和 debugger。它只诊断，不负责把字写好看。
• Prettier 像统一着装的造型师，负责"好看"：缩进几个空格、引号用哪种、每行最长多少、尾逗号加不加，它统统替你拍板并自动重排。

一句话记住分工：ESLint 管"对不对"，Prettier 管"齐不齐"。两者配合，一个保证代码不出错，一个保证代码看着舒服，正好覆盖代码规范的两大维度。

你可以这样理解：体检医生负责把病人的健康指标调正常，造型师负责把出院的人打扮得体面出门。谁也不能替代谁。

三步装齐全部依赖

第一步很朴素：把工具请进项目。打开终端，在 hello-uniapp 项目根目录执行：

npm install eslint prettier eslint-plugin-vue @vue/eslint-config-prettier --save-dev

逐个拆解这四样东西，别被名字吓到：

• eslint：体检医生本尊；
• prettier：造型师本尊；
• eslint-plugin-vue：让 ESLint 能看懂.vue单文件组件里的模板和脚本；
• @vue/eslint-config-prettier：官方的"和事佬"，把 ESLint 里跟 Prettier 撞车的规则提前关掉，避免两个工具互相打架。

如果你用的是 npm 7 以上版本，装完后node_modules里会多出一大堆文件，这是正常现象，不用理会。

小结：装完依赖后，运行npx eslint --version和npx prettier --version，能打印出版本号就说明工具已就位，这是你的第一个可验证检查点。

落地一套最小可运行配置

装好工具只是第一步，还得告诉它们"按什么标准干活"。

给 ESLint 一张体检单：.eslintrc.js

在项目根目录新建.eslintrc.js：

module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', '@vue/prettier' ], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' }, parserOptions: { parser: 'babel-eslint' } }

白话解释每段的意思：root: true告诉 ESLint 别往上级目录乱翻配置；extends是"继承体检套餐"——plugin:vue/essential覆盖 Vue 组件的基础规范，@vue/prettier负责跟 Prettier 握手言和；rules里配置了上线构建时把console和debugger直接当错误拦截，开发时则睁一只眼闭一只眼；最后的parserOptions是为工程里的 ES 新语法准备解析器。

给 Prettier 一张审美清单：.prettierrc

再新建一个.prettierrc：

{ "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5", "printWidth": 100, "bracketSpacing": true }

这套审美标准的意思是：语句结尾加分号、字符串用单引号、缩进 2 空格、对象和数组末尾在 ES5 兼容场景下加尾逗号、单行最长 100 个字符、花括号内侧留一个空格。全部都是前端圈的主流口味，看着眼熟就对了。

小结：到这里你已经拥有了一套最小可运行配置。试试在pages/目录随便打开一个.vue文件删掉一个分号，再执行npx prettier --write pages/，看看文件是不是被瞬间"捋直"了。

保存即格式化的工具设置

配置写好了，但每次手动敲命令还是不够爽。真正的体验飞跃发生在编辑器里：保存文件的一瞬间，自动完成格式化和规范修复。

如果你用 VS Code，先装好这两个插件：ESLint 和 Prettier - Code formatter。然后在设置里加入这段 JSON：

{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }

三个开关各司其职：formatOnSave让保存即触发格式化，defaultFormatter把格式化任务指定给 Prettier，codeActionsOnSave让保存时顺带执行 ESLint 能自动修复的规则。配置完记得重启一下窗口，效果才生效。

你可以这样验收：故意在一个文件里打乱缩进、混用引号，然后按 Ctrl+S——见证奇迹的时刻，文件瞬间恢复整洁。这一刻起，你的编辑器就是半个代码规范机器人了。

把检查命令化为一键脚本

编辑器负责日常，命令行负责兜底。把常用操作写进package.json的scripts里，让团队成员无需记忆长命令：

"scripts": { "lint": "eslint --ext .js,.vue src", "lint:fix": "eslint --ext .js,.vue src --fix", "format": "prettier --write \"src/**/*.{js,vue,css,scss}\"" }

用法很简单：npm run lint只体检不改动，适合 CI 流程里当守门员；npm run lint:fix允许 ESLint 顺手修复能自动解决的问题；npm run format则让 Prettier 把指定目录下的文件全部重排一遍。团队里约定俗成：提交代码前跑一遍lint:fix，合入主干前由 CI 跑一遍lint，双保险。

小结：如果你用的是 hello-uniapp 这样的完整示例工程，src路径未必存在，你可以把它换成pages、components等实际目录，按需微调即可。

里程碑验收清单

收尾不搞大总结，直接给你一张可落地的验收清单，照着勾，全绿就算通关：

• 依赖安装成功，npx eslint --version与npx prettier --version均有输出
• 项目根目录存在.eslintrc.js和.prettierrc，且能被识别
• VS Code 已装 ESLint 与 Prettier 插件，保存文件后格式自动规整
• package.json中已加入lint、lint:fix、format三个脚本
• 故意制造一处格式错误，npm run lint能准确报出位置
• .vue、.js、.json文件均能正常通过检查，无误报

疑问快答：常见的三个坑

问：ESLint 和 Prettier 真吵起来了怎么办？答：多半是规则撞车。补装eslint-config-prettier，并在.eslintrc.js的extends末尾追加'eslint-config-prettier'，它会把所有与格式化相关的 ESLint 规则统一关闭，把话语权完全交给 Prettier。

问：node_modules、unpackage这类目录也想被放过？答：那就建两个忽略文件。在.eslintignore和.prettierignore里各写三行node_modules/、dist/、unpackage/，两个工具就会自动绕开这些"不归他们管"的地方，检查速度也会快不少。

问：项目里大量.nvue、.uvue文件会不会报错？答：uni-app 生态里这类文件本质还是类 Vue 语法。初次接入时建议先对单个目录试运行，观察报错再决定是调整配置还是加入忽略列表，不要一上来就全量整改，避免一次改动过大。

到这里，hello-uniapp 的 uni-app 代码规范工作流就算完整搭建好了。你会发现：体检医生在后台盯着"对不对"，造型师在你按下保存键时默默把代码"捋齐"，而团队要做的，只是把这份配置随仓库一起提交，让每个新人都从第一天起就站在同一条起跑线上。下次再有人说"代码风格这事儿没法统一"，你可以把这份验收清单甩给他了。

【免费下载链接】hello-uniappuni-app框架演示示例项目地址: https://gitcode.com/gh_mirrors/he/hello-uniapp