前端工程师专属的VSCode插件宝库-VSCode-PHP中文网

prettier 和 eslint 必须共存且顺序正确：eslint 负责逻辑规范（如 no-undef），prettier 负责格式统一（缩进、引号等）；单独使用任一工具均无法兼顾质量与风格，配置错序会导致冲突、保存反复修改或规则失效。

前端工程师专属的vscode插件宝库

为什么 Prettier 和 ESLint 必须一起装，且顺序不能错

单独装 Prettier 只能修格式，代码写错 undefined 也看不出来；只装 ESLint 则格式混乱、团队提交 diff 全是空格换行。两者必须共存，但配置顺序错了会互相打架。

先装 ESLint 插件，再装 Prettier，最后装 eslint-config-prettier（不是 prettier-eslint）
settings.json 中必须设 "editor.defaultFormatter": "esbenp.prettier-vscode"，否则 ESLint 会抢格式化权
若用 Vue3，extends 配置里要包含 "plugin:vue/vue3-recommended"，否则 v-model 解构提示失效
常见报错 Definition for rule 'prettier/prettier' was not found，说明 eslint-plugin-prettier 没装或版本不匹配（2026 年推荐 v5.0+）

Vue3 项目别再用 Vetur，Volar 的真实坑点在哪

Vetur 已于 2024 年底停止维护，Vue3 项目强行启用会导致 setup() 返回值类型丢失、defineProps 泛型推导失败、ref 响应式类型不显示 —— 这些都不是配置问题，是底层架构不兼容。

面向设计的AXUI前端框架表单

面向设计的AXUI前端框架表单是一款包含表格、列表、弹窗等的AXUI前端框架表单下载。

下载

安装 Volar 后，必须禁用 VS Code 内置的 TypeScript and JavaScript Language Features（在插件页搜 “Built-in” 找到它 → 点击「Disable (Workspace)」）
tsconfig.json 里需加 "compilerOptions": { "types": ["volar"] }，否则 useSlots() 类型为空对象
如果打开 .vue 文件后无语法高亮，检查是否启用了 Take Over Mode：按 Ctrl+Shift+P → 输入 Volar: Toggle Take Over Mode → 选 Enable
遇到 Cannot find module 'vue' 报错，不是没装 vue，而是 node_modules 路径被 Volar 忽略了，需在 tsconfig.json 的 include 中显式加入 "src/**/*"

Path Intellisense 在 Vite + TypeScript 项目里路径别名不生效？

不是插件坏了，是它默认不认识 @/ 或 #src/ 这类自定义别名 —— 它只认 jsconfig.json 或 tsconfig.json 里的 baseUrl 和 paths 配置，且要求路径必须以 * 结尾。

确保 tsconfig.json 中有：

"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@/*": ["src/*"],
    "#src/*": ["src/*"]
  }
}

插件设置里打开 path-intellisense.mappings，手动加一条："@": "${folder}/src"（注意这里不用通配符，和 tsconfig 不同）
如果用了 Vite 的 resolve.alias 但没同步到 tsconfig，Path Intellisense 就看不到，必须双写
常见现象：输入 import { foo } from '@/composables'，路径补全只出文件夹名，不出具体文件 —— 这说明 src/composables 下没有 index.ts 或 index.js，插件无法自动展开

Auto Rename Tag 在 JSX 或 Vue 模板里失效的三个真实原因

它不是“不支持 JSX”，而是默认关闭了非 HTML 标签的联动 —— Vue 的 <template></template>、React 的 <div> 都得手动开开关。 <ul> <li>打开设置搜索 <code>auto-rename-tag，勾选 Auto Rename Tag: Enabled Languages，然后点击「Edit in settings.json」

在里面加：

"auto-rename-tag.activationOnLanguage": [
  "html",
  "vue",
  "javascriptreact",
  "typescriptreact"
]

如果用了 Fragment（），它不处理，因为不是成对标签；同理，<teleport></teleport> 默认也不联动，需在设置里加 "teleport" 到白名单

最隐蔽的坑：VS Code 开启了 "editor.autoClosingTag": false，会导致 Auto Rename Tag 根本不监听标签输入，必须设为 true

真正卡住人的从来不是插件装不装，而是装完之后哪条配置没对上、哪个开关没打开、哪类文件被默认排除了。这些细节不试一遍，光看文档根本发现不了。