应禁用eslint中与格式相关的规则,配置prettier为唯一格式化工具,确保vscode仅启用prettier自动格式化、关闭eslint自动修复,并正确配置别名路径、auto rename tag对vue支持及hmr环境。

怎么让 Prettier 和 ESLint 不打架
保存时格式化和语法检查同时触发,常导致代码被反复修改、报错闪烁、甚至 import 语句被删掉。根本原因是两者职责重叠:Prettier 管样式,ESLint 管逻辑,但某些规则(比如 semi、quotes)ESLint 也管。
实操建议:
- 禁用 ESLint 中与格式相关的规则,在
.eslintrc.js里加"prettier"插件并执行extends: ["eslint:recommended", "plugin:prettier/recommended"] - 确保
editor.defaultformatter设为esbenp.prettier-vscode,且editor.formatonsave为true - 不要同时开启 ESLint 的
fix on save—— 这会和 Prettier 冲突;只保留 Prettier 的自动格式化 - 若用 Vue 或 TS,额外安装
@vue/eslint-config-prettier或@typescript-eslint/eslint-config-prettier关闭对应规则
别名路径跳转为什么点不动
写 import Header from '@/components/Header.vue',Ctrl+单击却没反应,不是插件没装,而是配置没对齐。
常见卡点:
-
jsconfig.json或tsconfig.json里没配baseUrl和paths,例如缺失:"compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } - 项目根目录下没有
jsconfig.json(TS 项目必须有tsconfig.json,JS 项目必须显式加jsconfig.json) - VSCode 没识别到配置文件变更 —— 关闭再重启窗口,或运行命令
Developer: Reload Window - 插件本身不处理
~别名,只认@或你自定义的前缀(如src/),别名必须和配置完全一致
Auto Rename Tag 在 Vue 模板里失效
改了 <div class="card">,但 <code>











