根本原因是ESLint和Prettier职责重叠且默认配置未对齐：ESLint默认启用quotes、semi等格式规则，Prettier则强制统一样式，导致保存时反复修改、报错；需安装eslint-config-prettier（置于extends末尾）和eslint-plugin-prettier，并设VSCode默认格式化器为Prettier。
为什么 ESLint + Prettier 组合总报冲突？
ESLint 和 Prettier 本该协同工作，但很多人一配就出现格式化后又报 ESLint 错误、保存时反复“打架”的现象。根本原因是两者职责重叠（都管代码风格），且默认配置没对齐。
- 确保安装
eslint、prettier、eslint-config-prettier和eslint-plugin-prettier（注意不是prettier-eslint，已废弃） - 在
.eslintrc.js中把eslint-config-prettier放在extends数组末尾，它会禁用所有和 Prettier 冲突的 ESLint 规则 -
eslint-plugin-prettier要加进plugins，并把'plugin:prettier/recommended'加入extends—— 这条会把 Prettier 当作 ESLint 的一条规则来执行，统一入口 - VSCode 的
editor.formatOnSave设为true，但必须关掉editor.formatOnSaveTimeout默认值（它可能中断格式化），同时确保editor.defaultFormatter指向esbenp.prettier-vscode
Live Server 启动后页面空白或 404？
ritwickdey.liveserver 插件启动快，但默认根目录不一定是项目根，尤其在子目录开 VSCode 时容易找错路径。
- 启动前确认当前打开的文件夹是 Web 项目的根（含
index.html或public/目录） - 右键 HTML 文件 → “Open with Live Server”，而非直接点插件图标 —— 后者会以 VSCode 工作区根为服务根，前者以该文件所在目录为根
- 如需自定义端口或根路径，在
.vscode/settings.json中加：{ "liveServer.settings.port": 5500, "liveServer.settings.root": "./src" } - 注意：它不支持原生
import（ESM）模块直接运行，遇到Uncaught TypeError: Failed to resolve module specifier就得换serve或vite开发服务器
Emmet 缩写在 Vue / JSX 文件里不生效？
VSCode 默认只在 html、php 等语言中启用 Emmet，.vue 单文件组件和 .jsx 需手动关联。
- 打开设置（Ctrl+,），搜
emmet.includeLanguages，点击“编辑 in settings.json” - 加入：
{ "emmet.includeLanguages": { "vue-html": "html", "javascriptreact": "html", "typescriptreact": "html" } } -
vue-html是 Vue 模板块（<template>）的语言标识符，不是vue；JSX 对应的是javascriptreact或typescriptreact，不是jsx - 如果缩写仍无响应，检查当前文件右下角语言模式是否正确（如 .vue 文件应显示 “Vue” 而非 “Plain Text”）
Auto Rename Tag 修改一个标签名，另一个却没同步？
johnpapa.auto-rename-tag 插件依赖准确的语法解析，对非标准 HTML 或嵌套过深的模板容易失效。
立即学习“前端免费学习笔记（深入）”；
- 它只作用于成对的开始/结束标签，不处理自闭合标签（如
<img />）、指令（如<div v-if="x">）或 JSX 中的属性式写法（<MyComponent prop={value} />） - 在 Vue 中，确保光标落在开始标签的 tagName 上（如
<div的div部分），而不是属性或空格位置 - 若在
<template>外修改（比如<script>里的字符串拼接 HTML），插件完全不响应 —— 它只监听模板区域的 AST 结构变化 - 遇到不生效，先试重启 VSCode，再检查是否与其他插件（如
vetur旧版或volar）的标签解析逻辑冲突
前端配置没有银弹，每个插件的行为边界和触发条件都藏在文档角落或 issue 里。花十分钟查清它“在哪起作用、在哪失效”，比反复重装插件有效得多。
