能,eslint 与 prettier 可共存于 uni-app 项目,需配置 eslint-config-prettier 关闭冲突规则、.prettierrc 设 parser: "vue" 并启用 vueindentscriptandstyle,vue 3 项目须用 eslint-plugin-vue@9+ 及 @vue/eslint-parser,编辑器需禁用 vetur、启用 prettier 格式化。
uni-app 项目里 eslint 和 prettier 能共存吗?
能,但默认不自动协同。ESLint 负责代码质量(比如 undefined 变量、console.log 漏删),Prettier 负责格式(缩进、分号、引号)。两者职责不同,强行让 ESLint 管格式容易冲突,所以得让 Prettier「只管格式」,ESLint 「跳过格式检查」。
- 安装时必须同时加
eslint-config-prettier(关掉 ESLint 中和 Prettier 冲突的规则)
- 在
.eslintrc.js 的 extends 末尾加上 'prettier',顺序不能错:Prettier 配置必须在最后覆盖前面的格式类规则
- 不要启用
eslint-plugin-prettier 的 prettier/recommended——uni-app 的 Vue 单文件组件(.vue)里,它对 <template></template> 块支持不稳定,常报 Parse errors in imported module
uni-app 的 .vue 文件怎么让 Prettier 正确格式化?
Prettier 默认不识别 .vue 文件里的 <script setup></script> 语法和条件编译注释(如 // #ifdef H5)。直接跑 npx prettier --write src/ 会跳过或报错。
- 在
.prettierrc 中显式声明支持:"parser": "vue"(注意不是 babel 或 typescript)
- 加上
"vueIndentScriptAndStyle": true,否则 <script setup></script> 里的代码缩进会被抹平
- 忽略 uni-app 特有注释:Prettier 本身不处理
// #ifdef,但 ESLint 会警告「无法解析」,所以要在 .eslintrc.js 的 rules 里关掉:"padded-blocks": "off" 和 "no-unused-expressions": ["error", { "allowTaggedTemplates": true }](防误杀条件编译模板字符串)
ESLint 校验 .vue 文件时提示 “Definition for rule ‘xxx’ was not found”
这是插件没装全或版本不匹配。uni-app 基于 Vue 2 或 Vue 3(取决于创建时选的模板),而 eslint-plugin-vue 的规则名和启用方式在 v8/v9 之间有 breaking change。
- 查清项目用的是 Vue 2 还是 Vue 3:看
package.json 里 @dcloudio/uni-app-cli 版本,v3.0+ 默认 Vue 3;再确认 vue 包主版本
- Vue 3 项目必须用
eslint-plugin-vue@9+,并在 extends 中写 'plugin:vue/vue3-essential'(不是 vue/essential)
- 如果用了
<script setup></script>,还要额外装 @vue/eslint-parser,并在 .eslintrc.js 里配 parser: '@vue/eslint-parser',否则 defineProps 会被判成未定义变量
保存时自动格式化,但 HBuilderX 或 VS Code 不生效?
编辑器只是调用命令,真正起作用的是配置文件是否被识别、命令是否走对了路径。
- VS Code 需在工作区设置中开启:
"editor.formatOnSave": true,且 "editor.defaultFormatter" 设为 esbenp.prettier-vscode
- 但 uni-app 的
.vue 文件可能被其他插件劫持(比如 Vetur),务必禁用 Vetur,只留 Vue - Official(Volar)——HBuilderX 内置的是自研解析器,无需额外配置,但需确认右下角状态栏显示「Prettier」已激活
- 最关键:检查
.prettierrc 和 .eslintrc.js 是否放在项目根目录(和 package.json 同级),不在 src/ 或子文件夹里,否则编辑器找不到
eslint-config-prettier(关掉 ESLint 中和 Prettier 冲突的规则).eslintrc.js 的 extends 末尾加上 'prettier',顺序不能错:Prettier 配置必须在最后覆盖前面的格式类规则eslint-plugin-prettier 的 prettier/recommended——uni-app 的 Vue 单文件组件(.vue)里,它对 <template></template> 块支持不稳定,常报 Parse errors in imported module
.vue 文件里的 <script setup></script> 语法和条件编译注释(如 // #ifdef H5)。直接跑 npx prettier --write src/ 会跳过或报错。
- 在
.prettierrc中显式声明支持:"parser": "vue"(注意不是babel或typescript) - 加上
"vueIndentScriptAndStyle": true,否则<script setup></script>里的代码缩进会被抹平 - 忽略 uni-app 特有注释:Prettier 本身不处理
// #ifdef,但 ESLint 会警告「无法解析」,所以要在.eslintrc.js的rules里关掉:"padded-blocks": "off"和"no-unused-expressions": ["error", { "allowTaggedTemplates": true }](防误杀条件编译模板字符串)
ESLint 校验 .vue 文件时提示 “Definition for rule ‘xxx’ was not found”
这是插件没装全或版本不匹配。uni-app 基于 Vue 2 或 Vue 3(取决于创建时选的模板),而 eslint-plugin-vue 的规则名和启用方式在 v8/v9 之间有 breaking change。
- 查清项目用的是 Vue 2 还是 Vue 3:看
package.json 里 @dcloudio/uni-app-cli 版本,v3.0+ 默认 Vue 3;再确认 vue 包主版本
- Vue 3 项目必须用
eslint-plugin-vue@9+,并在 extends 中写 'plugin:vue/vue3-essential'(不是 vue/essential)
- 如果用了
<script setup></script>,还要额外装 @vue/eslint-parser,并在 .eslintrc.js 里配 parser: '@vue/eslint-parser',否则 defineProps 会被判成未定义变量
保存时自动格式化,但 HBuilderX 或 VS Code 不生效?
编辑器只是调用命令,真正起作用的是配置文件是否被识别、命令是否走对了路径。
- VS Code 需在工作区设置中开启:
"editor.formatOnSave": true,且 "editor.defaultFormatter" 设为 esbenp.prettier-vscode
- 但 uni-app 的
.vue 文件可能被其他插件劫持(比如 Vetur),务必禁用 Vetur,只留 Vue - Official(Volar)——HBuilderX 内置的是自研解析器,无需额外配置,但需确认右下角状态栏显示「Prettier」已激活
- 最关键:检查
.prettierrc 和 .eslintrc.js 是否放在项目根目录(和 package.json 同级),不在 src/ 或子文件夹里,否则编辑器找不到
package.json 里 @dcloudio/uni-app-cli 版本,v3.0+ 默认 Vue 3;再确认 vue 包主版本eslint-plugin-vue@9+,并在 extends 中写 'plugin:vue/vue3-essential'(不是 vue/essential)<script setup></script>,还要额外装 @vue/eslint-parser,并在 .eslintrc.js 里配 parser: '@vue/eslint-parser',否则 defineProps 会被判成未定义变量- VS Code 需在工作区设置中开启:
"editor.formatOnSave": true,且"editor.defaultFormatter"设为esbenp.prettier-vscode - 但 uni-app 的
.vue文件可能被其他插件劫持(比如 Vetur),务必禁用 Vetur,只留 Vue - Official(Volar)——HBuilderX 内置的是自研解析器,无需额外配置,但需确认右下角状态栏显示「Prettier」已激活 - 最关键:检查
.prettierrc和.eslintrc.js是否放在项目根目录(和package.json同级),不在src/或子文件夹里,否则编辑器找不到
实际跑起来最常卡在 parser 配置和插件版本上,尤其是从旧版 uni-app 升级后,eslint-plugin-vue 和 @vue/eslint-parser 的版本差一个小数点,defineProps 就标红。别急着重装,先 npm ls eslint-plugin-vue @vue/eslint-parser 看版本是否兼容。










