结论：eslint 负责“对不对”，prettier 负责“好不好看”，必须分工明确；需安装 eslint-config-prettier（非 plugin 版）禁用 eslint 格式规则，.eslintrc.js 中 extends 里 prettier 必须置末位，vs code 中禁用 editor.formatonsave 并设默认格式化器为 prettier。

ESLint 和 Prettier 冲突时怎么配才不报红

直接说结论：ESLint 负责“对不对”，Prettier 负责“好不好看”，两者必须分工明确，否则 eslint-config-prettier 不装或装错版本，就会在保存时反复格式化又报错。

• 装插件时务必同步安装 eslint-config-prettier（不是 eslint-plugin-prettier），它是用来关掉 ESLint 里和格式相关的规则的
• .eslintrc.js 中 extends 列表里，prettier 必须放在最后——顺序错了，前面的规则会覆盖它
• VS Code 的 settings.json 里，禁用 editor.formatOnSave 给 ESLint，只留给 Prettier；同时设 "editor.defaultFormatter": "esbenp.prettier-vscode"
• 如果项目用 TypeScript，还要加 plugin:@typescript-eslint/recommended，但注意它默认启用 semi，而你若用 prettier.semi: false，就得手动关掉 @typescript-eslint/semi

路径补全失效？检查 jsconfig.json 或 tsconfig.json 的 baseUrl 和 paths

Path Intellisense 不是“装了就灵”，它依赖项目级路径映射配置。没配或配错，@/components/Button 这种 alias 就不会被识别，补全只显示相对路径。

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

• 确保根目录下有 jsconfig.json（JS 项目）或 tsconfig.json（TS 项目）
• baseUrl 必须是 "."，不能是 "./src" 或空字符串
• paths 里的 key 是匹配模式（如 "@/*"），value 是数组，且路径必须以 ["src/*"] 形式写，不能漏掉引号或中括号
• Volar（Vue3）或 TypeScript 插件未激活时，paths 配置可能被忽略——先确认右下角状态栏显示 “Vue” 或 “TypeScript” 已启用

Live Server 修改 HTML 后不自动刷新？多半是 MIME 类型或端口问题

Live Server 默认只监听 .html、.htm 文件变更并触发刷新；JS/CSS 修改不会触发重载，这是设计使然，不是 bug。

• 检查当前打开的文件是否为 .html 后缀，且已通过底部状态栏的 Go Live 启动服务（不是直接双击打开文件）
• 若用 Webpack/Vite 等构建工具，Live Server 与它们共存时会冲突——关闭 Live Server，改用构建工具自带的 dev server
• 浏览器控制台出现 MIME type ('text/html') is not executable 错误，说明服务器返回了 HTML 但浏览器试图执行 JS，此时需确认引入的 JS 路径是否正确（比如漏写了 ./ 或拼错 src）
• 端口被占时，Live Server 不会报错，而是静默失败；可在设置里把 liveServer.settings.port 改成 0（随机端口）或指定一个空闲端口

Volar 为什么没反应？Vue3 项目里 vue-language-features 模块必须启用

Volar 不是单个插件，而是一套语言功能组合：核心是 vue-language-features，它提供模板语法高亮、v-model 参数提示、组件自动导入等能力。禁用这个子模块，Volar 就只剩图标和基础文件支持。

• 打开 VS Code 命令面板（Ctrl+Shift+P），搜 Preferences: Configure Language Specific Settings...，选 vue，确认 "vue.suggestions.enabled": true
• 检查右下角状态栏，点击 Vue 图标，确认启用的是 Volar 而非旧版 Vetur；若显示 Vetur，需卸载它再重启 VS Code
• TS 项目中，tsconfig.json 里若含 "include": ["src/**/*"]，但没包含 .vue 文件，Volar 的类型检查会失效——加一行 "src/**/*.vue"
• 遇到 Cannot find module '@/components/xxx.vue' 报错，不是路径问题，而是 compilerOptions.types 缺少 "volar/vue-shim"

复杂点在于，这些插件不是孤立运行的——Volar 依赖 TS 配置，Path Intellisense 依赖 jsconfig，ESLint 和 Prettier 的协作靠配置顺序。少一个环节，表面看着装好了，实际功能就断在某个链路上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！