前端开发高效配置VSCode插件心得-VSCode-PHP中文网

根本原因是eslint和prettier职责重叠且默认配置未对齐：eslint默认启用quotes、semi等格式规则，prettier则强制统一样式，导致保存时反复修改、报错；需安装eslint-config-prettier（置于extends末尾）和eslint-plugin-prettier，并设vscode默认格式化器为prettier。

前端开发高效配置vscode插件心得

为什么 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 需手动关联。

前端美化

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

下载

打开设置（Ctrl+,），搜 emmet.includeLanguages，点击“编辑 in settings.json”

加入：

{
"emmet.includeLanguages": {
  "vue-html": "html",
  "javascriptreact": "html",
  "typescriptreact": "html"
}
}

vue-html 是 Vue 模板块（<template></template>）的语言标识符，不是 vue；JSX 对应的是 javascriptreact 或 typescriptreact，不是 jsx
如果缩写仍无响应，检查当前文件右下角语言模式是否正确（如 .vue 文件应显示 “Vue” 而非 “Plain Text”）

Auto Rename Tag 修改一个标签名，另一个却没同步？

johnpapa.auto-rename-tag 插件依赖准确的语法解析，对非标准 HTML 或嵌套过深的模板容易失效。

它只作用于成对的开始/结束标签，不处理自闭合标签（如 <img>）、指令（如 <div v-if="x">）或 JSX 中的属性式写法（<code><mycomponent prop="{value}"></mycomponent>）
在 Vue 中，确保光标落在开始标签的 tagName 上（如 <div> 的 <code>div 部分），而不是属性或空格位置
若在 <template></template> 外修改（比如 <script></script> 里的字符串拼接 HTML），插件完全不响应 —— 它只监听模板区域的 AST 结构变化
遇到不生效，先试重启 VSCode，再检查是否与其他插件（如 vetur 旧版或 volar）的标签解析逻辑冲突

前端配置没有银弹，每个插件的行为边界和触发条件都藏在文档角落或 issue 里。花十分钟查清它“在哪起作用、在哪失效”，比反复重装插件有效得多。