报“Failed to load config 'eslint:recommended'”主因是本地未安装eslint或版本不匹配，需运行npm install eslint --save-dev，并确认ESLint v9+下preset名称是否变更，同时检查配置文件是否被正确加载。
eslint 插件报 Failed to load config "eslint:recommended" 怎么办
这通常不是插件本身问题，而是项目里没装 eslint 或版本不匹配。VSCode 的 ESLint 插件只是个“显示器”，真正干活的是你本地安装的 eslint 包。
- 先确认项目根目录下有
node_modules/eslint，没有就运行npm install eslint --save-dev - 如果用了 TypeScript，得额外装
@typescript-eslint/parser和@typescript-eslint/eslint-plugin -
.eslintrc.js里写的extends: ['eslint:recommended']是 ESLint 自带规则，但若装的是 v9+，某些 preset 名称已改，建议显式指定版本或换用eslint-config-standard这类社区维护的 preset - VSCode 设置里关掉
eslint.packageManager自动探测，手动设为"npm"或"pnpm"，避免它在错误路径下找包
prettier 格式化后 JSX 换行乱掉，printWidth 不生效
JSX 换行行为受 Prettier 多个参数共同影响，单调 printWidth 很难见效。
-
printWidth控制的是“单行最大字符数”，但 JSX 元素默认会按属性个数、嵌套深度自动换行，和printWidth关系不大 - 关键参数是
jsxSingleQuote（是否用单引号）、jsxBracketSameLine（> 是否换行）、arrowParens（箭头函数括号）——这些才真正决定 JSX 布局 - 如果用了 ESLint + Prettier 组合，务必装
eslint-config-prettier并在extends末尾加入，否则 ESLint 的react/jsx-max-props-per-line等规则会和 Prettier 冲突，导致格式化反复横跳 - VSCode 设置里确认
editor.defaultFormatter是esbenp.prettier-vscode，且editor.formatOnSave开启，别被其他 formatter 覆盖
Vue 文件里 @/components/xxx.vue 点不了、跳不到定义
这是路径别名未被语言服务识别的典型表现，不是插件没装，而是配置断在中间。
- 先检查项目是否有
jsconfig.json或tsconfig.json，里面必须有compilerOptions.baseUrl和compilerOptions.paths，例如："@/*": ["src/*"] - VSCode 默认读
jsconfig.json，如果只有tsconfig.json且项目是 JS，就得复制一份或改后缀 - 装了
Volar（Vue 官方推荐）就别再装旧版Vetur，两者冲突会导致路径解析失效 - 重启 VSCode 后按
Ctrl+Shift+P输入 “Developer: Restart TS Server”，强制刷新类型服务缓存
Live Server 启动后页面空白，控制台报 net::ERR_CONNECTION_REFUSED
本质是静态资源路径没对上，不是端口被占，也不是服务没起来。
立即学习“前端免费学习笔记（深入）”；
- Live Server 默认把当前打开的文件夹当根目录，但如果你打开的是子目录下的 HTML，而引用的 JS/CSS 路径是相对路径（比如
../js/app.js），就会 404 - 右键菜单选 “Open with Live Server” 时，注意看 VSCode 右下角状态栏显示的启动路径，确保它和你期望的
webRoot一致 - 需要自定义根目录，就在项目根建
.vscode/settings.json，加："liveServer.settings.root": "/src"（注意开头不要/，写成"src"） - 如果用了构建工具（Vite/Webpack），别用 Live Server 启动静态 HTML，直接跑
npm run dev，Live Server 只适合纯静态原型
