eslint与prettier冲突的解决方案是让eslint专注代码质量检查、prettier专管格式化:在.eslintrc.js的extends末尾添加'prettier'并安装eslint-config-prettier禁用冲突规则,vscode中设defaultformatter为prettier-vscode且开启formatonsave。

ESLint + Prettier 冲突怎么解
直接开干:装了 ESLint 和 Prettier 却发现保存后格式越改越乱,本质是两者规则打架。比如 ESLint 要分号、Prettier 不要,或者缩进空格数不一致。
关键不是“谁该让步”,而是让 ESLint 把格式类规则关掉,只管逻辑和规范:
- 在
.eslintrc.js的extends数组末尾加'prettier'(注意顺序,必须放最后) - 同时安装
eslint-config-prettier,它会禁用所有与Prettier冲突的ESLint规则 -
settings.json里设"editor.defaultFormatter"为"esbenp.prettier-vscode",并开启"editor.formatOnSave"
这样 ESLint 负责报错(如未定义变量、console 漏删),Prettier 负责排版,各司其职。
Vue3 项目里 Volar 和 Vetur 能共存吗
不能,而且必须卸载 Vetur。Volar 是 Vue3 官方推荐的替代方案,Vetur 对 Composition API 支持极差,会导致 ref 类型推导失败、setup 语法高亮错乱、defineProps 提示缺失等问题。
实操要点:
- 先禁用或卸载所有已安装的
Vetur相关插件(包括Vetur本身、Vetur Pack等) - 安装
Volar,并确保启用 “Take Over Mode”(设置里搜volar.takeOverMode,设为true) - 重启 VSCode —— 这步不能跳,否则
script setup里的类型提示不会生效
如果项目里还有 .vue 文件用 Options API,Volar 同样支持,无需额外配置。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
路径别名 @ / ~ 跳转不了怎么办
按住 Ctrl(Mac 为 Cmd)点 @/components/Button.vue 没反应?不是插件问题,是 VSCode 不知道 @ 指向哪。
解决方式取决于你用的构建工具:
- Vue CLI 或 Vite 项目:确保根目录有
jsconfig.json或tsconfig.json,且含"baseUrl": "./"和"paths"配置,例如:{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } } } - 没配 tsconfig/jsconfig?装插件
@aliu/vue-alias-skip(注意作者名是lihuiwang),然后在设置里填入对应映射 - Webpack 项目需额外确认
resolve.alias与jsconfig一致,否则 VSCode 和打包行为不一致
别名跳转失效往往不是插件没装对,而是配置没对齐。
为什么装了插件但代码提示还是不工作
常见原因不是插件坏了,而是语言服务没启动或被覆盖。比如装了 TypeScript React code snippets,但 .tsx 文件顶部显示 “No language mode” 或提示来自 JavaScript 而非 TypeScript。
检查这三处:
- 右下角状态栏看当前文件语言模式 —— 点击它,选
TypeScript React,别选成JavaScript React - 确认项目根目录有
tsconfig.json,哪怕只是空对象{},没有它 TS 语言服务不会激活 - 某些插件(如
Volar)会接管.vue文件的语言服务,此时HTML CSS Support对<style></style>块的提示才生效;而Auto Rename Tag在Vue模板里默认不工作,得手动在设置里开"auto-rename-tag.activationOnLanguage"加上vue
插件不是装上就自动生效,它依赖 VSCode 对当前文件的“身份认定”。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










