ESLint 与 Prettier 需分工协作:ESLint 负责逻辑与规范检查,Prettier 专管格式化;通过配置 eslint-config-prettier 关闭 ESLint 格式规则,并在 VSCode 中禁用 eslint.format.enable、启用 Prettier 为默认格式化器,可避免冲突。

ESLint + Prettier 怎么配才不打架
ESLint 检查代码逻辑和规范,Prettier 负责格式排版,两者默认规则会冲突——比如 ESLint 要求分号,Prettier 默认删分号,保存时反复拉扯,光标乱跳、报错红波浪线不断闪。
- 先装插件:
ESLint(Microsoft 官方)和Prettier - Code formatter,别用其他同名非官方版本 - 项目根目录运行
npx eslint --init生成.eslintrc.cjs,选“JavaScript modules (import/export)”和“Node”环境,最后一步选“JSON”或“JavaScript”都行,但别跳过 - 在
.eslintrc.cjs的extends数组里加'prettier',再额外安装eslint-config-prettier并加入extends,顺序必须是:自定义规则 →eslint-config-prettier→prettier - VSCode 设置中启用
editor.formatOnSave,并设editor.defaultFormatter为esbenp.prettier-vscode;同时关掉eslint.format.enable(它只该做检查,不该抢格式化权)
Auto Rename Tag 改了 <div> 为什么 </div> 没同步
常见于 Vue/JSX 文件里标签嵌套深、或用了自定义组件名(如 <MyButton>),插件默认只对 HTML 标准标签生效,且依赖语言模式识别是否准确。
- 确认当前文件右下角显示的是
Vue或JavaScript React,不是Plain Text或HTML;点一下切换正确语言模式 - 检查设置里
auto-rename-tag.activationOnLanguage是否包含vue和javascriptreact,默认值可能只含html - 如果用了 JSX 片段(如
rfc快捷生成函数组件),确保Auto Rename Tag插件是最新版(2025 年后已支持 JSX 闭合标签自动更新) - 别在
template外的script区域期待它工作——它只管模板结构,不管 JS 变量名
Path Intellisense 提示路径时总漏掉 src/utils 这类深层目录
不是插件坏了,而是它默认只扫描当前打开文件夹下的直接子目录,遇到软链、符号链接、或未在 VSCode 工作区里显式包含的子文件夹,就会“看不见”。
- 打开 VSCode 左侧资源管理器,右键项目根文件夹 →
Add Folder to Workspace,确保所有要用的模块目录都在工作区范围内 - 如果用了
tsconfig.json或jsconfig.json配置了baseUrl和paths,Path Intellisense 默认不读这些——得手动在settings.json里加"path-intellisense.mappings"映射 - 例如:
"path-intellisense.mappings": { "@": "${workspaceFolder}/src", "@utils": "${workspaceFolder}/src/utils" } - 注意:
node_modules内包名补全是开箱即用的,但自定义别名必须显式配置,否则输入import xxx from '@utils/xxx'时不会提示
GitLens 行内 blame 显示 “No author info”
不是 GitLens 没装好,而是当前文件没被 Git 跟踪,或者你正编辑的是未提交的新建文件、暂存区外的修改、或分支上某次 rebase 后的孤立提交。
- 执行
git status确认文件状态:如果是untracked,先git add .;如果是modified但没git add,blame 仍可能为空 - 检查 VSCode 底部状态栏是否显示了正确的 Git 分支名,如果显示
No source control providers,说明没识别到 Git 仓库——确认项目根目录有.git文件夹 - GitLens 默认只显示最近一次 commit 的作者信息,若某行是刚改的、还没 commit,就显示空白;按
Ctrl+Shift+P输入GitLens: Toggle Blame Annotations可强制刷新 - 团队协作中,如果同事用
--author覆盖了提交作者,而你本地没配置user.name/email,也可能导致 blame 显示异常
真正卡住人的,往往不是插件装不装,而是装完后没意识到 ESLint 和 Prettier 的控制权要切分清楚、GitLens 的 blame 依赖真实 commit 记录、Path Intellisense 的映射得手动写进 settings —— 这些地方一漏,插件就“失灵”,但错误又不报,只能靠排查意识兜底。


















